SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 14, 2002

2. Outline: Site Search Interfaces • Motivation • Approach Integrate Search into Information Architecture via Faceted Metadata • Definitions: Information Architecture Faceted Metadata • Recipe Interface and Usability Study • Image Interfaces and Usability Studies • Conclusions

3. Motivation and Background

4. Claims • Web Search is OK • Gets people to the right starting points • Web SITE search is NOT ok • The best way to improve site search is • NOT to make new fancy algorithms • Instead … improve the interface

5. The Philosophy • Information architecture should be designed to integrate search throughout • Search results should reflect the information architecture. • This supports an interplay between navigation and search • This supports the most common human search strategies.

6. An Important Search Strategy • Do a simple, general search • Gets results in the generally correct area • Look around in the local space of those results • If that space looks wrong, start over • Akin to Shneiderman’s overview + details • Our approach supports this strategy • Integrate navigation with search

7. Following Hyperlinks • Works great when it is clear where to go next • Frustrating when the desired directions are undetectable or unavailable

8. text search An Analogy hypertext

9. Main Idea • Use metadata to show where to go next • More flexible than canned hyperlinks • Less complex than full search • Help users see and return to what happened previously

10. Search Usability Design Goals • Strive for Consistency • Provide Shortcuts • Offer Informative Feedback • Design for Closure • Provide Simple Error Handling • Permit Easy Reversal of Actions • Support User Control • Reduce Short-term Memory Load From Shneiderman, Byrd, & Croft, Clarifying Search, DLIB Magazine, Jan 1997. www.dlib.org

11. A Taxonomy of WebSites high Complexity of Data low low high Complexity of Applications From: The (Short) Araneus Guide to Website development, by Mecca, et al, Proceedings of WebDB’99, http://www-rocq.inria.fr/~cluet/WEBDB/procwebdb99.html

12. An Important IA Trend • Generating web pages from databases • Implications: • Web sites can adapt to user actions • Web sites can be instrumented

13. Faceted Metadata

14. GeoRegion + Time/Date + Topic Metadata: data about dataFacets: orthogonal categories

15. Faceted Metadata: Biomedical MeSH (Medical Subject Headings)www.nlm.nih.org/mesh

16. Mesh Facets (one level expanded)

17. Questions we are trying to answer • How many facets are allowable? • Should facets be mixed and matched? • How much is too much? • Should hierarchies be progressively revealed, tabbed, some combination? • How should free-text search be integrated?

18. How NOTto do it • Yahoo uses faceted metadata poorly in both their search results and in their top-level directory • They combine region + other hierarchical facets in awkward ways

19. Yahoo’s use of facets

20. Yahoo’s use of facets

21. Yahoo’s use of facets

22. Yahoo’s use of facets • Where is Berkeley? • College and University > Colleges and Universities >United States > U > University of California > Campuses > Berkeley • U.S. States > California > Cities >Berkeley > Education > College and University > Public > UC Berkeley

23. Recipe Collection Examples

24. From soar.berkeley.edu (a poor example)

26. From www.epicurious.com (a good example)

30. Epicurious Metadata Usage • Advantages • Creates combinations of metadata on the fly • Different metadata choices show the same information in different ways • Previews show how many recipes will result • Easy to back up • Supports several task types • “Help me find a summer pasta,'' (ingredient type + event type), • “How can I use an avocado in a salad?'' (ingredient type + dish type), • “How can I bake sea-bass'' (preparation type + ingredient type)

31. Ingredient Dish Cuisine Prepare Metadata usage in Epicurious Recipe

32. Ingredient Dish Cuisine Prepare Select Dish Cuisine Prepare I Metadata usage in Epicurious

33. Ingredient Dish Cuisine Prepare > Dish Cuisine Prepare I Group by Metadata usage in Epicurious

34. Ingredient Dish Cuisine Prepare Dish Cuisine Prepare Group by Metadata usage in Epicurious > I

35. Ingredient Dish Cuisine Prepare Dish Cuisine Prepare Group by Metadata usage in Epicurious > I Select I Cuisine Prepare

36. Epicurious Basic Search Lacks integration with metadata

38. Usability Study: Epicurious

39. Epicurious Usability Study • 9 participants • Three interfaces • Simple search form • Enhanced search form • Browse • Two task types • known-item search • browsing for inspiration

40. Epicurious Usability Study: Preference Data

41. Epicurious Usability StudyInterface Preference

42. Epicurious Usability StudyFeature Preference

43. Epicurious Usability StudyConstraint-based Preferences

44. Usability Study Results: Summary • People liked the browsing-style metadata-based search and found it helpful • People sometimes preferred the metadata search when the task was more constrained • But zero results are frustrating • This can be alleviated with query previews • People dis-prefer the standard simple search

45. Missing From Epicurious • How to scale? • Hierarchical facets • Larger collection • How to integrate search? • How to allow expansion in addition to refinement?

46. Application to Image Search

47. Current Approaches to Image Search • Visual Content and Cues, e.g., • QBIC (Flickner et al. ‘95) • Blobworld (Carson et al. ‘99) • Body Plans (Forsyth & Fleck ‘00) • Color, texture, shape • Move through a similarity space • Keyword based • Piction (Srihari ’91) • WebSeek (Smith and Jain ’97) • Google image search

48. A Commonality Among Current Content-based Approaches: Emphasis on similarity Little work on analyzing the search needs

49. The Users • Architects and City Planners

50. The Collection • ~40,000 images from the UCB architecture slide library • The current database and interface is called SPIRO • Very rich, faceted, hierarchical metadata