Information Architecture & Design Don Turnbull Office hours by appointment, just send me an or check with me in class. Course Web site -

My Background Software Developer - SGML Dynamic Document Expert Systems (Yes, LISP) - CASE Tools & Methodologies (“Information Engineering”) Georgia Tech Software Design & Technical Architecture - Consumer Windows Software - VL Web Sites, Web-enabled Applications U Toronto - Modeling Web Use Behavior & Informetrics - Systems to Observe & Augment Web Use Startup - Web Interaction Interfaces & Personalized Search Asst. UT Austin - Research & Teaching in IA, IR, Semantic Technologies & Knowledge Management Systems

Recent & Ongoing IA Work IA Summit - Submissions Review Committee, 2005 & Conference Planning Committee, Initiated Research track for peer-reviewed papers, 2006 IA Institute Advisory Board, IA Deliverables - XIA: An eXtreme IA Methodology, UT: Using IA to re-design large info systems, Web Browser Taxonomy project, IA Curriculum Panel (first ever), Encyclopedia article: “Information Architecture”, IA Research Panel & BoF, 2006 Journal of Information Architecture IA Projects - Agile IA Methods - Re-Investigation of Web documents - IA & the Semantic Web

Information Architecture & Design 1 Course Overview - Syllabus Syllabus - Requirements & Preferences - IA & Design Readings - Group Projects - Do’s and Don’ts IA Overview - What is IA? - Information Architect as a Profession

IA Course Requirements Use Fundamental IA Tools - HTML Editors - Graphics Editors - Site Mapping Tools - Site Organization Tools Learn and Use IA Methodology - Work Through the Phases of the IA Process - Create and Maintain a Design Specification - Use Structured Development Techniques

IA Course Preferences IA Technologies - HTML, XHTML, XML - Javascript and Databases Innovative Design using: - Content - Interfaces - Organization schemes (“architectures”) Work on a Real Project - Developing Requirements - Defining and Implementing Designs - Dealing with changes & deadlines

Do’s and Don’ts for IA1 Do sign up for the class listserv & blog Do turn in assignments at the very beginning of class. Don’t be late for class. Don’t use Microsoft Word’s “Save As…” feature or FrontPage to build any Web pages. Do try new Web designs. Do use Web development tools you haven’t used before. Do embrace different aspects of the IA roles.

Introduction Who is in this class? How many ways can we organize ourselves in this class? - Where? Texans New to Austin New to US - When? First year students - How? Web experience -Surfing -Building Pages/Sites - What? A (vague) idea of what IA is

Information Architecture Overview What is Information Architecture? What Do Information Architects Do? Approaches to Information Architecture Information Architecture Process Design and Information Architecture Designers and Information Architects Information as Product

What is Information Architecture? Builds on Skills, Methods and History of Architecture - IA is not just an analogy - IA is Process-Oriented IA is both Art & Science - Built upon Theory (Knowledge & Experiments) - Realized in Practice (Skills & Experience) IA is a Dynamic Discipline - Technologies are continually changing - People have accelerating needs & expectations

What else is IA? - Organization, labeling and navigational schemes in an information system Managing the process - Structural design of an information space for task completion and access to content Understanding Business and Implementing Goals - Art and science of structuring and classifying Intranets and Web + applications, other technologies - Emerging discipline for improving design and architecture to a “digital landscape” Other skills, unique combinations and instances Rosenfeld & Morville

What defines Info Architectures? Convey the organization information Provide a logical, understandable structure for current (& future) information Seem well-designed (perception) Provide Just in Time information Support reference & retrieval A picture worth a thousand words - An architecture to find those 1,000 words & more - Not always a simple picture

DNA is information, now this is IA

This IA is useful too

IA has Density

Even Maps to Info have IA

Site Maps show Web IA Communicate structure Where to go, where you’ve been How much is there What else could this show?

Not just graphics Tables of content Index Shelves of Books List of links What else?

What Do Info Architects Do? Use Tools and Methods Apply Experience & Understanding of Users Manage the IA Process Providing & Organizing roles too Passive - Application Development, but not just Programming - Content Development, but not Writing or Marketing - Design, but not Graphic Design or Advertising - MIS, but not Information Technology or Knowledge Management - Education, but not Teaching or Training - Product Management, but not Project Planning

What Do Info Architects Do? Work through an IA Methodology - Plan - Analyze - Design - Construct - Verify - Maintain Iterate the process Adapt to technology, information & customer needs

IA and Other Professions - Architecture, but not Construction or Contracting - Software Development, but not Programming - Content Development, but not Technical Writing or Marketing Communications - LIS, but not Cataloging or User Services - Design, but not Graphic Design or Advertising - MIS, but not Information Technology or Knowledge Management - Education, but not Teaching or Training - Product Management, but not Project Planning

AKA IA? Experience Design Experience Modeling (X-Mod) User Modeling Usability Engineering Webmaster Interaction Design Multimedia Developer Instructional Designer Web Developer The Visio job search…

Information Architecture is … Proactive Strategic for Information Systems Tactical for Technologies Profitable for the Organization Central to Business Applicable to Any Endeavor - Not just Web sites - Information & Process Fluid Indispensable

IA in Context Learning Information Seeking Information Retrieval Analytical Strategy Browsing Strategy Information Architecture

Approaches to IA Mediator of the Design Process Interpreter of User Needs and Uses Applying Theory to Practice (Top-Down) Designing and Extending from Examples (Bottom-Up) Visionary Producer, Director Artist or Scientist Objective / Subjective Project Lead – IA – Designer – Usability - QA

What about Design? “Design is Solving Problems” - View of the world as an information space - Improving the information space Products that solve these problems - Information as Product - Connections & Organization as Product Processes that solve problems - Education (eLearning) - Business Transformation (Web 2.0) An Information Architecture is critical for good Application Design

