SlideShare une entreprise Scribd logo
1  sur  37
Better Faceted Navigation: Advanced Design Techniques Mike Madaio April 8, 2010 IA Summit
What we’re going to do today Multi-phased usability study of our Faceted Navigation redesign Review challenges we faced implementing advanced faceted nav for a large dataset Specific focus on multi-select functionality Share how we overcame these challenges 2
The Basics 3
Definitions 4 Faceted Navigation Allows users to define taxonomy on the fly instead of following a predetermined order Facet or Attribute The grouping (Variety, Country) Value Cabernet, Merlot
Multi-Select The ability to select more than one value within an attribute For example: 	Attribute = Memory 	Values = 1GB, 2GB, 3GB 5
6
The Challenges 7
Visual Options
Visual Options  Traditional Single-Select Nav is a text link Multi-select introduces a layer of UI complexity Designers are finding other ways to display information 9
Checkboxes ,[object Object]
 Testing showed no difference in customer    performance ,[object Object],10
Slider - Endless 11
Slider - Kayak 12
Visual Nav - Sears 13
Visual Nav - Endless 14
15
16
Visual Options Retains interaction paradigm Requires the same (or less) cognitive effort Looks nice 17
Precision vs. Ease How much precision do users need? 18
Managing Large amounts of attributes (categories)
Accordians
Challenge 2: Managing Large amounts of attribute values
Endless 22
eBay 23
eBay 24
Scrolling Box vs Overlay Performance was equivalent for both options Overlay allows for highlighting of certain values on the original page 25
Choices can be hidden… 26
… or grayed out 27
28
Gray out Problems
Challenge 4: Page Transitions
eBay 31
32
Actual User Behavior 34
Overall Recap Provide clear feedback Highlight frequently used features Balance precision with ease of use Remember that the “product” is the focus 35
Other issues to consider Translating data from database into customer-facing values  What order should attributes and values be in? What level of the hierarchy to expose each attribute? … and on and on 36

Contenu connexe

Similaire à Better Faceted Navigation: Advanced Design Techniques

Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Richard Harbridge
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary Team
Lisa Herrod
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
Empatika
 
Determining Relevance Rankings from Search Click Logs
Determining Relevance Rankings from Search Click LogsDetermining Relevance Rankings from Search Click Logs
Determining Relevance Rankings from Search Click Logs
Inderjeet Singh
 
Scratchpad Requirements Exercise
Scratchpad Requirements ExerciseScratchpad Requirements Exercise
Scratchpad Requirements Exercise
eMonocot
 

Similaire à Better Faceted Navigation: Advanced Design Techniques (20)

Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
 
Advanced Internet
Advanced InternetAdvanced Internet
Advanced Internet
 
Writing Studio
Writing StudioWriting Studio
Writing Studio
 
Usability in a Multidisciplinary Team
Usability in a Multidisciplinary TeamUsability in a Multidisciplinary Team
Usability in a Multidisciplinary Team
 
User interface design for the Web Engineering Psychology
User interface design for the Web Engineering PsychologyUser interface design for the Web Engineering Psychology
User interface design for the Web Engineering Psychology
 
Task Complexity Metrics - Ben Colborn
Task Complexity Metrics - Ben ColbornTask Complexity Metrics - Ben Colborn
Task Complexity Metrics - Ben Colborn
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Early Signal Testing: Designing Atlassian’s New Look
Early Signal Testing: Designing Atlassian’s New LookEarly Signal Testing: Designing Atlassian’s New Look
Early Signal Testing: Designing Atlassian’s New Look
 
Determining Relevance Rankings from Search Click Logs
Determining Relevance Rankings from Search Click LogsDetermining Relevance Rankings from Search Click Logs
Determining Relevance Rankings from Search Click Logs
 
Ajax Usability for AjaxWorld
Ajax Usability for AjaxWorldAjax Usability for AjaxWorld
Ajax Usability for AjaxWorld
 
Smas Hits May 11, 2009 Sensex Down 193 Points On Profit Booking
Smas Hits May 11, 2009 Sensex Down 193 Points On Profit BookingSmas Hits May 11, 2009 Sensex Down 193 Points On Profit Booking
Smas Hits May 11, 2009 Sensex Down 193 Points On Profit Booking
 
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
EENA 2021 - User Experience and User Interface (UX/UI) design (1/3)
 
Scratchpad Requirements Exercise
Scratchpad Requirements ExerciseScratchpad Requirements Exercise
Scratchpad Requirements Exercise
 
Yadda presentation
Yadda presentationYadda presentation
Yadda presentation
 
IWMW11: A2 working against the silo
IWMW11: A2 working against the siloIWMW11: A2 working against the silo
IWMW11: A2 working against the silo
 
Website Usability
Website UsabilityWebsite Usability
Website Usability
 
Please Define: Roles in User Experience Design
Please Define: Roles in User Experience DesignPlease Define: Roles in User Experience Design
Please Define: Roles in User Experience Design
 
User experience design
User experience design User experience design
User experience design
 

Dernier

cholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdfcholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdf
RawalRafiqLeghari
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 

Dernier (20)

cholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdfcholilithiasis, cholecystitis,gall bladdder .pdf
cholilithiasis, cholecystitis,gall bladdder .pdf
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
Kondapur ] High Profile Call Girls in Hyderabad (Adult Only) 9352988975 Escor...
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
❤️ Call Girls Service Amritsar Call Girls (Adult Only) 💯Call Us 🔝 6378878445 ...
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
Aminabad * High Profile Escorts Service in Lucknow Phone No 9548273370 Elite ...
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
Nishatganj ? Book Call Girls in Lucknow | Book 9548273370 Extreme Naughty Cal...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call GirlsDahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
Dahisar Comfortable Call Girls ,09167354423,Mira Road Model Call Girls
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 

Better Faceted Navigation: Advanced Design Techniques

Notes de l'éditeur

  1. Does not mean more than one attribute at a time
  2. Make sure one is filled in (show HTML for contrast). No difference in terms of performance (be clear)
  3. If you make it hard to use, they just won’t use it, and then it is less precise than the simpler version.
  4. Search nav having same rules. Surfacing attributes at certain levels (ie forcing someone to go into Rings to see ring type in search). Caveats – other things to consider