Designing for Discovery with Faceted Navigation
Sep 19, 2014
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
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