Mark Avnet © 2008 all rights reserved MASC 609 – Information Architecture Module 1 – Introduction Mark Avnet office:

Mark Avnet © 2008 all rights reserved Agenda Introductions and Expectations What the heck is Information Architecture and why are we spending so much time on it? Exercise (and I don’t mean jumping jacks) For next time

Mark Avnet © 2008 all rights reserved Introductions and Expectations

Mark Avnet © 2008 all rights reserved Who IS this guy? Mark Avnet Media consumer. Media professional. Musician. Engineer. Tinkerer. Inventor. Quasi-theorist. MPS from NYU’s ITP, MA in Media Psychology, working on PhD, certified clinical – founding director of new media, exec producer, etc - alchemist Hearst Interactive – executive producer, director of production APL Digital – SVP, director of production and technology, CTO Lot21 – CTO, founder Lot21 DevLab Converging Arts – media psychology and technology consulting. Marist College, visiting prof, multimedia and com Sage – prof, dept. chair communications and information design Brandcenter

Mark Avnet © 2008 all rights reserved And Who Are You? Around the room, please: Name, where from, interests, why are you here, how’d you get here, why is the sky blue… And tell us at least one thing about yourself that we wouldn’t know by looking at you… For example… In general – please introduce yourself!

Mark Avnet © 2008 all rights reserved Expectations and Policies They are outlined in the handout syllabus. Summary and comments: –Attend classes, having performed the assignments (reading, writing, watching, whatever). –ACTIVE participation in the class –Do the projects, and turn them in on time. –If you miss a class, it’s YOUR responsibility to make up the work, not mine. And don’t miss a lot of them.

Mark Avnet © 2008 all rights reserved Expectations and Policies Let’s go through the syllabus.

Mark Avnet © 2008 all rights reserved Questions? Yes? No? Maybe? Anyone?

Mark Avnet © 2008 all rights reserved What the heck, etc.

Mark Avnet © 2008 all rights reserved But first, a movie… Click me! Information R/evolution

Mark Avnet © 2008 all rights reserved Definition Robert Saul Wurman Wikipedia: Richard Saul Wurman (born 1935 in Philadelphia) is an American architect and graphic designer. He is considered a pioneer in the practice of making information understandable. He has written and designed over 80 books and created the TED conferences. In 1976 he coined the phrase information architect out of his reaction to a society that daily creates massive amounts of information, but with little care or order. Introduction to Information Architects (excerpt)

Mark Avnet © 2008 all rights reserved Many slides borrowed from Jimmy Lin, U of Maryland Information Architecture What is it? –The structural design of shared 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…

Mark Avnet © 2008 all rights reserved Examples of Architecture… Image source: Wikipedia

Mark Avnet © 2008 all rights reserved Why architecture? What does designing buildings have to do with designing interactivity? What is architecture really about?

Mark Avnet © 2008 all rights reserved The Architecture Analogy A building must… –Look good –Be usable (for working, living, playing, etc.) –Stand up A Web site or interactive project must… –Look good –Be usable (e.g., information must be findable) –Stay up (i.e., not crash)

Mark Avnet © 2008 all rights reserved Other Parallels… Combination of art vs. engineering Same with information architecture Image source: Wikipedia Florence Cathedral, with dome designed by Brunelleschi

Mark Avnet © 2008 all rights reserved Other Parallels… From vernacular to grand: From a personal Web site to Amazon.com Example of vernacular architecture from Denmark Image source: Wikipedia

Mark Avnet © 2008 all rights reserved Other Parallels… Buildings crumble: Web sites crumble –When was the last time you encountered a broken link? Acropolis of Athens Image source: Wikipedia

Mark Avnet © 2008 all rights reserved Other Parallels… “Pretty” but unusable: Countless examples… Image source: Wikipedia Ray and Maria Stata Center, MIT; designed by Frank Gehry

Mark Avnet © 2008 all rights reserved 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

Mark Avnet © 2008 all rights reserved Let’s Talk about Metaphors…

Mark Avnet © 2008 all rights reserved Another Definition* Information architecture is the architecture of information spaces Huh? * Professor Jimmy Lin, Univ. Maryland

Mark Avnet © 2008 all rights reserved 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!

Mark Avnet © 2008 all rights reserved 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.

