1. UIs for Faceted Navigation Recent Advances and Remaining Open Problems HCIR’08 Marti Hearst, UC Berkeley (including some slides from Corey Chandler of eBay)

2. 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. 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. 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. 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. 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 Cooking Method Stir-fry Cuisine Thai Ingredient Bell Pepper Curry Chicken

7. 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. 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 > Pineapple Dessert > Cake Preparation > Bake Dessert > Dairy > Sherbet Fruit > Berries > Strawberries Preparation > Freeze

9. 9 Using Facets  The system only shows the labels that correspond to the current set of items  Start with all items and all facets  The user then selects a label within a facet  This reduces the set of items (only those that have been assigned to the subcategory label are displayed)  This also eliminates some subcategories from the view.

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

12. 12 Information previews  Use the metadata to show where to go next  More flexible than canned hyperlinks  Less complex than full search  Help users see and return to previous steps  Reduces mental work  Recognition over recall  Suggests alternatives  More clicks are ok only if (J. Spool)  The “scent” of the target does not weaken  If users feel they are going towards, rather than away, from their target.

13. 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. 14 Facets vs. Hierarchy  Early Flamenco studies compared allowing multiple hierarchical facets vs. just one facet.  Multiple facets was preferred and more successful.

15. 15 Limitation of Facets  Do not naturally capture MAIN THEMES  Facets do not show RELATIONS explicitly Aquamarine Red Orange Door Doorway Wall  Which color associated with which object? Photo by J. Hearst, jhearst.typepad.com

16. 16 “Classic” Faceted Navigation UI with Flamenco

17. 17 Opening View Select literature from PRIZE facet

18. 18 Group results by YEAR facet

19. 19 Select 1920’s from YEAR facet

20. 20 Current query is PRIZE > literature AND YEAR: 1920’s. Now remove PRIZE > literature

21. 21 Now Group By YEAR > 1920’s

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

23. 23 Select an individual item

24. 24 Use Endgame to expand out

25. 25 Use Endgame to expand out

26. 26 Or use “More like this” to find similar items

27. 27 Start a new search using keyword “California”

28. 28 Note that category structure remains after the keyword search

29. 29 The query is now a keyword ANDed with a facet subhierarchy

30. 30 Interface Innovations with eBay Express

31. 31 Matching items

32. 32 Matching items

33. 33 Matching items

34. 34 Matching items

35. 35 Matching items

36. 36 Matching items

37. 37 Matching items

38. 38 Matching items

39. 39 Matching items

40. 40 Matching items

41. 41 Matching items

42. 42 Matching items

43. 43 Matching items

44. 44 Matching items

45. 45 Matching items

46. 46 Design Issues (from 2006 SIGIR workshop)

47. 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. 48 Revealing Hierarchy  One approach (Flamenco): keep all facets present, show deeper level as you descend.

49. 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. 50 Reversibility  Make navigation urls consistent and persistent  This way the Back button always works  Allows for bookmarking of pages

51. 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. 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. 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. 54 Integrating “browse” and “search” People browse using the facets more when they are not familiar with the domain

55. 55 Facet Presentation Users stop using refinements when a) not useful, and b) item count low enough

56. 56 Facet Presentation Prominently showing a few facets can work well (but prioritization is important)

57. 57 Facet Presentation Shifting columns doesn’t confuse users

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

59. 59 Facet Presentation Showing sample values help users understand facets and can expose breadth

60. 60 Design Innovations and Remaining Issues

61. 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. 62 Getty Images

63. 63 Integrating “Smarts” into the UI

64. 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. 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. 66 yelp.com

67. 67 Information Visualization Applied to Faceted Navigation

68. 68 Fathumb Mobile Interface

69. 69 FacetLens

70. 70 WeFeelFine.org

71. 71 Extending the Faceted Model

72. 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. 73 LibraryThing: Experiments with Tags

74. 74 Getty Images: Catalyst Interface

75. 75 Parallax: More free-form Navigation

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