Design & IA Applications are more about creating & managing information - More information Visualization alone isn’t going to solve these problems Users need to intuit the underlying structures of their data - It’s potential uses Is Design = one kind of IA? - Or is that the other way around? A new kind of vocabulary for understanding creating, organizing & using information

Design vs. IA? Two Sides of the Same Coin? Each Part of the Other? Does IA = one kind of Design? Is Design = one kind of IA? “Users. Content. Context.” - Actors & Actions - Resources - Ecology

Design is an Attitude View of the world as a problem space Improving the problem space Solving problems that no one even knew existed. Creativity put to use. Applying solutions from one domain to another (synthesis) “Design-ensteins” - Richard Saul Wurman - Frank Lloyd Wright - Henry Dreyfuss - Susan Kare

Designers & Information Architects Focus on the Users Apply Theory Understand the System Use Tools Proficiently Extend the System Create New Systems Solve problems with information organization & design

Our IA Methodology Planning Analysis Design - Technology Independent - Technology Dependent Construction Verification Maintenance

IA Methodology AnalysisDesign VerificationConstructionMaintenance Planning

What are some IA issues? Taxonomies (more than one?) - Content - Use Controlled Vocabularies & content analysis - Interaction (searching) Faceted Classification - Interaction (browsing) Semantic Relationships Integration of diverse information Metadata - For discovery & interaction

What about IA & Metadata? How can you expose metadata in an graphical application? - Searching - Browsing “Why can’t I manage my papers like I manage my MP3s?” What interfaces allow us to view & edit metadata? What interfaces allow us to view & edit usage metadata?

The usual suspect

Our usual suspect

Another view of your media

Faceted Browsing of Info

Facets for Searching info

Principles of UI Design (add IA) Allow feedback control - Expose the UI functionality - Make functionality clear & distinct Reduce working memory load - Show progress & context of task Support experts & novices - Let user select the right interface - Reveal UI & system functionality in phases - Amount of information shown, preferred

What about Visualization & IA? Interactive GUIs are a good start Graphical views of information can provide an overview Is a picture (of an action) worth 1000 words? Is a picture of a dataset worth more? Graphics help with abstraction, how can they represent specifics? Visual metaphors may be one key Navigation as a mechanism for interpretation

Types of Visualization Interaction Windows, Icons, Menus & Pointers Desktops, dialogs & forms Colors & Highlighting Brushing & Linking Panning & Zooming Focus-plus context Magic Lens, Fisheye lens Is more interaction better?

Web Categories

Drill down selection in a GUI

We know what’s good for you GUI

Scatter/Gather result clustering

Overly Visual Clustering? What does this mean? Is it better to examine the peaks or the valleys? Which is the best answer?

Feature maps for search Size & shape are doc frequency Color is theme Neighborhoods are semantic relations Cursor hover shows doc titles If this is a map, where’s the legend?

GUIs are good for users But let’s not go overboard. “Although intuitively appealing, graphical overviews of large document spaces have yet to be shown to be useful and understandable for users. In fact, evaluations that have been conducted so far provide negative evidence as to their usefulness.” -Jef Raskin’s Humane InterfaceJef Raskin’s Humane Interface Well architected information makes GUIs better The information structure(s) should guide the interface

IA & Query interfaces What do we all use? - Command lines with typing - Text based searching in a GUI world What do we really need? - Search Syntax (with help) - Typpo or Vocabularry help? What are the basic elements a search interface should have for a simple query What should an IR system support for queries?

Learning from RDBMS Now that’s architected information But not so easy to use Filter by attributes DBMS “knows” the parameter of the answers, so only lets you search over them Drill down search = browsing?

Now you know everything about IA Do you think IA is something else? - Did you? What examples might not be IA to you? - Where does HCI overlap with IA? Are we talking about Information Design? How important are graphics in IA? - Is a picture worth a thousand words? - How would Google index it?

Syllabus and Topics Overview Weekly Work - Readings Primary Secondary - Class Work - Discussions in class Participation is the key to getting something out of this course Cooperation & Collaboration with others in class

Assignments Discussions - Class discussions - Blog participation Presentations - IA Topic - Site design (your final assignment) IA Work - Small assignments due every other week Site critique - Examine a Web site for information structure, design, navigability, general usability & underlying design technology

Rules for Assignments Assignments due at the absolute beginning of class - Do not be late to class Late assignments are penalized 20% per 24 hour period You are responsible for making sure the assignment is received E.g. Due at Noon today, turned in tomorrow at Noon = -20%. Turned in a week later = 0. Arrangements can be agreed upon for known issues -Travel, Serious Illness or Work Do not mail attachments to me unless agreed upon Make assignments Web accessible When required, notify class of your assignment via class listserv Posting or sent times count as submission times For Web pages, DO NOT use MS Word or FrontPage to build final XHTML content with the “Save As…” function Learn to use Web markup tools & see the XHTML code

Class Work Mailing list (listserv) - Address an message to - Leave the subject line blank. - In the message body, type Subscribe i385e YourFirstName YourLastName. - Remove any other text from the body of the message, such as a signature file.

Blog Work Each week, some small assignment you can blog about A blog post is a short comment, thought or recommended link about IA or a related topic Basic HTML editing makes blog posts easier to read & use Let’s try one

Deliverables for next week Sign up for the listserv & blog by the end of today - Choose a blog ID that makes you comfortable Blog your introduction to us - Who you are, where you are from - Year at UT (new student, etc.) - Your concept of IA & Design - Your background - Project ideas for class work Cource readings & discussion Tools Tutorials & Review in two weeks - Using your iSchool account (FTP) - Visio & OmniGraffle - DreamWeaver