INFM 700: Session 1

What is Information Architecture?

Jimmy LinThe iSchoolUniversity of Maryland

Monday, January 28, 2008

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United StatesSee http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details

iSchool

Today’s Topics The architecture analogy

Architecture of information spaces

IA issues

Course overview

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Information Architecture What is it?

The structural design of share information environments The combination of organization, labeling, search,

navigation systems within Web sites and intranets The art and science of shaping information products

and experiences to support usability and findability An emerging discipline and community of practice

focused on bringing principles of design and architecture to digital landscape

Let’s consider the architecture analogy…

from M&R, p. 4

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Examples of Architecture…

Image source: Wikipedia

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Why architecture? What does designing buildings have to do with

designing Web sites?

What is architecture really about?

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Personal Experience

Jimmy LinMixed Media

Final Design Project, MIT 4.111 Experiencing Architecture StudioSpring, 2002

Image source: Jimmy Lin

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

The Architecture Analogy A building must…

Look good Be usable (for working, living, playing, etc.) Stand up

A Web site must… Look good Be usable (e.g., information must be findable) Stay up (i.e., not crash)

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Other Parallels… Combination of art vs. engineering

Same with information architecture

Image source: Wikipedia

Florence Cathedral, with dome designed by Brunelleschi

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Other Parallels… From vernacular to grand:

From a personal Web site to Amazon.com

Example of vernacular architecture from Denmark

Image source: Wikipedia

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Other Parallels… Buildings crumble:

Web sites crumble When was the last time you encountered a broken link?

Acropolis of Athens

Image source: Wikipedia

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Other Parallels… “Pretty” but unusable:

Countless examples…

Image source: Wikipedia

Ray and Maria Stata Center, MIT; designed by Frank Gehry

Rhode Island School of Design: http://www.risd.edu/

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Other Parallels… Unintended uses of buildings:

Unintended uses of Web sites Simple example: search engines as bookmarks

Ray and Maria Stata Center, MIT

Image source: David Huynh

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

My Definition Information architecture is the architecture of

information spaces

Huh?

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

What’s an information space? Think of information objects as physical objects

The “information space” is the space where these information objects reside

Information architecture is the architecture of this information space

It’s metaphorical!

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

What are metaphors? Common definition:

Language that directly compares seemingly unrelated subjects.

Solely a rhetorical/literary device?

Lakoff and Johnson: Metaphors structure our perception and understanding Metaphors are central to thought itself

George Lakoff and Mark Johnson. (1980) Metaphors We Live By. University of Chicago Press.

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Metaphor: Examples Theories are buildings

“You need evidence to buttress your arguments” “The foundation of the theory is shaky” “His entire theory was toppled by the new findings”

Mind is a container “The thought suddenly came into my head” “It's in the back of my mind” “The professor filled the students’ minds with

knowledge”

Time is space “He’s looking forward to spring break” “The worst is behind us”

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Importance of Metaphors Metaphors shape our thoughts

Compare marriage as “contractual agreement” vs. “religious sacrament”

Why are metaphors so pervasive?

Evolutionary basis?

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Metaphors in Web Surfing Question: What types of metaphors do Web

surfers use?

Method: Observational study

Coding scheme: User agent vs. Web agent

“go”, “follow” vs. “bring”, “come up” Outside vs. Inside

“click”, “press”, “type” vs. “go”, “follow” Container metaphor

“the page had some cool stuff”

Findings: Pervasive use of trajectory metaphors Differences in expert vs. novices

Paul P. Maglio and Teenie Matlock. (2003) The Conceptual Structure of Information Space. In Hook, Benyon, and Munro, editors, Designing Information Spaces: The Social Navigation Approach. London: Springer-Verlag

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Information Spaces: Example

t1

d

2 d1

d3

d4

d5

t3

t2

θφ

“bag of words”

“vector space”ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Information Spaces: Example

Marti A. Hearst and Chandu Karadi. (1997) Cat-a-Cone: An Interactive Interface for Specifying Searches and Viewing Retrieval Results using a Large Category Hierarchy. Proceedings SIGIR 1997.

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Information Spaces: Example

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

