Better Faceted Navigation: Advanced Design Techniques

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

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

The Basics
3

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

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

The Challenges
7

Visual Options

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

Checkboxes
Have become the standard
Testing showed no difference in customer
performance
Aesthetically pleasing
10

Slider - Endless
11

Slider - Kayak
12

Visual Nav - Sears
13

Visual Nav - Endless
14

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

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

Managing Large amounts of attributes (categories)

Accordians

Challenge 2: Managing Large amounts of attribute values

Endless
22

eBay
23

eBay
24

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

Choices can be hidden…
26

… or grayed out
27

Gray out Problems

Challenge 4: Page Transitions

eBay
31

Actual User Behavior
34

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

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

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

http://gengrenjie.com	122
http://www.slideshare.net	58
http://mikemadaio.com	43
http://www.taaza.com	1
http://reader.youdao.com	1
http://cache.baidu.com	1

Better Faceted Navigation: Advanced Design Techniques

by mjmadaio on Apr 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 226

Statistics

Better Faceted Navigation: Advanced Design Techniques — Presentation Transcript