Successfully reported this slideshow.
Your SlideShare is downloading. ×

Better Faceted Navigation: Advanced Design Techniques

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
SEO for large sites
SEO for large sites
Loading in …3
×

Check these out next

1 of 37 Ad

More Related Content

Similar to Better Faceted Navigation: Advanced Design Techniques (20)

Recently uploaded (20)

Advertisement

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 />

Editor's Notes

  • Does not mean more than one attribute at a time
  • Make sure one is filled in (show HTML for contrast). No difference in terms of performance (be clear)
  • If you make it hard to use, they just won’t use it, and then it is less precise than the simpler version.
  • 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

×