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

Last Time:Thesaurus Design and Construction

• Developing Controlled Vocabularies

• Thesaurus design

• Steps in Thesaurus development

• Indexing

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

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

Who is an information architect?

• 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?

• Avi Rappaport

• Abbe Don

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

Examples of Information Architecture

• Wurman’s Access Guides

• Spiekermann’s subway maps

• Macaulay’s books

• Carbone Smolan’s museum signage

• Newspapers

• Phone books

• websites

Access Guides

• Guide books for cities• Information organized by location,

colored coded by category– Where am I now?– What’s near by?

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?

Elements of information architecture

• Organization systems

• Labeling systems

• Navigation systems

• Search and indexing systems

• Metaphor systems

• Audience analyses

Organization Systems

• Ways to Organize Information (according to Wurman) LATCH– Location– Alphabetical– Time– Category– Hierarchy/Continuum (small to large,

dark to light)

Organization Systems

• Ways to Organize Information– Topics

– Tasks

– Processes

– Metaphors

– Narratives

– Audiences

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)

Types of Labels

• Labels as indexing and search terms

• Link labels

• Labels as headings

• Labels within navigation systems (e.g., pull down menus)

• Icons

Sources of Labels

• Other webs sites

• Controlled vocabularies/thesauri

• From content

• From experts and users

Navigation Systems

• Types– Hierarchical– Global– Local– Other?

• Information access methods including social navigation, berrypicking, etc.

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.

Environment of Navigation

• Browser as environment– Back button– Forward button– History– Bookmarks– Link colors– Alternative browsers (e.g., ActiveWorlds,

VMRL, Shredder, Web Stalker, etc.)

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

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

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

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)

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.

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)

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)

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

Next Time

• Database Design

• Assignment 5 due