INFM 700: Session 1 What is Information Architecture? Paul Jacobs The iSchool University of Maryland Monday, August 31, 2009 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 Todays Topics Overview of course The architecture analogy Information architecture: topics and issues Course administration and logistics Course overview The archtecture analogy IA topics and issues Course administration

iSchool Information Architecture What is it? (for starters) Architecture – structural design [of web sites] to support function and form Information – organized [electronic] content So our goal is to master the design of web sites for organizations that effectively deliver information to their users Course overview The archtecture analogy IA topics and issues Course administration

iSchool Good Information Architecture Users find what they need (e.g., information content) Users get what they need (e.g., a book, a plane reservation, a stock trade) Users learn what they need (e.g., how to install a driver, use a piece of software) Users dont waste time Users are happy Course overview The archtecture analogy IA topics and issues Course administration

iSchool Good Information Architecture Organizations have happy users/customers Organizations make money/save money Organizations get their message across Organizations can keep things going and make changes when necessary Organizations are happy Course overview The archtecture analogy IA topics and issues Course administration

iSchool Bad Information Architecture Users cant get what they want/need, are confused or frustrated Users go away or go to a competitors site Organizations waste/lose money or fail to gain revenues/clients/users Organizations are unhappy We get fired Course overview The archtecture analogy IA topics and issues Course administration

iSchool Information Architecture: Tools and Techniques (Examples) Understanding the user experience (e.g., user studies, card sorting, search log analysis) Vocabulary and labeling systems Organization/navigation aids and tools (e.g. navigation bars, menus, site index, hierarchies/hypertext, breadcrumbs) Search engines Design tools (e.g., wireframes, blueprints) Course overview The archtecture analogy IA topics and issues Course administration

iSchool Information Architecture: Business and Process Information architecture strategy Business processes Build vs. buy Team composition and skills Course overview The archtecture analogy IA topics and issues Course administration

iSchool Information Architecture: Segue What is it? [from the text] 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 the digital landscape Now lets consider the architecture analogy… from M&R, p. 4 Course overview The archtecture analogy IA topics and issues Course administration

iSchool Examples of Architecture… Image source: Wikipedia Course overview The archtecture analogy IA topics and issues Course administration

iSchool Why architecture? What does designing buildings have to do with designing Web sites? What is architecture really about? Course overview The archtecture analogy IA topics and issues Course administration

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., find or get what you need) Stay up (i.e., not crash, last over a period of years) Course overview The archtecture analogy IA topics and issues Course administration

iSchool Other Parallels… Combination of art vs. engineering Image source: Wikipedia Florence Cathedral, with dome designed by Brunelleschi Course overview The archtecture analogy IA topics and issues Course administration

iSchool Other Parallels… Pretty but unusable: Countless examples…what else? Image source: Wikipedia Ray and Maria Stata Center, MIT; designed by Frank Gehry Rhode Island School of Design: Course overview The archtecture analogy IA topics and issues Course administration

iSchool Importance of Metaphors Metaphors describe/shape our thoughts Anger as heat (see Lakoff and Johnson, Metaphors we Live By) Political framing (e.g., death tax, tax relief, see Lakoff, Dont Think of an Elephant) Why are metaphors so pervasive? Why are metaphors important in information architecture? Course overview The archtecture analogy IA topics and issues Course administration

iSchool Metaphors on the Web Question: What types of metaphors do we need on the web? Interactive metaphors Pull down, pop up, open Window, toolbar Shop, check out, cart Navigational metaphors Browse, surf Table of contents, site index Are metaphors consistent? Do we all apply the same metaphors? Course overview The archtecture analogy IA topics and issues Course administration

iSchool The Architecture Analogy: Summary The analogy is helpful …in explaining information architecture to friends and family …in understanding and analyzing IA concepts …in applying IA concepts to web design Like all analogies, it goes only so far Web sites are not buildings Consider the role of analogy and metaphor in any user-centered software activity Course overview The archtecture analogy IA topics and issues Course administration

iSchool Information Architecture: Topics and Issues Key concepts of information architecture Organizing content (e.g., labeling, hierarchies) Search systems Technologies, tools and techniques Business issues Course overview The archtecture analogy IA topics and issues Course administration

