**Metaphors in Information Architecture**: Explore the power of metaphors in understanding information space architectur

1. INFM 700: Session 1What 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 StatesSee http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details

2. Today’s Topics • The architecture analogy • Architecture of information spaces • IA issues • Course overview ArchitectureAnalogy InformationSpace IA issues CourseOverview

3. 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… ArchitectureAnalogy InformationSpace IA issues CourseOverview from M&R, p. 4

4. Examples of Architecture… ArchitectureAnalogy InformationSpace IA issues CourseOverview Image source: Wikipedia

5. Why architecture? • What does designing buildings have to do with designing Web sites? • What is architecture really about? ArchitectureAnalogy InformationSpace IA issues CourseOverview

6. Personal Experience ArchitectureAnalogy InformationSpace IA issues CourseOverview Jimmy Lin Mixed Media Final Design Project, MIT 4.111 Experiencing Architecture Studio Spring, 2002 Image source: Jimmy Lin

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

8. Other Parallels… • Combination of art vs. engineering • Same with information architecture ArchitectureAnalogy InformationSpace IA issues CourseOverview Florence Cathedral, with dome designed by Brunelleschi Image source: Wikipedia

9. Other Parallels… • From vernacular to grand: • From a personal Web site to Amazon.com ArchitectureAnalogy InformationSpace IA issues CourseOverview Example of vernacular architecture from Denmark Image source: Wikipedia

10. Other Parallels… • Buildings crumble: • Web sites crumble • When was the last time you encountered a broken link? ArchitectureAnalogy InformationSpace IA issues CourseOverview Acropolis of Athens Image source: Wikipedia

11. Other Parallels… • “Pretty” but unusable: • Countless examples… ArchitectureAnalogy InformationSpace IA issues CourseOverview Ray and Maria Stata Center, MIT; designed by Frank Gehry Rhode Island School of Design: http://www.risd.edu/ Image source: Wikipedia

12. Other Parallels… • Unintended uses of buildings: • Unintended uses of Web sites • Simple example: search engines as bookmarks ArchitectureAnalogy InformationSpace IA issues CourseOverview Ray and Maria Stata Center, MIT Image source: David Huynh

13. My Definition • Information architecture is the architecture of information spaces • Huh? ArchitectureAnalogy InformationSpace IA issues CourseOverview

14. 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

15. 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview George Lakoff and Mark Johnson. (1980) Metaphors We Live By. University of Chicago Press.

16. 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

17. 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

18. 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview 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

19. t3 d2 d3 d1 θ φ t1 d5 t2 d4 Information Spaces: Example “bag of words” “vector space” ArchitectureAnalogy InformationSpace IA issues CourseOverview

20. Information Spaces: Example ArchitectureAnalogy InformationSpace IA issues CourseOverview 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.

21. 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).

22. 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.

23. Information Spaces: Example ArchitectureAnalogy InformationSpace IA issues CourseOverview http://www.speculativebubble.com/videos/real-estate-roller-coaster.php

24. 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

25. Things that iArchitects 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview Build it Design it (compare with physical architects)

26. The IA Circles Context Content Users ArchitectureAnalogy InformationSpace IA issues CourseOverview from M&R, p. 25

27. Another View Users Systems Content ArchitectureAnalogy InformationSpace IA issues CourseOverview Context

28. 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

29. 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

30. 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

31. 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

32. 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

33. Major Course Components • Lectures • In-class exercises • Team presentation • Design projects • Final project • No exams! ArchitectureAnalogy InformationSpace IA issues CourseOverview

34. 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview

35. 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview

36. 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

37. 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

38. 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 ArchitectureAnalogy InformationSpace IA issues CourseOverview Figure out if it works Figure out what’s needed Build it Design it

39. 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

40. 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?