1. 2002.12.03 - SLIDE 1IS 202 – FALL 2002 Lecture 26: Information Architecture Prof. Ray Larson & Prof. Marc Davis UC Berkeley SIMS Tuesday and Thursday 10:30 am - 12:00 pm Fall 2002 http://www.sims.berkeley.edu/academics/courses/is202/f02/ SIMS 202: Information Organization and Retrieval

2. 2002.12.03 - SLIDE 2IS 202 – FALL 2002 Announcements Extra Credit due date extended until December 13

3. 2002.12.03 - SLIDE 3IS 202 – FALL 2002 Lecture Overview Review –Interfaces for Information Retrieval –Web Search for Intranets (Guest) Information Architecture –What is information architecture? –Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses –Case Study Credit for some of the slides in this lecture goes to Warren Sack and Abbe Don

4. 2002.12.03 - SLIDE 4IS 202 – FALL 2002 Lecture Overview Review –Interfaces for Information Retrieval –Web Search for Intranets (Guest) Information Architecture –What is information architecture? –Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses –Case Study Credit for some of the slides in this lecture goes to Warren Sack and Abbe Don

5. 2002.12.03 - SLIDE 5IS 202 – FALL 2002 Task = Information Access The standard interaction model for information access 1)Start with an information need 2)Select a system and collections to search on 3)Formulate a query 4)Send the query to the system 5)Receive the results 6)Scan, evaluate, and interpret the results 7)Stop, or 8)Reformulate the query and go to Step 4

6. 2002.12.03 - SLIDE 6IS 202 – FALL 2002 HCI Questions for IR Where does a user start? –Faced with a large set of collections, how can a user choose one to begin with? How will a user formulate a query? How will a user scan, evaluate, and interpret the results? How can a user reformulate a query?

7. 2002.12.03 - SLIDE 7IS 202 – FALL 2002 Starting Points for Search Faced with a prompt or an empty entry form … how to start? –Lists of sources –Overviews Clusters Category Hierarchies/Subject Codes Co-citation links –Examples, Wizards, and Guided Tours –Automatic source selection

8. 2002.12.03 - SLIDE 8IS 202 – FALL 2002 List of Sources Have to guess based on the name Requires prior exposure/experience

9. 2002.12.03 - SLIDE 9IS 202 – FALL 2002 Old Lexis-Nexis Interface

10. 2002.12.03 - SLIDE 10IS 202 – FALL 2002 Overviews Supervised (manual) category overviews –Yahoo! –HiBrowse –MeSHBrowse Unsupervised (automated) groupings –Clustering –Kohonen feature maps

11. 2002.12.03 - SLIDE 11IS 202 – FALL 2002 Yahoo! Interface

12. 2002.12.03 - SLIDE 12IS 202 – FALL 2002 MeshBrowse (Korn & Shneiderman 95)

13. 2002.12.03 - SLIDE 13IS 202 – FALL 2002 HiBrowse (Pollitt 97)

14. 2002.12.03 - SLIDE 14IS 202 – FALL 2002 Scatter/Gather Interface

15. 2002.12.03 - SLIDE 15IS 202 – FALL 2002 Kohonen Feature Maps on Text

16. 2002.12.03 - SLIDE 16IS 202 – FALL 2002 HCI for IR: Query Specification Question 2: How will a user specify a query?

17. 2002.12.03 - SLIDE 17IS 202 – FALL 2002 Query Specification Interaction styles (Shneiderman 97) –Command language –Form fill –Menu selection –Direct manipulation –Natural language What about gesture, eye-tracking, or implicit inputs like reading habits?

18. 2002.12.03 - SLIDE 18IS 202 – FALL 2002 Command-Based Query Specification COMMAND ATTRIBUTE value CONNECTOR … –FIND PA shneiderman AND TW interface What are the ATTRIBUTE names? What are the COMMAND names? What are allowable values?

19. 2002.12.03 - SLIDE 19IS 202 – FALL 2002 Form-Based Query Specification

20. 2002.12.03 - SLIDE 20IS 202 – FALL 2002 Form-Based Query Specification

21. 2002.12.03 - SLIDE 21IS 202 – FALL 2002 HCI for IR: Viewing Results Question 3: How will a user scan, evaluate, and interpret the results?

