Designing for Discovery with

Faceted Navigation

2

@JimKalbach

Principal UX Designer Citrix

LIS Degree Rutgers University

3

14:00 Introduction

14:30 Determining Facets

15:15 Using Facets

15:30 Break

16:00 Exercise

16:30 Design & Interaction (middle game)

17:15 Advanced Topics

17:30 End

4

What are facets?

• Facets are categories that represent properties of an object

• Categories have values that describe the objects

5

Facets: Alternative To Hierarchy

Location = Parents, Children Location = Sets it belongs to

6

7

Exercise 1 – Facets (5 Minutes)

What are facets of wine?

8

Typcial Structures for Values

TYPE DESCRIPTION EXAMPLES

ListFlat list without hierarchy

- Author- Job titles

HierarchyTree structure with parent-child relationships

- Region- Subject

BinaryValues with only 2 options; either-or

- Gender- Yes/No condition

Continuum

Unbroken list on a range, usually numerical

- Price- Date

ScaleLike a continuum, but with descrete categories

- Rating- Price categories

9

Resources On Facets• Denton, William. “How to Make a Faceted Classification and Put It On the Web.“ Nov. 2003.

http://www.miskatonic.org/library/facet-web-howto.html.

• Endeca, “User Interface Design Pattern Library.“ http://patterns.endeca.com

• Fast, Karl, Fred Leise, Mike Steckel. "0. All About Facets and Controlled Vocabularies" Boxes and Arrows, 9 December 2002. http://www.boxesandarrows.com/archives/all_about_facets_controlled_vocabularies.php.——— "1. What Is a Controlled Vocabulary?" Boxes and Arrows, 16 December 2002.http://www.boxesandarrows.com/archives/what_is_a_controlled_vocabulary.php.——— "2. Creating a Controlled Vocabulary" Boxes and Arrows, 7 April 2003.http://www.boxesandarrows.com/archives/creating_a_controlled_vocabulary.php.——— "3. Synonym Rings and Authority Files" Boxes and Arrows, 26 August 2003.http://www.boxesandarrows.com/archives/synonym_rings_and_authority_files.php——— "4. Controlled Vocabularies: A Glosso-Thesaurus" Boxes and Arrows, 27 October 2003.http://www.boxesandarrows.com/archives/controlled_vocabularies_a_glossothesaurus.php.——— "Facets and Controlled Vocabularies: An Annotated Bibliography" Boxes and Arrows, n.d.http://www.boxesandarrows.com/archives/Facets_CV/Bibliography.htm

• FLAMENCO.berkeley.edu

• Instone, Keith “"Faceted Browsing - How User Interfaces Represent and Benefit from a Faceted Classification System", SOASIST meeting, Dayton, Ohio http://instone.org/facetedbrowse

• Blog posts by Jim Kalbach:• Faceted Navigation: Grouping – An UnTapped Potential?

http://experiencinginformation.wordpress.com/2010/12/06/faceted-navigation-grouping-an-untapped-potential/• Faceted Navigation: Displaying and Forecasting Magnitude

http://experiencinginformation.wordpress.com/2011/12/26/faceted-navigation-displaying-and-forecasting-magnitude/ • ROI Of Faceted Navigation? http://experiencinginformation.wordpress.com/2011/07/17/roi-of-faceted-navigation/• Faceted Navigation: SEO and Facets http://experiencinginformation.wordpress.com/2010/09/04/faceted-navigation-seo-and-facets/• Faceted Navigation: Typical Structures for Values

http://experiencinginformation.wordpress.com/2010/07/18/faceted-navigation-typical-structures-for-values/• Faceted Navigation: Bring Back the Dead Ends (post by Pete Bell)

http://experiencinginformation.wordpress.com/2010/06/19/faceted-navigation-bring-back-the-dead-ends-post-by-pete-bell/• Faceted Navigation: Layout and Display of Facets

http://experiencinginformation.wordpress.com/2010/06/12/faceted-navigation-layout-and-display-of-facets/• Faceted Navigation: Showing More Values 

http://experiencinginformation.wordpress.com/2010/05/25/facetted-navigation-showing-more-values/ http://experiencinginformation.wordpress.com/2010/05/30/faceted-navigation-showing-more-values-part-2

10

• Kwasnick, Barbara H. "The Role of Classification in Knowledge Representation and Discovery." Library Trends 48 no. 1 (Summer 1999): 22-47. http://www.ideals.illinois.edu/bitstream/handle/2142/8263/librarytrendsv48i1d_opt.pdf?sequence=1