Mark Avnet © 2008 all rights reserved 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”

Mark Avnet © 2008 all rights reserved Importance of Metaphors Metaphors shape our thoughts –Compare marriage as “contractual agreement” vs. “religious sacrament” Why are metaphors so pervasive? Evolutionary basis?

Mark Avnet © 2008 all rights reserved Metaphors in Web Surfing Question: What types of metaphors do Web surfers use?

Mark Avnet © 2008 all rights reserved 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 The authors argue that the designers of tools for navigation and collaboration in information space should consider how people experience web space, including the natural tendency to metaphorically construe information in terms of physical space and motion.

Mark Avnet © 2008 all rights reserved Information Spaces: Example t1t1 d2d2 d1d1 d3d3 d4d4 d5d5 t3t3 t2t2 θ φ “bag of words” “vector space”

Mark Avnet © 2008 all rights reserved 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.

Mark Avnet © 2008 all rights reserved Information Spaces: Example 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).

Mark Avnet © 2008 all rights reserved Information Spaces: Example Adam Perer and Ben Shneiderman. (2008) Integrating Statistics and Visualization: Case Studies of Gaining Clarity during Exploratory Data Analysis. Proceedings of CHI 2008.

Mark Avnet © 2008 all rights reserved Information Spaces: Example s/real-estate-roller-coaster.php Click me!

Mark Avnet © 2008 all rights reserved Periodic Table of Visualization One of my favorite look-up sites And another cool way of visualizing information

Mark Avnet © 2008 all rights reserved 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 –… Click me! The Machine is Us-ing Us

Mark Avnet © 2008 all rights reserved Understand user and system requirements Design (and build) organization, navigation, and metadata systems Evaluate the user experience Things that iArchitects do… Figure out what’s needed Design itBuild it Figure out if it works (compare with physical architects)

Mark Avnet © 2008 all rights reserved The IA Circles from M&R, p. 25 Context ContentUsers

Mark Avnet © 2008 all rights reserved Another View Content Users Systems Context

Mark Avnet © 2008 all rights reserved 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

Mark Avnet © 2008 all rights reserved What does IA involve? Library and information science Computer Science –Human-Computer Interaction –Information Retrieval –Databases Graphics design Cognitive psychology Organization theory …

Mark Avnet © 2008 all rights reserved Aspiring iArchitects, Beware! Good IA can be tricky It requires significant breadth 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)

Mark Avnet © 2008 all rights reserved Exercise is good for you…

Mark Avnet © 2008 all rights reserved In-Class Exercise Goal: to develop an intuition for good vs. bad IA Split into three teams Compare: –Amazon vs. Barnes and Noble –Circuit City vs. Best Buy –Marriott vs. Hilton Reports: –Select someone to present –~5 minutes per group

Mark Avnet © 2008 all rights reserved 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 –I’m looking for accessories for the TV also Marriott vs. Hilton –I’m attending the SXSW Interactive Conf (3/13-17) 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? Is there a better way to do the same thing somewhere else?

Mark Avnet © 2008 all rights reserved In-Class Exercise part deux Goal: to develop an intuition for good vs. bad IA Split into two teams Compare: – – Reports: –Select a few people to present –~5-10 minutes per group

Mark Avnet © 2008 all rights reserved Tasks Brandcenter vs. Interactive Telecommunication Program Questions: Who are the audiences? Why do you think so? What is the organization of the site - sketch it out visually. Describe the user experience of two different types of audiences (personas) as they do something on the site that makes sense for that persona. What’s good and what’s bad?

Mark Avnet © 2008 all rights reserved For Next Time

Mark Avnet © 2008 all rights reserved FOR NEXT CLASS: 1.Read Chapters 1, 2 and 3 in MR. (MR = Information Architecture by Morville & Rosenfeld) 2.Read Chapter 1 and 2 in Communicating Design. 3.Find and be prepared to present your weekly “coolest thing.” 4.Identify and be prepared to discuss a few examples of information architecture at work in the physical world. See if you can differentiate between interface (surface) and strategy. 5.CT track assignment - due Sept 4th: each student find and capture five (5) examples of your local environment that say “culture” or “giving” for the Brandcenter web site. Images, short video, graffiti, quotes, found objects, etc…