INFM 700: Session 1 What is Information Architecture? Jimmy Lin The iSchool University of Maryland Monday, January 28, 2008 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

iSchool Today’s Topics The architecture analogy Architecture of information spaces IA issues Course overview Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool Examples of Architecture… Image source: Wikipedia Architecture Analogy Information Space IA issues Course Overview

iSchool Why architecture? What does designing buildings have to do with designing Web sites? What is architecture really about? Architecture Analogy Information Space IA issues Course Overview

iSchool Personal Experience Jimmy Lin Mixed Media Final Design Project, MIT Experiencing Architecture Studio Spring, 2002 Image source: Jimmy Lin Architecture Analogy Information Space IA issues Course Overview

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) Architecture Analogy Information Space IA issues Course Overview

iSchool Other Parallels… Combination of art vs. engineering Same with information architecture Image source: Wikipedia Florence Cathedral, with dome designed by Brunelleschi Architecture Analogy Information Space IA issues Course Overview

iSchool Other Parallels… From vernacular to grand: From a personal Web site to Amazon.com Example of vernacular architecture from Denmark Image source: Wikipedia Architecture Analogy Information Space IA issues Course Overview

iSchool Other Parallels… Buildings crumble: Web sites crumble When was the last time you encountered a broken link? Acropolis of Athens Image source: Wikipedia Architecture Analogy Information Space IA issues Course Overview

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: Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool My Definition Information architecture is the architecture of information spaces Huh? Architecture Analogy Information Space IA issues Course Overview

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! Architecture Analogy Information Space IA issues Course Overview

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. Architecture Analogy Information Space IA issues Course Overview

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” Architecture Analogy Information Space IA issues Course Overview

iSchool Importance of Metaphors Metaphors shape our thoughts Compare marriage as “contractual agreement” vs. “religious sacrament” Why are metaphors so pervasive? Evolutionary basis? Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool Information Spaces: Example t1t1 d2d2 d1d1 d3d3 d4d4 d5d5 t3t3 t2t2 θ φ “bag of words” “vector space” Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool Information Spaces: Example Architecture Analogy Information Space IA issues Course Overview 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 Architecture Analogy Information Space IA issues Course Overview 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 Architecture Analogy Information Space IA issues Course Overview

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 … Architecture Analogy Information Space IA issues Course Overview

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) Architecture Analogy Information Space IA issues Course Overview

iSchool The IA Circles from M&R, p. 25 Context ContentUsers Architecture Analogy Information Space IA issues Course Overview

iSchool Another View Content Users Systems Context Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool What does IA involve? Library and information science Computer Science Human-Computer Interaction Information Retrieval Databases Graphics design Cognitive psychology Organization theory … Architecture Analogy Information Space IA issues Course Overview

iSchool Important Themes Structured vs. Unstructured Content vs. Metadata Big IA vs. Little IA Top-down vs. Bottom-up User-driven vs. System-driven Architecture Analogy Information Space IA issues Course Overview

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) Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

iSchool Major Course Components Lectures In-class exercises Team presentation Design projects Final project No exams! Architecture Analogy Information Space IA issues Course Overview

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 right Architecture Analogy Information Space IA issues Course Overview

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 excuse Architecture Analogy Information Space IA issues Course Overview

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 me: I’m available by appointment only Architecture Analogy Information Space IA issues Course Overview

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! Architecture Analogy Information Space IA issues Course Overview

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 Architecture Analogy Information Space IA issues Course Overview

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?