information architecture & why you care about it as a designer

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