UIs for Faceted NavigationRecent Advances and Remaining Open

ProblemsHCIR’08

Marti Hearst, UC Berkeley

(including some slides from Corey Chandler of eBay)

2

Search Usability Design Goals

The most important usability design goals User control Reduce short term memory load Allow easy, fast reversal of actions Provide consistent view

3

Design Goals

Systematically integrate search results: reflect the structure of the info architecture retain the context of previous interactions

Gives users control and flexibility Over order of metadata use Over when to navigate vs. when to search Allow easy, fast reversal of actions

Allow integration with advanced methods Collaborative filtering, predicting users’

preferences

4

Design Goals

More specifically: Provide context for results Allow flexible, fast navigation Provide previews of next steps Organize results in a meaningful way Support both expanding and refining the search Keep it as simple as possible, but… Show the metadata!

5

The Challenges

Users generally do not adopt new search interfaces

How to show a lot more information without overwhelming or confusing? Most users prefer simplicity unless

complexity really makes a difference Small details matter

6

The Idea of Facets

Create INDEPENDENT categories (facets) Each facet has labels (sometimes arranged in a

hierarchy)

Assign labels from the facets to every item Example: recipe collection

Course

Main Course

CookingMethod

Stir-fry

Cuisine

Thai

Ingredient

Bell Pepper

Curry

Chicken

7

The Idea of Facets

Break out all the important concepts into their own facets

Sometimes the facets are hierarchical Assign labels to items from any level of the

hierarchy

Preparation Method Fry Saute Boil Bake Broil Freeze

Desserts Cakes Cookies Dairy Ice Cream Sorbet Flan

Fruits Cherries Berries Blueberries Strawberries Bananas Pineapple

8

Using Facets

Now there are multiple ways to get to each item

Preparation Method Fry Saute Boil Bake Broil Freeze

Desserts Cakes Cookies Dairy Ice Cream Sherbet Flan

Fruits Cherries Berries Blueberries Strawberries Bananas Pineapple

Fruit > PineappleDessert > Cake

Preparation > Bake

Dessert > Dairy > SherbetFruit > Berries > Strawberries

Preparation > Freeze

10

Advantages of Facets

Can’t end up with empty results sets (except with keyword search)

Helps avoid feelings of being lost. Easier to explore the collection.

Helps users infer what kinds of things are in the collection.

Evokes a feeling of “browsing the shelves” Is preferred over standard search for

collection browsing in usability studies. (Interface must be designed properly)

11

Advantages of Facets

Seamless to add new facets and subcategories

Seamless to add new items. Helps with “categorization wars”

Don’t have to agree exactly where to place something

Interaction can be implemented using a standard relational database.

May be easier for automatic categorization

13

The Flamenco Project

Goal: figure out how to make faceted nav UIs work

Demos, papers, talks are online Nobel prize example uses this toolkit

Open source software available Unix-based

Check it out: http://flamenco.berkeley.edu

14

Facets vs. Hierarchy

Early Flamenco studies compared allowing multiple hierarchical facets vs. just one facet.

Multiple facets was preferred and more successful.

15

Limitation of Facets

Do not naturally capture MAIN THEMES Facets do not show RELATIONS explicitly

AquamarineRed

Orange

DoorDoorway

Wall

Which color associated with which object?Photo by J. Hearst, jhearst.typepad.com

16

“Classic” Faceted Navigation UI with Flamenco

17

Opening ViewSelect literature from PRIZE facet

18

Group results by YEAR facet

19

Select 1920’s from YEAR facet

20

Current query is PRIZE > literature ANDYEAR: 1920’s. Now remove PRIZE > literature

21

Now Group By YEAR > 1920’s

22

Hierarchy Traversal:Group By YEAR > 1920’s, and drill down to 1921

23

Select an individual item

24

Use Endgame to expand out

25

Use Endgame to expand out

26

Or use “More like this” to find similar items

27

Start a new search using keyword “California”

28

Note that category structure remains after the keyword search

29

The query is now a keyword ANDed with a facet subhierarchy

30

Interface Innovations with eBay Express

31

Matching items

32

Matching items

33

Matching items

34

Matching items

35

Matching items

36

Matching items

37

Matching items

38

Matching items

39

Matching items

40

Matching items

41

Matching items

42

Matching items