22. 2002.12.03 - SLIDE 22IS 202 – FALL 2002 Display of Retrieval Results Goal: –Minimize time/effort for deciding which documents to examine in detail Idea: –Show the roles of the query terms in the retrieved documents, making use of document structure

23. 2002.12.03 - SLIDE 23IS 202 – FALL 2002 Putting Results in Context Interfaces should –Give hints about the roles terms play in the collection –Give hints about what will happen if various terms are combined –Show explicitly why documents are retrieved in response to the query –Summarize compactly the subset of interest

24. 2002.12.03 - SLIDE 24IS 202 – FALL 2002 TileBars Example

25. 2002.12.03 - SLIDE 25IS 202 – FALL 2002 VIBE (Olson et al. 93, Korfhage 93)

26. 2002.12.03 - SLIDE 26IS 202 – FALL 2002 InfoCrystal (Spoerri 94)

27. 2002.12.03 - SLIDE 27IS 202 – FALL 2002 Problems with InfoCrystal Can’t see proximity or frequency of terms within documents Quantities not represented graphically More than 4 terms hard to handle No help in selecting terms to begin with

28. 2002.12.03 - SLIDE 28IS 202 – FALL 2002 Cha-Cha (Chen & Hearst 98) Shows “Table- Of-Contents”- like view, like SuperBook Focus+Context using hyperlinks to create the TOC Integrates Web Site structure navigation with search

29. 2002.12.03 - SLIDE 29IS 202 – FALL 2002 HCI for IR: Query Reformulation Question 4: How can a user reformulate a query?

30. 2002.12.03 - SLIDE 30IS 202 – FALL 2002 Query Reformulation Thesaurus expansion –Suggest terms similar to query terms Relevance feedback –Suggest terms (and documents) similar to retrieved documents that have been judged to be relevant –“More like this” interaction

31. 2002.12.03 - SLIDE 31IS 202 – FALL 2002 Summary: HCI for IR Focus on the task, not the tool Be aware of –User abilities and differences –Prior work and innovations –Design guidelines and rules-of-thumb Iterate, iterate, iterate It is very difficult to design good UIs It is very difficult to evaluate search UIs Better interfaces in future should produce better IR experiences

32. 2002.12.03 - SLIDE 32IS 202 – FALL 2002 Lecture Overview Review –Interfaces for Information Retrieval –Web Search for Intranets (Guest) Information Architecture –What is information architecture? –Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses –Case Study Credit for some of the slides in this lecture goes to Warren Sack and Abbe Don

33. 2002.12.03 - SLIDE 33IS 202 – FALL 2002 Storytelling (narrative structures) Information Architecture Approach to User Interface Design Interaction Design Media Design points of view politics of information scenarios From Abbe Don, 202 Lecture 2001

34. 2002.12.03 - SLIDE 34IS 202 – FALL 2002 Information Architcture What is information architecture? –Definition –Practitioners –Examples –Brainstorming exercise –Elements

35. 2002.12.03 - SLIDE 35IS 202 – FALL 2002 What is information architecture? Information Architect: n. 1) the individual who organizes the patterns inherent in data, making the complex clear. 2) a person who creates the structure or map of information which allows others to find their personal paths to knowledge. 3) the emerging 21st century professional occupation addressing the needs of the age focused upon clarity, human understanding and the science of the organization of information. –Richard Saul Wurman, Information Architects, 1996

36. 2002.12.03 - SLIDE 36IS 202 – FALL 2002 Who is an information architect? Avi Rappaport Abbe Don Peter Merholz Jesse James Garrett Lou Rosenfeldt Peter Morville ASIS&T SIGIA members Many, many others

37. 2002.12.03 - SLIDE 37IS 202 – FALL 2002 Who is not (necessarily) an information architect? Marketing team Graphic designers Editors Technical staff Project management I.e., the rest of the team that an information architect works with…

38. 2002.12.03 - SLIDE 38IS 202 – FALL 2002 Examples of Information Architecture Wurman’s Access Guides Spiekermann’s subway maps Macaulay’s books Carbone Smolan’s museum signage Newspapers Phone books websites

39. 2002.12.03 - SLIDE 39IS 202 – FALL 2002 Access Guides Guide books for cities Information organized by location, colored coded by category –Where am I now? –What’s near by?

