Information Architecture & Design Information Architecture & Design

• Don Turnbull donturn@ischool.utexas.edu• Office hours by appointment, just send me an

email or check with me in class.

• Course Web site - http://www.ischool.utexas.edu/~i385e

My BackgroundMy Background• Software Developer

- SGML Dynamic Document Expert Systems (Yes, LISP)- CASE Tools & Methodologies (“Information Engineering”)

• M.S. @ Georgia Tech• Software Design & Technical Architecture

- Consumer Windows Software- VL Web Sites, Web-enabled Applications

• Ph.D. @ U Toronto- Modeling Web Use Behavior & Informetrics- Systems to Observe & Augment Web Use

• Principal @ Startup- Web Interaction Interfaces & Personalized Search

• Asst. Professor @ UT Austin- Research & Teaching in IA, IR, Semantic Technologies &

Knowledge Management Systems

Recent & Ongoing IA WorkRecent & Ongoing IA Work• IA Summit

- Submissions Review Committee, 2005 & 2006- Conference Planning Committee, 2006- Initiated Research track for peer-reviewed papers, 2006

• IA Institute Advisory Board, 2005 - 2006• IA Deliverables

- XIA: An eXtreme IA Methodology, 2004- XIA @ UT: Using IA to re-design large info systems, 2004- Web Browser Taxonomy project, 2004- IA Curriculum Panel (first ever), 2005- Encyclopedia article: “Information Architecture”, 2005- 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 1Information Architecture & Design 1

• Course Overview- 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 RequirementsIA 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 PreferencesIA 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 IA1Do’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.

IntroductionIntroduction

• 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 OverviewInformation 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?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?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?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 IADNA is information, now this is IA

This IA is useful tooThis IA is useful too

IA has DensityIA has Density

Even Maps to Info have IAEven Maps to Info have IA

Site Maps show Web IASite Maps show Web IA

• Communicate structure

• Where to go, where you’ve been

• How much is there

• What else could this show?

Not just graphicsNot just graphics

• Tables of content• Index• Shelves of Books• List of links• What else?

What Do Info Architects Do?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?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 ProfessionsIA 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?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 …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 ContextIA in Context

Learning

Information Seeking

Information Retrieval

Analytical Strategy

BrowsingStrategy

Information Architecture

Approaches to IAApproaches 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?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 & IADesign & 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?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 AttitudeDesign 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 ArchitectsDesigners & 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 MethodologyOur IA Methodology

• Planning• Analysis• Design- Technology Independent- Technology Dependent

• Construction• Verification• Maintenance

IA Methodology

Analysis Design

Verification Construction Maintenance

Planning

What are some IA issues?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?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 suspectThe usual suspect

Our usual suspectOur usual suspect

Another view of your mediaAnother view of your media

Faceted Browsing of InfoFaceted Browsing of Info

Facets for Searching infoFacets for Searching info

Principles of UI Design (add IA)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?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 InteractionTypes 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 CategoriesWeb Categories

Drill down selection in a GUIDrill down selection in a GUI

We know what’s good for you GUIWe know what’s good for you GUI

Scatter/Gather result clusteringScatter/Gather result clustering

Overly Visual 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 searchFeature 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 usersGUIs 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 Interface

• Well architected information makes GUIs better• The information structure(s) should guide the

interface

IA & Query interfacesIA & 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 RDBMSLearning 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 Now you know everythingeverything about IA 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 OverviewSyllabus 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

AssignmentsAssignments

• 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 AssignmentsRules 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 email 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 WorkClass Work

• Mailing list (listserv) - Address an email message to listproc@lists.cc.

utexas.edu. - 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 WorkBlog 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 weekDeliverables 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