Better Faceted Navigation: Advanced Design Techniques

  • 7,508 views
Uploaded on

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

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,508
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
42

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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
  • 10. Checkboxes
    • Have become the standard
    • 11. Testing showed no difference in customer
    performance
    • Aesthetically pleasing
    10
  • 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
  • 34.
  • 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