• Louie, Aaron J., Eric L. Maddox, and William Washington. "Using Faceted Classification to Provide Structure for Information Architecture." Paper presented at the ASIS&T 2003 Information Architecture Summit, Portland, OR, 21-23 March 2003. http://depts.washington.edu/pettt/presentations/conf_2003/IASummit.pdf.

• Greg Nudelman, “Numeric Filters: Issues and Best Practices.” UX Matters. http://www.uxmatters.com/mt/archives/2010/02/numeric-filters-issues-and-best-practices.php

• Priss, Uta, and Elin Jacob. "Utilizing Faceted Structures for Information Systems Design," in ASIS '99: Proceedings of the 62nd ASIS Annual Meeting, Washington, D.C., October 31 - November 4, 1999: Knowledge: Creation, Organization, and Use, edited by Larry Woods, 203-212. (Medford, NJ: ASIS, [1999?]).http://www.upriss.org.uk/papers/asis99.pdf.

• Ranganathan, S.R. Elements of Library Classification. 3rd ed. New York: Asia Publishing House, 1962.

• Spiteri, Louise. "A Simplified Model for Facet Analysis: Ranganathan 101." Canadian Journal of Information and Library Science 23 no. 1/2 (April-July 1998): 1-30. http://aifia.org/pg/a_simplified_model_for_facet_analysis.php.

• Steckel, Mike. "Ranganathan for IAs." Boxes and Arrows, 7 October 2002.http://www.boxesandarrows.com/archives/ranganathan_for_ias.php.

• Tunkelang, Daniel. Faceted Search. Morgan & Claypool Publishers, 2009.

• Tzitzikas, Yannis, Anastasia Analyti, Nicolas Spyratos, and Panos Constantopolous. "An algebraic approach for specifying compound terms in faceted taxonomies," in Proceedings of the 13th European-Japanese Conference on Information Modelling and Knowledge Bases, EJC’2003 (Kitakyushu, Japan: 2003).http://www.csi.forth.gr/~tzitzik/XFML+CAMEL/papers/CoTeCAlgebra_paper.pdf.

• Tzitzikas, Yannis, Nicolas Spyratos, Panos Constantopolous, and Anastasia Analyti. "Extended Faceted Taxonomies for Web Catalogs." Paper presented at the Third International Conference on Web Information Systems Engineering, WISE 2002, Singapore, December, 2002. Gzipped PostScript version available athttp://www.csi.forth.gr/~tzitzik/publications/Tzitzikas_WISE_2002.ps.gz.

• Van Dijck, Peter. "Introduction to XFML." xml.com, 22 January 2003. http://www.xml.com/lpt/a/2003/01/22/xfml.html.

• ——— "XFML Core - eXchangeable Faceted Metadata Language." 2003. http://www.xfml.org/spec/1.0.html

• Vickery, B.C. Faceted Classification: A Guide to Construction and Use of Special Schemes. London: Aslib, 1960.

11

Determining Facets

12

Determining Facets

STEP 1. Identify main concepts within a domain • Look for entities: People, places, things, objects, ideas

• Create a list of terms from interviews, websites catalogs, search logs, taxonomies, content analysis

STEP 2. Cluster and group into logical categories• Determine which categories are the primary facets of the

information your providing.

• Test groupings, card sorting

STEP 3. Create a domain model• Show relationships

• Consider navigation paths

13

STEP 1: Example – Boxes and Arrows

14

STEP 2: Example – Facets for Boxes and Arrows

15

Exercise 2: Select & Document Facets (20 mins)In groups1.Read your scenario aloud and think about how your customers might shop for wine. 2. Select 6 (or so) facets from Exercise 1 that best support user goals and business goals.3.List the facets below and their values. How are the values structured?

FACET VALUES STRUCTURE TYPE

16

STEP 3: Domain Model – Concept Map for Flickr

http://www.flickr.com/photos/bryce/58299511/

17

Domain Model - BBC Wildlife

Mike Atherton, “Beyond the Polar Bear.” http://www.slideshare.net/reduxd/beyond-the-polar-bear

18

Using Facets

19

Opening

Middle Game

End Game

20

Flamenco – 1. Opening

http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/spiro/Flamenco

21

Flamenco – 2. Middle Game

22

Flamenco – 3. End Game

23

Flamenco - Successive Filtering

24

Tesco - 1. Opening

25

Tesco – 2. Middle Game

26

Tesco – 3. End Game

27

BBC Wildlife – 1. Opening

28

BBC Wildlife – 2. Middle Game

29

