INFM 700 Session 1 What is Information Architecture

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

Today’s Topics ¢ The architecture analogy ¢ Architecture of information spaces ¢ IA issues ¢ Course overview Architecture Analogy Information Space IA issues Course Overview i. School

Information Architecture ¢ What is it? l l Architecture Analogy Information Space ¢ 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… IA issues Course Overview from M&R, p. 4 i. School

Examples of Architecture… Architecture Analogy Information Space IA issues Course Overview Image source: Wikipedia i. School

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 i. School

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

The Architecture Analogy ¢ A building must… l l l ¢ A Web site must… l l Architecture Analogy Look good Be usable (for working, living, playing, etc. ) Stand up l Look good Be usable (e. g. , information must be findable) Stay up (i. e. , not crash) Information Space IA issues Course Overview i. School

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

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

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

Other Parallels… ¢ “Pretty” but unusable: Architecture Analogy Information Space IA issues Course Overview Ray and Maria Stata Center, MIT; designed by Frank Gehry ¢ Countless examples… Rhode Island School of Design: http: //www. risd. edu/ Image source: Wikipedia i. School

Other Parallels… ¢ Unintended uses of buildings: Architecture Analogy Information Space Ray and Maria Stata Center, MIT IA issues Course Overview ¢ Unintended uses of Web sites l Simple example: search engines as bookmarks Image source: David Huynh i. School

My Definition ¢ Information architecture is the architecture of information spaces ¢ Huh? Architecture Analogy Information Space IA issues Course Overview i. School

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 i. School

What are metaphors? ¢ Common definition: l l ¢ Language that directly compares seemingly unrelated subjects. Solely a rhetorical/literary device? Lakoff and Johnson: l l Metaphors structure our perception and understanding Metaphors are central to thought itself Architecture Analogy Information Space IA issues Course Overview George Lakoff and Mark Johnson. (1980) Metaphors We Live By. University of Chicago Press. i. School

Metaphor: Examples ¢ Theories are buildings l l l ¢ Mind is a container l l l Architecture Analogy Information Space IA issues Course Overview ¢ “You need evidence to buttress your arguments” “The foundation of theory is shaky” “His entire theory was toppled by the new findings” “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 l l “He’s looking forward to spring break” “The worst is behind us” i. School

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

Metaphors in Web Surfing ¢ Question: What types of metaphors do Web surfers use? ¢ Method: Observational study ¢ Coding scheme: l l l Architecture Analogy Information Space IA issues Course Overview ¢ 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: l l 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 i. School

Information Spaces: Example “bag of words” Architecture Analogy Information Space “vector space” t 3 d 3 Course Overview 2 φ IA issues t 2 i. School d d 4 θ d 1 t 1 d 5

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

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 5 th ACM International Conference on Digital Libraries (DL 2000). i. School

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. i. School

Information Spaces: Example Architecture Analogy Information Space IA issues Course Overview http: //www. speculativebubble. com/videos/real-estate-roller-coaster. php i. School

IA just for the Web? ¢ The Web is a great vehicle for illustrating IA principles ¢ The Web is evolving: l l l ¢ Architecture Analogy Information Space IA issues Course Overview 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: l l l Plain-old websites Large corporate intranets Mail client Productivity applications … i. School

Things that i. Architects do… ¢ Understand user and system requirements ¢ Design (and build) organization, navigation, and metadata systems ¢ Evaluate the user experience Figure out if it works Figure out what’s needed Architecture Analogy Information Space IA issues Course Overview Build it Design it (compare with physical architects) i. School

The IA Circles Context Architecture Analogy Content Users Information Space IA issues Course Overview from M&R, p. 25 i. School

Another View Users Systems Architecture Analogy Content Information Space IA issues Course Overview Context i. School

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 i. School

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

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 i. School

Aspiring i. Architects, Beware! ¢ Warning: it’s hard ¢ Warning: it requires significant breadth ¢ Warning: users are “messy” ¢ Warning: it’s a thankless job l l 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 i. School

My Teaching Philosophy ¢ Emphasis on users l ¢ Emphasis on synthesis l ¢ Architecture Analogy … not rote learning Emphasis on projects l ¢ … but with a grounding in technology … mirroring real-life case studies Emphasis on group work l … but individual competence must be demonstrated Information Space IA issues Course Overview i. School

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

Course Themes ¢ Design l ¢ Technology l ¢ Constraints on what is possible Processes l l Architecture Analogy Principles of information architecture l Figuring out what to build Actually building it Figuring out if you’ve done it right Information Space IA issues Course Overview i. School

Focus on Group Work ¢ Why? You rarely work alone in the real world ¢ Three is the best number ¢ Advice: l l Architecture Analogy 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 Information Space IA issues Course Overview i. School

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 l l Architecture Analogy Information Space IA issues l ¢ One hour session (break) One hour session (short break) Half hour session Email me: I’m available by appointment only Course Overview i. School

Expectations ¢ Read the assigned material before class l 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 i. School

Technology: Assumptions ¢ I assume you already know l l Basic HTML/CSS How to put up a Web site (FTP, etc. ) ¢ ¢ Architecture Analogy Information Space I assume you’ll pick up new technology skills along the way… For the projects, I expect you to build whatever you design l Wireframes are sufficient as deliverables Figure out if it works Figure out what’s needed IA issues Course Overview Build it Design it i. School

In-Class Exercise ¢ Goal: to develop an intuition for good vs. bad IA ¢ Split into teams of four (six teams total) ¢ Compare: l l l ¢ Amazon vs. Barnes and Noble Circuit City vs. Best Buy Marriott vs. Hilton Reports: l l Select someone to present ~5 minutes per group i. School

Tasks ¢ Amazon vs. Barnes and Noble l l ¢ Circuit City vs. Best Buy l ¢ I want to buy the M&R book I’m looking for something interesting to read I’m looking for a TV, and I have a budget of $1500 Marriott vs. Hilton l I’m attending the i. Conference 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? i. School