information architecture & why you care about it as a designer
DESCRIPTION
The Art Institute of Dallas recently added IA courses to their design and multimedia degree plans. I worked with the instructors to revise the curriculum to make it more relevant to actual practice. I also give the introduction lecture. This presentation is not intended to make converts but rather to expose designers to the role of IA, help them understand the value and be able to identify them in the wild.TRANSCRIPT
Information Architecture &
Why You Care About It As a Designer
The structural design of an information space to facilitate task completion and intuitive access to content.
Definition
Information Architecture for the World-Wide Web Louis Rosenfeld & Peter Morville
Organizing info so
people can find stuff>
Metaphor – Painterliness vs. Draftsmanship
Detail from Water Lilies Claude Monet 1906
Metaphor – Painterliness vs. Draftsmanship
Detail from The Entombment Raphael 1507
Metaphor – Painterliness vs. Draftsmanship
Detail from The Entombment Raphael 1507
The Key is Balance
A beautifully designed interface might satisfy the business vision but imply things about the function of a site that can’t be realized
An elegantly coded back-end system might meet basic business requirements
and still be wholly un-usable
The Role In Context
IA is about Applied Usability Content Organization: structure & labeling Interaction Design: page-level elements
The Role In Context
IA is about Applied Usability Content Organization: structure & labeling Interaction Design: page-level elements
12°
9'
4'
45'
Plan Build
IA IA
The Context of Development
It doesn’t matter what development processes your client or your company subscribe to. They all have the same thing in common
Idea
Idea
12°
9'
4'
45'
Plan Build
IA IA
The Context of Development
We’re going to focus on the first gap between an Idea and a Plan
Steps
Requirements come from multiple sources. Some are formalSome are randomSome are completely off the wall!
Gather | Qualify | Organize | Validate | Interaction
Steps: Feature ListGather | Qualify | Organize | Validate | Interaction
Granular breakdown and description of all potential features and
functions
Granular breakdown and description of all potential features and
functions
Gather | Qualify | Organize | Validate | Interaction
Steps
Scrutinize the requirements against three facets:
User ValueBusiness ValueTechnical Risk
Use the outcome to determine your scope
Steps: Feature AnalysisGather | Qualify | Organize | Validate | Interaction
Evaluation of each element:Removes BiasConsiders Constraints
Evaluation of each element:Removes BiasConsiders Constraints
Steps
Organize the features and functions into some kind of framework
Process Flows for Linear Applications EX: E-Commerce Check-Out
Site Maps for Information SitesEX: Corporate Information Site
Page Flows to translate processes into pages
EX: Catalog Index
Gather | Qualify | Organize | Validate | Interaction
Steps: Process & Page FlowGather | Qualify | Organize | Validate | Interaction
Page Agnostic
Page Agnostic
Page Specific
Page Specific
Better for Linear Applications
Better for Linear Applications
Steps: Site MapGather | Qualify | Organize | Validate | Interaction
Better for Broad Content Sites
Better for Broad Content Sites
Steps
Review your framework with the technical team to validate the way the system will support it
Are there any constraints that might influence the way the user will be able to encounter the information?
Gather | Qualify | Organize | Validate | Interaction
Steps
Create a low-risk model of a page to account for the features and functions that have been scoped.
This is the first time that the team will be able to see and think of the site in terms of pages.
Gather | Qualify | Organize | Validate | Interaction
Steps: WireframeGather | Qualify | Organize | Validate | Interaction
Functional Model, Few if any Design
Elements
Functional Model, Few if any Design
Elements
Why Do You Care?
IAs promote the expertise of design by couching its impact in terms of usability
Form Follows Function – IAs establish the function of a page independent of design elements. This keeps the client from designing for you
IAs provide the framework to inform a solid design scheme
Your grade depends on it
Q & A