Information Architecture and Web Site Design

1. Information Architecture and Web Site Design IS202: Information Organization and Retrieval Profs. Ray Larson and Warren Sack School of Information Management and Systems UC Berkeley Fall 2001 Lecture Authors: Warren Sack & Marti Hearst IS202: Information Organization and Retrieval

2. Last Time:Thesaurus Design and Construction • Developing Controlled Vocabularies • Thesaurus design • Steps in Thesaurus development • Indexing IS202: Information Organization and Retrieval

3. Today • What is information architecture? • Definition • Practitioners • Examples • Brainstorming exercise • Elements • Elements of information architecture • Organization systems • Labeling systems • Navigation systems • Search and indexing systems • Metaphor systems • Audience analyses IS202: Information Organization and Retrieval

4. 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 IS202: Information Organization and Retrieval

5. Ralph Appelbaum Peter Bradford Carbon Smolan Associates Muriel Cooper/David Small Richard Curtis Donovan and Green John Grimwade Nigel Holmes Maria Giudice/Lynne Stiles Joel Katz Krzysztof Lenk/Paul Kaun David Macaulay Dave Merrill Clement Mok Don Moyer Bruce Robertson Nathan Shedroff Erik Spiekermann Alexander Tsiaras Richard Saul Wurman Who is an information architect? IS202: Information Organization and Retrieval

6. Who is an information architect? • Avi Rappaport • Abbe Don IS202: Information Organization and Retrieval

7. 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 IS202: Information Organization and Retrieval

8. Examples of Information Architecture • Wurman’s Access Guides • Spiekermann’s subway maps • Macaulay’s books • Carbone Smolan’s museum signage • Newspapers • Phone books • websites IS202: Information Organization and Retrieval

9. Access Guides • Guide books for cities • Information organized by location, colored coded by category • Where am I now? • What’s near by? IS202: Information Organization and Retrieval

10. 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? IS202: Information Organization and Retrieval

11. Elements of information architecture • Organization systems • Labeling systems • Navigation systems • Search and indexing systems • Metaphor systems • Audience analyses IS202: Information Organization and Retrieval

12. Organization Systems • Ways to Organize Information (according to Wurman) LATCH • Location • Alphabetical • Time • Category • Hierarchy/Continuum (small to large, dark to light) IS202: Information Organization and Retrieval

13. Organization Systems • Ways to Organize Information • Topics • Tasks • Processes • Metaphors • Narratives • Audiences IS202: Information Organization and Retrieval

14. 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, The Order of Things, 1970) IS202: Information Organization and Retrieval

15. Types of Labels • Labels as indexing and search terms • Link labels • Labels as headings • Labels within navigation systems (e.g., pull down menus) • Icons IS202: Information Organization and Retrieval

16. Sources of Labels • Other webs sites • Controlled vocabularies/thesauri • From content • From experts and users IS202: Information Organization and Retrieval

17. Navigation Systems • Types • Hierarchical • Global • Local • Other? • Information access methods including social navigation, berrypicking, etc. IS202: Information Organization and Retrieval

18. 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. IS202: Information Organization and Retrieval

19. Environment of Navigation • Browser as environment • Back button • Forward button • History • Bookmarks • Link colors • Alternative browsers (e.g., ActiveWorlds, VMRL, Shredder, Web Stalker, etc.) IS202: Information Organization and Retrieval

20. Search and Indexing Systems(from Avi Rappoport’s lecture of 27 Sept 2001) • 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 IS202: Information Organization and Retrieval

21. Search and Indexing Systems(from Avi Rappoport’s lecture of 27 Sept 2001) • Indexing problems • Avoiding indexing navigation text • Detect duplicate pages • Completeness • Index everything • Hide the archive a little • Freshness IS202: Information Organization and Retrieval

22. Search and Indexing Systems(from Avi Rappoport’s lecture of 27 Sept 2001) • 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 IS202: Information Organization and Retrieval

23. 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) IS202: Information Organization and Retrieval

24. Metaphor Systems • Recall Lakoff and Johnson’s metaphors of embodiment and their use in cogintive mapping of websites (e.g., Maglio et al., 1999). • E.g, how does one move in, up, down, etc. in navigating a website. IS202: Information Organization and Retrieval

25. 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) IS202: Information Organization and Retrieval

26. Systematic Descriptions of the process of Information Architecture • Rosenfeld and Morville, Information Architecture, chapters 8 and 9 • Abbe Don’s lecture (the end describing website for Don Inc.) • Newman and Landay (see Marti’s lecture from last year) • See also, Marti’s User Interface Design and Development course syllabus (IS213) IS202: Information Organization and Retrieval

27. Rosenfeld and Morville, Information Architecture • 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 IS202: Information Organization and Retrieval

28. Next Time • Database Design • Assignment 5 due IS202: Information Organization and Retrieval