BBC Wildlife – 3. End Game

30

Cars.com - 1. Opening

31

Newssift.com – 1. Opening (ca. 2008)

32

Costco.com – 2. Middle Game

33

Amazon.de – 2. Middle Game

Amazon.de ca. summer 2011

34

Facets have no medium

1.

Opening

2.

Middle Game

3.

EndGame

Facet 1

Facet 2

Facet 3

Facet 4

Facet 5

Facet 6

Facet 7

Facet 8

Interface

Information Architecture

35

Exercise 3 – Using Facets (15 Minutes)

1. Based on the previous exercise, map your facets in relation to the 3 phases just discussed:1. Opening2. Middle Game3. End Game

Sketch how they might appear or add notes on the right.

Consider these questions:- Is there a logical order of selection?

- Where does it make most sense to have each facet appear?

- In what form might each facet appear (navigation, filter, sort, just for info, etc.)?

- Can users navigate facets from the Opening? From the End Game?

36

Exercise 31. Opening

2. Middle Game

3. End Game

Facet 1

Facet 2

Facet 3

Facet 4

Facet 5

Facet 6

_____________________________________________________________________________________

_________

_____________________________________________________________________________________

__________

_____________________________________________________________________________________

__________

37

Middle Game

Design & Interaction

38

Design Considerations

1. Where do facets appear on page?Showing or hidden by default?

2. How will values be displayed? How do you show values and item count? What do you do with wrapping? In which order are values shown? How many by default?

3. How do you see further values?4. How are values selected?

Single selection? Multiple selection

5. Where are selected filters placed?6. How do you undo a selection?

39

1. Where do facets appear?

40

Left – Hoovers.com

41

Center – Yelp.com

42

Right – U. of Edinburgh

43

2. How will values be displayed?

44

Links + More - NCSU Library

• Values = Text links• Count = grey with () after value• Wrapping = indented• Order = by item count• Default = 5 values (+ “show

more“)

45

Links + Scrolling - Baur.de

• Values = Menu option• Count = grey with () after value• Wrapping = None (scrolling)• Order = Alphabetical• Default = All (+scrolling)

46

Checkboxes, Sliders - Kayak.com

• Values = Checkboxes, sliders

• Count = Not given for most• Wrapping = None • Order = Mixed by facet• Default = Show all

47

Input – Amazon.com

PRICE • Values = Scale categories• Count = grey in () after link• Wrapping = Not needed• Order = Ascending• Default = Show all

+ Input for continuous range

48

Sorting Values - www.anobii.com

49

Value Selection via Color Picker - www.etsy.com

50

Relative Magnitude – www.MedStory.com (ca. 2010)

51

3. How can users see more values?

52

Additional Values: Inline Expand – HomeDepot.com

53

Additional Values: Dialog – Artist Rising

54

Additional Values: Scrolling – Zappos.com (ca. 2010)

55

Additional Values: Popup – Ebay

56

Additional Values: New Page – ACM Digital Lib.

57

Additional Values: Paging – www.Semedico.com

58

Additional Values: Autocomplete - LinkedIn

59

“More“ + Scrolling – www.nextag.com

60

4. How are multiple values selected?

61

Multiple Selection – ScienceDirect.com

62

Multiple Selection – Exhibit

63

Multiple Selection – Exhibit

64

Grey Ends – Linked In

65

5. How are selections shown and removed?

66

Inline – Amazon.com

67

Bread Box – Flamenco

68

Breadcrumb – Forrester.com

69

Amazon HomeDepot

Yelp Kayak Flamenco

Facets Category, Brand, Price, Rating

Category, Price, Brand, etc

Neighborhood, Distance, Feature, Price, Category

Various… Person, Style, Location, Era, etc

Layout Left Left Top center Left Left

Display of values

Text links with Wrapping, includes item count

Text links + item count

Links, Checkboxes

Links, sliders, checkboxes

Links with Wrapping, including count

Number of default values

2-5 (max. 5) Varies: 5-15 4 All showing max. 12

Order By count By scheme ?? By scheme By count

Showing more values

Link: “More“(inline expand)

Link: „“More“ (inline expand)

Scrolling All showing Link: new page

Multiple selection?

Yes No Yes Yes No

Selection location and removing selection

Inline in the list;Select top category to remove

Breadcrumb; Click to remove

Inline;Make new selection

Inline;Move slider, or uncheck,

Top middle as stack;Click X to remove

Summary

70

Exercise 4 – Design & Interaction (15 mins)Based on the previous exercise, design the interaction with facets by sketching wireframes.