40. 2002.12.03 - SLIDE 40IS 202 – FALL 2002 Brainstorming Exercise Louis Rosenfeld and Peter Morville, Information Architecture for the World Wide Web, 1998. –What do you hate about the Web? –What do you like about the Web?

41. 2002.12.03 - SLIDE 41IS 202 – FALL 2002 Lecture Overview Review –Interfaces for Information Retrieval –Web Search for Intranets (Guest) Information Architecture –What is information architecture? –Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses –Case Study Credit for some of the slides in this lecture goes to Warren Sack and Abbe Don

42. 2002.12.03 - SLIDE 42IS 202 – FALL 2002 Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses

43. 2002.12.03 - SLIDE 43IS 202 – FALL 2002 Elements of Information Architecture * * *= major labels Organization system * * * * * * * * * * * * * * Search System Navigation System

44. 2002.12.03 - SLIDE 44IS 202 – FALL 2002 Organization Systems Ways to Organize Information (according to Wurman) LATCH – Location – Alphabetical – Time – Category – Hierarchy/Continuum (small to large, dark to light)

45. 2002.12.03 - SLIDE 45IS 202 – FALL 2002 Organization Systems Ways to Organize Information – Topics – Tasks – Processes – Metaphors – Narratives – Audiences

46. 2002.12.03 - SLIDE 46IS 202 – FALL 2002 Labeling Systems This passage quotes “a certain encyclopedia” in which it is written that “animals are divided into: (a) belonging to the emperor, (b) embalmed, (c) tame, (d) suckling pigs, (e) sirens, (f) fabulous, (g) stray dogs, (h) included in the present classification, (I) frenzied, (j) innumerable, (k) drawn with a very fine camelhair brush, (l) et certera, (m) having just broken the water pitcher, (n) that from a long way off look like flies.” –(Foucault citing Borges, The Order of Things, 1970)

47. 2002.12.03 - SLIDE 47IS 202 – FALL 2002 Types of Labels Labels as indexing and search terms Link labels Labels as headings Labels within navigation systems (e.g., pull down menus) Icons

48. 2002.12.03 - SLIDE 48IS 202 – FALL 2002 Sources of Labels Other web sites Controlled vocabularies/thesauri From content From experts and users

49. 2002.12.03 - SLIDE 49IS 202 – FALL 2002 Navigation Systems Types –Hierarchical –Global –Local –Other? Information access methods including social navigation, berrypicking, etc.

50. 2002.12.03 - SLIDE 50IS 202 – FALL 2002 Elements of Navigation Systems Graphical and textual navigation bars Frames Pop-up menus Tables of content Site maps Guided tours The sky’s the limit with java, javascript, etc.

51. 2002.12.03 - SLIDE 51IS 202 – FALL 2002 Environment of Navigation Browser as environment –Back button –Forward button –History –Bookmarks –Link colors –Alternative browsers (e.g., ActiveWorlds, VMRL, Shredder, Web Stalker, etc.)

52. 2002.12.03 - SLIDE 52IS 202 – FALL 2002 Search and Indexing Systems Search –database versus text search –Good search engines can handle multiple notations –People are interested in searching db fields for ecommerce –Synonyms mostly per domain Inktomi includes American to British synonyms –Interfaces Basic search everywhere Simple search page Advanced search page with all options Put “search” on the button Integrate search with browsing (from Avi Rappoport’s lecture of 27 Sept 2001)

53. 2002.12.03 - SLIDE 53IS 202 – FALL 2002 Search and Indexing Systems Indexing problems –Avoiding indexing navigation text –Detect duplicate pages –Completeness Index everything Hide the archive a little –Freshness (from Avi Rappoport’s lecture of 27 Sept 2001)

54. 2002.12.03 - SLIDE 54IS 202 – FALL 2002 Search and Indexing Systems Analysis –Usability testing is generally not done, but should be! –Informal testing is ok –Analyze search logs Store basic search data: query, number of results, date/time, IP address, or session ID Free market research! –Top searches –No matches –New topics and trends (from Avi Rappoport’s lecture of 27 Sept 2001)

55. 2002.12.03 - SLIDE 55IS 202 – FALL 2002 Metaphor Systems Organizational metaphors (e.g., website organized according to corporate structure) Functional metaphors (e.g., website organized like a libraries, with volumes, shelves, catalogs, etc.) Visual metaphors (e.g., website organized like a machine or a city)

