Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Better Faceted Navigation: Advanced Design Techniques<br />Mike Madaio<br />April 8, 2010<br />IA Summit<br />
What we’re going to do today<br />Multi-phased usability study of our Faceted Navigation redesign<br />Review challenges w...
The Basics<br />3<br />
Definitions<br />4<br />Faceted Navigation<br />Allows users to define taxonomy on the fly instead of following a predeter...
Multi-Select<br />The ability to select more than one value within an attribute<br />For example:<br />	Attribute = Memory...
6<br />
The Challenges<br />7<br />
Visual Options<br />
Visual Options <br />Traditional Single-Select Nav is a text link<br />Multi-select introduces a layer of UI complexity<br...
Checkboxes<br /><ul><li> Have become the standard
 Testing showed no difference in customer </li></ul>   performance<br /><ul><li> Aesthetically pleasing</li></ul>10<br />
Slider - Endless<br />11<br />
Slider - Kayak<br />12<br />
Visual Nav - Sears<br />13<br />
Visual Nav - Endless<br />14<br />
15<br />
16<br />
Visual Options<br />Retains interaction paradigm<br />Requires the same (or less) cognitive effort<br />Looks nice<br />17...
Precision vs. Ease<br />How much precision do users need?<br />18<br />
Managing Large amounts of attributes (categories)<br />
Accordians<br />
Challenge 2: Managing Large amounts of attribute values<br />
Endless<br />22<br />
eBay<br />23<br />
eBay<br />24<br />
Scrolling Box vs Overlay<br />Performance was equivalent for both options<br />Overlay allows for highlighting of certain ...
Choices can be hidden…<br />26<br />
… or grayed out<br />27<br />
28<br />
Gray out Problems<br />
Challenge 4: Page Transitions<br />
eBay<br />31<br />
32<br />
Actual User Behavior<br />34<br />
Overall Recap<br />Provide clear feedback<br />Highlight frequently used features<br />Balance precision with ease of use<...
Other issues to consider<br />Translating data from database into customer-facing values <br />What order should attribute...
Upcoming SlideShare
Loading in …5
×

Better Faceted Navigation: Advanced Design Techniques

8,804 views

Published on

Better Faceted Navigation: Advanced Design Techniques from 2010 IA Summit.

http://2010.iasummit.org/talks/9707

Published in: Design
  • Be the first to comment

Better Faceted Navigation: Advanced Design Techniques

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

×