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,593 views

Published on

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

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

Published in: Design
0 Comments
48 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,593
On SlideShare
0
From Embeds
0
Number of Embeds
278
Actions
Shares
0
Downloads
0
Comments
0
Likes
48
Embeds 0
No embeds

No notes for slide
  • 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
  • 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 />

    ×