sims 213 user interface design development n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
SIMS 213: User Interface Design & Development PowerPoint Presentation
Download Presentation
SIMS 213: User Interface Design & Development

Loading in 2 Seconds...

play fullscreen
1 / 83
kiona-dotson

SIMS 213: User Interface Design & Development - PowerPoint PPT Presentation

107 Views
Download Presentation
SIMS 213: User Interface Design & Development
An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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)

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

  26. 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)

  27. Ingredient Dish Cuisine Prepare Metadata usage in Epicurious Recipe

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

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

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

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

  32. Epicurious Basic Search Lacks integration with metadata

  33. Usability Study: Epicurious

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

  35. Epicurious Usability Study: Preference Data

  36. Epicurious Usability StudyInterface Preference

  37. Epicurious Usability StudyFeature Preference

  38. Epicurious Usability StudyConstraint-based Preferences

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

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

  41. Application to Image Search

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

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

  44. The Users • Architects and City Planners

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