56. 2002.12.03 - SLIDE 56IS 202 – FALL 2002 Metaphor Systems Recall Lakoff and Johnson’s metaphors of embodiment and their use in cognitive mapping of websites (e.g., Maglio et al., 1999). E.g, how does one move in, up, down, etc. in navigating a website.

57. 2002.12.03 - SLIDE 57IS 202 – FALL 2002 Audience Who is the website for? How does one describe this audience? –Scenarios –Personae (see Alan Cooper, About Face: The Essentials of User Interface Design) Goals and Tasks Enthnography (see Illinois Institute of Technology, Design Department) Usability studies (see Nielsen and Norman Group)

58. 2002.12.03 - SLIDE 58IS 202 – FALL 2002 Lecture Overview Review –Interfaces for Information Retrieval –Web Search for Intranets (Guest) Information Architecture –What is information architecture? –Elements of information architecture Organization systems Labeling systems Navigation systems Search and indexing systems Metaphor systems Audience analyses –Case Study Credit for some of the slides in this lecture goes to Warren Sack and Abbe Don

59. 2002.12.03 - SLIDE 59IS 202 – FALL 2002 The Process of Information Architecture Rosenfeld and Morville, Information Architecture, chapters 8 and 9 Abbe Don’s lecture from IS202, Fall 2001 (the part describing website design for Don Inc.) Newman and Landay (see IS 202 Lectures from 2000) See also, Marti’s User Interface Design and Development course syllabus (IS213)

60. 2002.12.03 - SLIDE 60IS 202 – FALL 2002 Rosenfeld and Morville Brainstorming with whiteboards and flip charts Metaphor exploration Scenarios High-level architecture Architectural page mockups Design sketches Web-based prototypes Detailed architectural blueprints Content mapping Web page inventory Point-of-production architecture Architectural style guides Learning from users

61. 2002.12.03 - SLIDE 61IS 202 – FALL 2002 Case Study Don and Co. example from Abbe Don (Abbe Don Interactive, Co) from IS 202 Lecture, Fall 2001

62. 2002.12.03 - SLIDE 62IS 202 – FALL 2002 Edward Don & Company

63. 2002.12.03 - SLIDE 63IS 202 – FALL 2002 Edward Don & Company 80 year-old, privately held family business 6 distribution centers $400 million in sales 20,000 stock items 1000s of factory direct items 100s of vendors 100s of Customers with 1000s of locations –National franchises –Hotels and Cruise Ships –Institutions –Sole proprietors

64. 2002.12.03 - SLIDE 64IS 202 – FALL 2002 Project Phases Initial Discovery –Interviewed key stakeholders in company –Observed day-to-day production in marketing group –Interviewed marketing group service vendors Best Practices Research –Interviewed other distribution businesses Grainger Reliable Staples/Quill –Interviewed food service equipment & supplies vendors –Interviewed key vendors in Digital Asset Management and dynamic web and print publishing systems

65. 2002.12.03 - SLIDE 65IS 202 – FALL 2002 Project Phases Red Flags –Web/e-commerce was being handled by internal IT departments –Print was handled by internal marketing/advertising –Vendors specialized or were optimized for web or print but not well integrated for both White Paper and vision statement for dynamic publishing system for print and web acknowledging that challenges ahead were both technical and organizational Detailed Requirements for Print and Web Generated

66. 2002.12.03 - SLIDE 66IS 202 – FALL 2002 Project Phases Consensus Building Internally Internal Web Team Formed Internal DAM Project Team Formed Parallel Development –RFP Written –Vendors Evaluated –Budgets and Schedules Established –Vendors Selected

67. 2002.12.03 - SLIDE 67IS 202 – FALL 2002 Project Phases Project Kickoffs –Web Rapid Solutions Workshop with Ernst & Young February, 2000 –DAM proceeded at a much slower pace, focused initially on training and work flow beginning March, 2000 Weekly Status Meetings Held Monthly Executive Team Meetings Held Projects Quickly Diverged –Web site had a hard deadline of May, 2000 for the National Restaurant Association show –Web site team optimized for quick development –DAM team addressed systemic issues that had been ignored for years –Yet, digital images were required for the web