Focus on either the “Opening“ or “End Game“ pages first.

Time permitting, look at the “Middle Game.“

71

Advanced Topics

72

Topics

1. Grouping

2. Overlaying Facets

3. Integrated Facet Breadcrumb

4. Experiemental Interfaces

73

1. Grouping - FLAMENCO

74

1. Grouping – World Digital Library

75

1. Grouping – World Digital Library

76

2. Overlaying Facets – Freebase Parallax

77

2. Overlaying Facets – Freebase Parallax

78

2. Overlaying Facets – Freebase Parallax

79

2. Overlaying Facets

Elfin Hills

Types of Wine (4):BaroloBordeauxPinot NoirShiraz

Overall Ratings

Narrowed by: Region - Australia > NSW

Facets

Hunter Valley

Types of Wine (3):Australian Dry RedMerlotZinfandel

Overall Wine Ratings

1 2 3 4 5 1 2 3 4 5

Lea Estates

Types of Wine (2):TypeType

Pokolbin Cellars

Type of Wines (2):TypeType

Sort: On (change order )

80

2. Overlaying Facets

Elfin Hills

Types of Wine (4):BaroloBordeauxPinot NoirShiraz

Overall Ratings

Narrowed by: Region - Australia > NSW

Facets

Hunter Valley

Types of Wine (3):Australian Dry RedMerlotZinfandel

Overall Wine Ratings

1 2 3 4 5 1 2 3 4 5

Lea Estates

Types of Wine (2):TypeType

Pokolbin Cellars

Type of Wines (2):TypeType

Sort: On (change order )

First sort by:

Then by

Then by

Winery Name, alphabetical

Types of Wine, descending

Rating, descending

81

3. Integrated Faceted Breadcrumb

GREG NUDELMAN, “Faceted Finding with Super-Powered Breadcrumbs,”http://www.boxesandarrows.com/view/faceted-finding-with 

82

4. Experimental Interfaces

Relation Browser: http://ils.unc.edu/relationbrowser/

83

4. Experimental Interfaces

Relation Browser: http://ils.unc.edu/relationbrowser/

84

4. Experimental Interfaces: mspace

mSpace: www.mspace.fm

Add/remove facetsRe-order columns

85

4. Experimental Interfaces: Elastic Lists

Elastic Lists: http://moritz.stefaner.eu/projects/5yrs-infosthetics/

86

4. Experimental Interfaces: Pivot

Pivot: http://www.youtube.com/watch?v=nZAx9StH2_k&feature=related

87

Final Thoughts

88

IA is independent of any medium.

“Since information architecture relies

on principles that are largely

independent from any specific

medium…it provides a flexible but solid

conceptual model for the design of

cross-context and cross-channel user

experiences…By addressing these

structural issues, it is capable of

providing all actors with a constant,

coherent cognitive framework

throughout the whole process.“

89

Drive engagement through discovery.

We found that if the users used search to

locate their target content on the site,

only 20% of them continued looking at

other content after they found the target

content. But if the users used the

category links to find their target, 62%

continued browsing the site. Users who

started with the category links ended up

looking at almost 10 times as many non-

target content pages as those who

started with search. JARED SPOOL, "Users Continue After Category Links" (December 2001). http://www.uie.com/articles/continue_after_categories

90

91

Benefits of faceted navigation

• Conversion: Customers can’t buy what they can’t find

• Efficiency: Good navigation increases productivity

• Confidence: Faceted navigation increases information scent

• “Aboutness”: Facets show semantic make-up of a collection

• Reduced Uncertainty: Not required to specify precise queries

• Guided Experience: Browsing categories provides a different experience than keyword search 

JIM KALBACH, “ROI of faceted navigation”http://experiencinginformation.wordpress.com/2011/07/17/roi-of-faceted-navigation

92

Conclusion

• Plan your IA around the core facets of your domain

• Conceive of IA separate from the UI

• Leverage facets throughout the discovery experience

• Drive engagement with information interaction

• Pay close attention to the interaction design

• Improve, explore and innovate faceted navigation

93

Thank You

Jim.Kalbach@Gmail.com

www.experiencinginformation.com

94

1. “Mapping the User Experience with Alignment Diagrams“

Workshop at Design for Experience, Cologne

Friday, 26 April 2013, 9:00-13:00

2. “UX Strategy: Using Design to Solve Business Problems”

Workshop at IA Konferenz, Berlin

Thursday, 2 May 2013, 14:00-18:00

Upcoming Workshops

More details on www.experiencinginformation.com