Ben Shneiderman, David Feldman, Anne Rose, and Xavier Ferre Grau. (2000) Visualizing Digital Library Search Results with Categorical and Hierarchical Axes. Proceedings of the 5th ACM International Conference on Digital Libraries (DL 2000).

iSchool

Information Spaces: Example

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

Adam Perer and Ben Shneiderman. (2008) Integrating Statistics and Visualization: Case Studies of Gaining Clarity during Exploratory Data Analysis. Proceedings of CHI 2008.

iSchool

Information Spaces: Example

http://www.speculativebubble.com/videos/real-estate-roller-coaster.php

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

IA just for the Web? The Web is a great vehicle for illustrating IA

principles

The Web is evolving: Web 1.0: Web as a hypertext system Web 2.0: Web as a software interface Web 3.0: ??

Think of it simply as a platform: Plain-old websites Large corporate intranets Mail client Productivity applications …

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Things that iArchitects do… Understand user and system requirements

Design (and build) organization, navigation, and metadata systems

Evaluate the user experience

Figure out what’s needed

Design itBuild it

Figure out if it works

(compare with physical architects)

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

The IA Circles

from M&R, p. 25

Context

Content UsersArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Another View

Content

Users

Systems

Context

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

The point is… IA is a multi-disciplinary subject

IA is as much an art as it is a science

IA is “messy”

IA lacks an underpinning theory

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

What does IA involve? Library and information science

Computer Science Human-Computer Interaction Information Retrieval Databases

Graphics design

Cognitive psychology

Organization theory

…

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Important Themes Structured vs. Unstructured

Content vs. Metadata

Big IA vs. Little IA

Top-down vs. Bottom-up

User-driven vs. System-driven

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Aspiring iArchitects, Beware! Warning: it’s hard

Warning: it requires significant breadth

Warning: users are “messy”

Warning: it’s a thankless job If you get it right, no one notices If you get it wrong, everyone complains (or leaves)

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

My Teaching Philosophy Emphasis on users

… but with a grounding in technology

Emphasis on synthesis … not rote learning

Emphasis on projects … mirroring real-life case studies

Emphasis on group work … but individual competence must be demonstrated

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Major Course Components Lectures

In-class exercises

Team presentation

Design projects

Final project

No exams!ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Course Themes Design

Principles of information architecture

Technology Constraints on what is possible

Processes Figuring out what to build Actually building it Figuring out if you’ve done it rightArchitecture

Analogy

InformationSpace

IA issues

CourseOverview

iSchool

Focus on Group Work Why? You rarely work alone in the real world

Three is the best number

Advice: Coordination takes more effort than you expect Plan first Take advantage of individual strengths Use collaborative technologies: don’t let distance be a

hindrance or excuseArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Course Logistics First time this course has been offered

Check the course homepage often

Lecture slides will be on-line Monday morning (at the latest)

Typical class structure One hour session (break) One hour session (short break) Half hour session

Email me: I’m available by appointment only

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Expectations Read the assigned material before class

Lectures build on readings and does not repeat them

Prepare to engage the material

Work hard, have fun!

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

Technology: Assumptions I assume you already know

Basic HTML/CSS How to put up a Web site (FTP, etc.)

I assume you’ll pick up new technology skills along the way…

For the projects, I expect you to build whatever you design Wireframes are sufficient as deliverables

Figure out what’s needed

Design itBuild it

Figure out if it works

ArchitectureAnalogy

InformationSpace

IA issues

CourseOverview

iSchool

In-Class Exercise Goal: to develop an intuition for good vs. bad IA

Split into teams of four (six teams total)

Compare: Amazon vs. Barnes and Noble Circuit City vs. Best Buy Marriott vs. Hilton

Reports: Select someone to present ~5 minutes per group

iSchool

Tasks Amazon vs. Barnes and Noble

I want to buy the M&R book I’m looking for something interesting to read

Circuit City vs. Best Buy I’m looking for a TV, and I have a budget of $1500

Marriott vs. Hilton I’m attending the iConference at UCLA (2/28-3/1) and

need to book a hotel

Questions: How does the site support my task?How is the site organized and how do I move through it?What’s good and what’s bad?