68. 2002.12.03 - SLIDE 68IS 202 – FALL 2002 System Components AS400 Purchasing Warehouse Inventory Invoices Payments Sales Force Automation Web ecommerce App Server templates DAM Print Quark Express Extensions

69. 2002.12.03 - SLIDE 69IS 202 – FALL 2002 Taxonomy (catalog at www.don.com) KITCHEN –COOKWARE Stock Pots –heavy weight –standard weight –stainless steel –lids Sauce Pots –heavy weight –standard weight –lids

70. 2002.12.03 - SLIDE 70IS 202 – FALL 2002 Manage the Business vs Communicate With Customers AS400 optimized for managing the day to day operations of the business –category/class/subclass/sub-subclass taxonomy –Merchandisers were responsible for an entire category 13 categories, 10 merchandisers Each category managed in its own way No consistency Tabletop is an “uber” category composed of the dinnerware, flatware, glassware categories DAM needed to be designed to support 3 primary print vehicles –Resource Catalog (merchandising/ordering) –Monthly Catalog (merchandising) –Custom Order Guides (ordering)

71. 2002.12.03 - SLIDE 71IS 202 – FALL 2002 Merchandising versus Ordering Merchandising –Show products in context and in use: high production value color photography –Show like products together with food styling, ambiance, etc. –Table Top: shows flatware, chinaware, glassware, linens –Descriptive copy + product attributes –Unpriced Ordering –Single items: often with custom names in custom categories especially for national franchises –Black and white line drawing may be more appropriate –“Just the facts” = “Just the attributes” –Pricing

72. 2002.12.03 - SLIDE 72IS 202 – FALL 2002 The Big False Assumptions The AS400 classification system was accurate and consistent The AS400 classification system contained all the business logic necessary to run the business, including generating marketing communications materials EY built web architecture and database based on AS400 system Image, Inc. assumed AS400 classification as basis of DAM database design

73. 2002.12.03 - SLIDE 73IS 202 – FALL 2002 The Bearer of Bad News Class/subclass was ok Things below that were a mess A lot of “human translation” was done between the AS400 and the marketing communications print materials to get them into “customer ready” form The internal owner of the classification system dug in his heels The two outside vendors blamed each other, denied responsibility and were reluctant to fix the problem

74. 2002.12.03 - SLIDE 74IS 202 – FALL 2002 Resolving the Issues Could barely talk about the problem because everyone had a different vocabulary and understanding of the issues Created detailed HTML page mockups (live demo) AS400 taxonomy changed to category/subcategory/class/subclass Entire taxonomy was reviewed and edited Marketing Communications “presentation” model which was previously thought to correspond to “class” was not in synch. Business Rules project initiated to synchronize “managing the business” and “communicate with customers.”

75. 2002.12.03 - SLIDE 75IS 202 – FALL 2002 DAM Challenges Each item has more than one representation affiliated with it –Primary photo –Alternate views/angles –Line drawing –Group shot of the brand or pattern –Merchandising shot of the pattern in use, depicted with other items, possibly in the same category and possibly not Each category, subcategory, and class requires different attributes

76. 2002.12.03 - SLIDE 76IS 202 – FALL 2002 Web Challenges Classes of users have different needs, different levels of access Customer Users –Corporate –Regional Managers –Unit Manager –Multiple users within a unit--general –Multiple users within a unit based on categories –Administrators Internal Users –Administrators –Sales Team –Customer Service

77. 2002.12.03 - SLIDE 77IS 202 – FALL 2002 Web Challenges Overall web information architecture, navigation and interaction design –Use Cases revealed many flaws in the EY database design –User does x; system responds y –Provides detailed interaction model –Indicates how many screens/pages required –Indicates what needs to be on each page Specific taxonomy issues as they relate to product classification Synchronize the search feature

78. 2002.12.03 - SLIDE 78IS 202 – FALL 2002 Web Challenges Setting up order guide with customer- defined categories Setting up order guide with customer- defined product names Setting up and maintaining favorites Supporting users as they move from “customized” view to “general” view Synchronizing ordering, picking, inventory availability notifications, shipping info, etc.

79. 2002.12.03 - SLIDE 79IS 202 – FALL 2002 Next Time Review for Final –Bring questions