Transcript Information Architecture & Design

Information Architecture & Design
• Don Turnbull [email protected]
• 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 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 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 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 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
Information
Architecture
Browsing
Strategy
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
Planning
Analysis
Design
Verification
Construction
Maintenance
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 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 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 Work
• Mailing list (listserv)
- Address an email message to
[email protected].
- 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