43

Matching items

44

Matching items

45

Matching items

46

Design Issues(from 2006 SIGIR workshop)

47

How many facets?

Many facets means more choice, but more scanning and more scrolling

An alternative (by eBay) initially show the few most important facets allow user to choose a label from one then show an additional new facet (next most important)

The right choice depends on the application Browsing art history vs. shopping

48

Revealing Hierarchy

One approach (Flamenco): keep all facets present, show deeper level as you descend.

49

Revealing Hierarchy

Another approach (eBay): show only one level at a time; if a facet is chosen that has subhierarchy, show the next level as an additional facet. Example:

In Shoes, user selects Style > Athletic Now show a new facet that shows types of Athletic

shoes Hiking, Running, Walking, etc.

50

Reversibility

Make navigation urls consistent and persistent This way the Back button always works Allows for bookmarking of pages

51

Choosing Labels

Labels must be short – to fit! Tricky with terminology: “endoplasmic reticulum”

Labels must be evocative It’s very difficult to find successful words

Depends on user familiarity with the domain

Use card-sorting exercises Associate synonyms with labels

Beware the context of label use! The “kosher salt” incident

52

Creating Facets

Need to balance depth and breadth Avoid long “skinny” hierarchies

Example from the Art and Architecture Thesaurus: 7 clicks before you get to anything interesting

53

Integrating “browse” and “search”

“Parsing” of query feels natural to users (and the text in the search box is not sacred)

athletic shoes

54

Integrating “browse” and “search”

People browse using the facets more when they are not familiar with the domain

55

Facet Presentation

Users stop using refinements whena) not useful, and b) item count low enough

56

Facet Presentation

Prominently showing a few facets can work well (but prioritization is important)

57

Facet Presentation

Shifting columns doesn’t confuse users

58

Facet Presentation

Truncated list of values per facet is okay (users know how to access the rest)

59

Facet Presentation

Showing sample values help users understand facets and can expose breadth

60

Design Innovations and Remaining Issues

61

Large Numbers of Facets

Getty.org Groups Related Facets Visually Well-designed cues for expand

and collapse of related facets Start with most popular / relevant

facets expanded after the initial search

62

Getty Images

63

Integrating “Smarts” into the UI

64

Integrating Smarts Into the UI

Auto-complete within facets (Also known as dynamic term suggestions) Generally a good idea for search UIs Can be cleverly used within faceted nav UIs:

Example: Search form with auto-complete rather than enumerated author names in a bibliographic collection

65

Integrating Smarts Into the UI

Search terms effecting facet label ordering Yelp is doing this in interesting ways

Extends ideas from eBay Express Which labels shown depends on which query

issued

Yelp is also making subtle variations in the use of hyperlinks vs. checkboxes. Easier for this kind of dataset where the number

of labels per facet is limited.

66

yelp.com

67

Information VisualizationApplied to Faceted Navigation

68

Fathumb Mobile Interface

69

FacetLens

70

WeFeelFine.org

71

Extending the Faceted Model

72

Endeca: Intelligent Subject Labels

Use pre-processing to show most compelling subject labels

Integrated with facets for other kinds of metadata

I think these should be faceted too, after user selects initial subject labels.

73

LibraryThing: Experiments with Tags

74

Getty Images: Catalyst Interface

75

Parallax: More free-form Navigation

76

Summary

Faceted Nav UI ideas are becoming increasingly sophisticated, while remaining usable

The biggest outstanding problem is too many facets / too many labels Innovations:

smart selection of which to show when

integration of keyword search with auto-complete

grouping related facets visually

Taking a more flexible approach to the model

Infoviz is interesting, but may not end up being adopted

77

Acknowledgements

Flamenco Team Brycen Chun, Ame Elliott, Jennifer English, Kevin

Li, Rashmi Sinha, Emilia Stoica, Kirsten Swearingen, Ka-Ping Yee

This work supported in part by NSF (IIS-9984741)

eBay Product Team Corey Chandler, Sam Devins, Elaine Fung, Jean-

Michel Leon, Michelle Millis, Louis Monier, Michael Morgan, Hill Nguyen, Kenny Pate, Melissa Quan, James Reffell, Suzanne Scott, Seema Shah, Preston Smalley, Anselm Baird-Smith, Luke Wroblewski