Better Faceted Navigation: Advanced Design Techniques from 2010 IA Summit. http://2010.iasummit.org/talks/9707

1. Better Faceted Navigation: Advanced Design Techniques Mike Madaio April 8, 2010 IA Summit

2. 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

3. The Basics 3

4. 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

5. Multi-Select The ability to select more than one value within an attribute For example: Attribute = Memory Values = 1GB, 2GB, 3GB 5

6. 6

7. The Challenges 7

8. Visual Options

9. 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

12. Slider - Endless 11

13. Slider - Kayak 12

14. Visual Nav - Sears 13

15. Visual Nav - Endless 14

16. 15

17. 16

18. Visual Options Retains interaction paradigm Requires the same (or less) cognitive effort Looks nice 17

19. Precision vs. Ease How much precision do users need? 18

20. Managing Large amounts of attributes (categories)

21. Accordians

22. Challenge 2: Managing Large amounts of attribute values

23. Endless 22

24. eBay 23

25. eBay 24

26. Scrolling Box vs Overlay Performance was equivalent for both options Overlay allows for highlighting of certain values on the original page 25

27. Choices can be hidden… 26

28. … or grayed out 27

29. 28

30. Gray out Problems

31. Challenge 4: Page Transitions

32. eBay 31

33. 32

35. Actual User Behavior 34

36. Overall Recap Provide clear feedback Highlight frequently used features Balance precision with ease of use Remember that the “product” is the focus 35

37. 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

38. Questions? Sites Referenced: QVC Endless Dell DSW Sears/Kmart eBay Staples Maytag Marriott Kayak 37 Mike Madaio MikeMadaio.com @mjmadaio