Faceted navigation has become very popular in the last decade. It’s seen as way to improve the findability of information on many sites, particularly those with large collections of products or documents. The design of real-world faceted navigation systems, however, proves to be more intricate than people first assume, and designers must be aware of many details. This workshop covers principles of faceted classification and shows you how to use facets in web design. Many examples of faceted navigation will be presented and discussed. A clear, structured framework for understanding the individual components is presented to help you understand all the decisions involved. The topics are brought to life through several hands-on exercises. Features Using facets. After a brief overview of facets, we’ll discuss how to plan out their implementation. Interface design. You’ll learn about the layout, display, and interaction with facets in detail. We’ll examine real-world examples, and you’ll apply what you’ve learnt in hands-on exercises. Advanced topics. You will also be exposed to advanced topics in faceted navigation design, selecting multiple values, grouping, and more.

1. Designing for
Discovery with
Faceted Navigation

2. @JimKalbach
Principal UX Designer Citrix
LIS Degree Rutgers University
2

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
3

4. What are facets?
• Facets are categories that represent properties of an
object
• Categories have values that describe the objects
4

5. Facets: Alternative To Hierarchy
Location = Parents, Children Location = Sets it belongs to
5

6. 6

7. Exercise 1 – Facets (5 Minutes)
What are facets of wine?
7

8. Typcial Structures for Values
TYPE DESCRIPTION EXAMPLES
Flat list without - Author
List hierarchy - Job titles
Tree structure with - Region
Hierarchy parent-child - Subject
relationships
Values with only 2 - Gender
Binary options; either-or - Yes/No
condition
Unbroken list on a - Price
Continuum range, usually - Date
numerical
Like a continuum, but - Rating
Scale with descrete - Price categories
categories
8

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
9

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

11. Determining Facets
11

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
12

13. STEP 1: Example – Boxes and Arrows
13

14. STEP 2: Example – Facets for Boxes and Arrows
14

15. Exercise 2: Select & Document Facets (20 mins)
In groups
1.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
15

16. STEP 3: Domain Model – Concept Map for Flickr
http://www.flickr.com/photos/bryce/58299511/ 16

17. Domain Model - BBC Wildlife
Mike Atherton, ―Beyond the Polar Bear.‖ http://www.slideshare.net/reduxd/beyond-the-polar-bear 17

18. Using Facets
18

19. Opening
Middle Game
End Game
19

20. Flamenco – 1. Opening
http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/spiro/Flamenco 20

21. Flamenco – 2. Middle Game
21

22. Flamenco – 3. End Game
22

23. Flamenco - Successive Filtering
23

24. Tesco - 1. Opening
24

25. Tesco – 2. Middle Game
25

26. Tesco – 3. End Game
26

27. BBC Wildlife – 1. Opening
27

28. BBC Wildlife – 2. Middle Game
28

29. BBC Wildlife – 3. End Game
29

30. Cars.com - 1. Opening
30

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

32. Costco.com – 2. Middle Game
32

33. Amazon.de – 2. Middle Game
Amazon.de ca. summer 2011 33

34. Facets have no medium Interface
Information Architecture
1.
Facet 1
Opening
Facet 2
Facet 3
Facet 4 2.
Facet 5
Middle
Game
Facet 6
Facet 7
3.
Facet 8
End
Game
34

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. Opening
2. Middle Game
3. 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?
35

36. Exercise 3
1. Opening _________________
Facet 1 _________________
_________________
_________________
Facet 2 _________________
_________
Facet 3
2. Middle Game _________________
_________________
Facet 4
_________________
_________________
_________________
Facet 5 __________
_________________
Facet 6 3. End Game
_________________
_________________
_________________
_________________
__________
36

37. Design & Interaction
Middle Game
37

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?
38

39. 1. Where do facets appear?
39

40. Left – Hoovers.com
40

41. Center – Yelp.com
41

42. Right – U. of Edinburgh
42

43. 2. How will values be displayed?
43

44. Links + More - NCSU Library
• Values = Text links
• Count = grey with () after value
• Wrapping = indented
• Order = by item count
• Default = 5 values (+ ―show
more―)
44

45. Links + Scrolling - Baur.de
• Values = Menu option
• Count = grey with () after value
• Wrapping = None (scrolling)
• Order = Alphabetical
• Default = All (+scrolling)
45

46. Checkboxes, Sliders - Kayak.com
• Values = Checkboxes,
sliders
• Count = Not given for most
• Wrapping = None
• Order = Mixed by facet
• Default = Show all
46

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
47

48. Sorting Values - www.anobii.com
48

49. Value Selection via Color Picker - www.etsy.com
49

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