iSchool Examples of IA

iSchool Examples of IA

iSchool Examples of IA

iSchool Examples of IA

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 … Course overview The archtecture analogy IA topics and issues Course administration

iSchool Why IA is vaguely defined IA is multi-disciplinary IA is as much an art as it is a science IA is messy IA lacks an underpinning theory Course overview The archtecture analogy IA topics and issues Course administration

iSchool Overlapping Disciplines Library and information science Computer Science Human-Computer Interaction Information Retrieval Databases Software Engineering Graphics design Cognitive psychology User experience engineering … Course overview The archtecture analogy IA topics and issues Course administration

iSchool What is Clear? The Objective (good web sites) The Focus (delivering information content) The Methods Course overview The archtecture analogy IA topics and issues Course administration

iSchool Course Administration and Logistics General expectations Requirements Grading Other Course overview The archtecture analogy IA topics and issues Course administration

iSchool What you can expect from me Practical focus If its not useful, we wont worry about it too much Emphasis on concepts Consideration for how its done in the real world Desire that everyone should succeed Set clear and concrete objectives where possible Work together to learn/to achieve goals No easy way out Listen and respond to questions/objections, flexibility Course overview The archtecture analogy IA topics and issues Course administration

iSchool What I expect from you Preparation Do readings Turn in work on time Fill in the blanks Participation Ask when things are unclear Give examples/tell stories Help with programmatics Honesty across the board Course overview The archtecture analogy IA topics and issues Course administration

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 Course overview The archtecture analogy IA topics and issues Course administration

iSchool Major Course Components Lectures and discussion In-class exercises Team presentation Design projects Final project Final exam Course overview The archtecture analogy IA topics and issues Course administration

iSchool Exam questions/notional example (1) All of the following are key elements of information architecture except: (a) Organizing information on web sites to meet user requirements (b) Writing client-side scripts to accept user input (c) Designing labeling systems that help users find what they need (d) Understanding search engine features and issues Course overview The archtecture analogy IA topics and issues Course administration

iSchool Exam questions/notional example (2) Match the concepts on the left with descriptions on the right: Top-down analysisOrganizing information according to concepts in a tree from the general to the specific TaggingOrganizing information by starting with an expectation of whats important or needed TaxonomyA network of terminology and/or concepts that captures associations and relationships among words, phrases, or ideas ThesaurusAssigning meta-data labels to information content to make it easier to organize, understand, or find Course overview The archtecture analogy IA topics and issues Course administration

iSchool Course Themes Design Principles of information architecture Technology Constraints on what is possible How to do it, building on whats available Processes Figuring out what to build Actually building it Figuring out if youve done it right Course overview The archtecture analogy IA topics and issues Course administration

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: dont let distance be a hindrance or excuse Course overview The archtecture analogy IA topics and issues Course administration

iSchool Course Logistics Third time this course has been offered (my second) – still making changes, incorporating feedback Check the course homepage often terpconnect.umd.edu/~psjacobs/INFM700_f09.htm Lecture slides will be on-line Monday morning (at the latest) Typical class structure 1.5 hour session Short break Logistics/administration One hour session me: Im available by appointment Course overview The archtecture analogy IA topics and issues Course administration

iSchool Technology: Assumptions I assume you already know Basic HTML/CSS and tools (e.g., Dreamweaver, Flash) How to put up a Web site (FTP, etc.) Database fundamentals Basics of client-side (e.g., HTML and Javascript) and server-side (e.g., PHP) technologies, possibly Java Youll pick up new technology skills For the projects, you will build something Figure out whats needed Design itBuild it Figure out if it works Course overview The archtecture analogy IA topics and issues Course administration

iSchool Extra Exercise (for next time) Goal: to develop an intuition for good vs. bad IA Compare: Amazon vs. Barnes and Noble Evaluate: How easy was it to find/get what you wanted? What are some major architectural features/differences of each site? Any strengths/weaknesses?

iSchool Wrap-up What is information architecture? What kinds of things will we learn in the class? How will we work together? What are the requirements and expectations? What should we do for next week? Any other questions? Course overview The archtecture analogy IA topics and issues Course administration