51. 3. How can users see more values?
51

52. Additional Values: Inline Expand – HomeDepot.co
52

53. Additional Values: Dialog – Artist Rising
53

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

55. Additional Values: Popup – Ebay
55

56. Additional Values: New Page – ACM Digital Lib.
56

57. Additional Values: Paging – www.Semedico.com
57

58. Additional Values: Autocomplete - LinkedIn
58

59. ―More― + Scrolling – www.nextag.com
59

60. 4. How are multiple values selected?
60

61. Multiple Selection – ScienceDirect.com
61

62. Multiple Selection – Exhibit
62

63. Multiple Selection – Exhibit
63

64. Grey Ends – Linked In
64

65. 5. How are selections shown and removed?
65

66. Inline – Amazon.com
66

67. Bread Box – Flamenco
67

68. Breadcrumb – Forrester.com
68

69. Summary
Amazon HomeDepot Yelp Kayak Flamenco
Facets Category, Category, Neighborhoo Various… Person,
Brand, Price, Price, Brand, d, Distance, Style,
Rating etc Feature, Location, Era,
Price, etc
Category
Layout Left Left Top center Left Left
Display of Text links with Text links + Links, Links, Links with
Wrapping, item count Checkboxes sliders, Wrapping,
values includes item checkboxes including
count count
Number of 2-5 (max. 5) Varies: 5-15 4 All showing max. 12
default
values
Order By count By scheme ?? By scheme By count
Showing Link: “More“ Link: „“More“ Scrolling All showing Link: new
(inline expand) (inline expand) page
more values
Multiple Yes No Yes Yes No
selection?
Selection Inline in the Breadcrumb; Inline; Inline; Top middle
list; Click to Make new Move slider, as stack;
location and
Select top remove selection or uncheck, Click X to
removing category to remove
selection remove
69

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.“
70

71. Advanced Topics
71

72. Topics
1. Grouping
2. Overlaying Facets
3. Integrated Facet Breadcrumb
4. Experiemental Interfaces
72

73. 1. Grouping - FLAMENCO
73

74. 1. Grouping – World Digital Library
74

75. 1. Grouping – World Digital Library
75

76. 2. Overlaying Facets – Freebase Parallax
76

77. 2. Overlaying Facets – Freebase Parallax
77

78. 2. Overlaying Facets – Freebase Parallax
78

79. 2. Overlaying Facets
Narrowed by: Region - Australia > NSW Sort: On (change order )
Elfin Hills Hunter Valley
Types of Wine (4): Types of Wine (3):
Barolo Australian Dry Red
Bordeaux Merlot
Pinot Noir Zinfandel
Shiraz
Facets
Overall Ratings Overall Wine Ratings
1 2 3 4 5 1 2 3 4 5
Lea Estates Pokolbin Cellars
Types of Wine (2): Type of Wines (2):
Type Type
Type Type
79

80. 2. Overlaying Facets
Narrowed by: Region - Australia > NSW Sort: On (change order )
First sort by:
Elfin Hills Hunter Valley
Winery Name, alphabetical
Types of Wine (4): Types of Wine (3):
Barolo Australian Dry Red
Then by
Bordeaux Merlot
Pinot Noir Types of Wine, descending
Zinfandel
Shiraz
Facets
Overall Ratings Overall Wine Ratings
Then by
Rating, descending
1 2 3 4 5 1 2 3 4 5
Lea Estates Pokolbin Cellars
Types of Wine (2): Type of Wines (2):
Type Type
Type Type
80

81. 3. Integrated Faceted Breadcrumb
GREG NUDELMAN, ―Faceted Finding with Super-Powered Breadcrumbs,‖
http://www.boxesandarrows.com/view/faceted-finding-with
81

82. 4. Experimental Interfaces
Relation Browser: http://ils.unc.edu/relationbrowser/ 82

83. 4. Experimental Interfaces
Relation Browser: http://ils.unc.edu/relationbrowser/
83

84. 4. Experimental Interfaces: mspace
Add/remove facets
Re-order columns
mSpace: www.mspace.fm 84

85. 4. Experimental Interfaces: Elastic Lists
Elastic Lists: http://moritz.stefaner.eu/projects/5yrs-infosthetics/
85

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

87. Final Thoughts
87

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.― 88

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 89

90. 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
J K , ―ROI of faceted navigation‖
IM ALBACH
http://experiencinginformation.wordpress.com/2011/07/17/roi-of-faceted-navigation
91

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
92

93. Thank You
Jim.Kalbach@Gmail.com
www.experiencinginformation.com
93

94. Upcoming Workshops
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
More details on www.experiencinginformation.com
94