A Blueprint for Successful Web SitesInformation Architecture & Web Design

A Blueprint for Successful Web SitesInformation Architecture & Web Design

Web 2003 - June 18, 2003

Beth BaileyKim Eke

Elizabeth Pyatt

IA & Web Design

IA OverviewIA Overview Design DocumentDesign Document ActivityActivity IA Process: Next stepsIA Process: Next steps Your next stepsYour next steps

Tod

ay’s

pre

senta

tion

What makes a good site?

Or, what makes a bad site?Or, what makes a bad site?

IA O

verv

iew

IA: What it is

The blueprint of the site/project upon The blueprint of the site/project upon which all other aspects are builtwhich all other aspects are built Project scopeProject scope Goals, mission, visionGoals, mission, vision Content and functionalityContent and functionality StructureStructure Navigation and interfaceNavigation and interface InteractionInteraction Visual designVisual design

IA O

verv

iew

IA: What it isn’t

IT’S NOT THE SAME AS:IT’S NOT THE SAME AS: UsabilityUsability AccessibilityAccessibility Web DesignWeb Design

IA O

verv

iew

The sum of its parts…

Before you begin Before you begin take timetake time to: to:

Identify Identify individual componentsindividual components or or pieces of informationpieces of information

Consider the nature of info Consider the nature of info (static v. dynamic)(static v. dynamic)

Conceptualize Conceptualize the wholethe whole

Anticipate future growthAnticipate future growth

IA O

verv

iew

Mapping information

Concept mapsConcept maps OutlinesOutlines Organizational chartsOrganizational charts SpreadsheetsSpreadsheets Whatever works best for your Whatever works best for your

brain…brain…

IA O

verv

iew

What is it good for?

Absolutely everything!Absolutely everything!

Desi

gn

Docu

ment

Overview

Physical documents in which Physical documents in which planning planning information is information is recordedrecorded

Essential in the entire Essential in the entire processprocess Each Each stagestage builds on the prior builds on the prior Can refer back to them at any time Can refer back to them at any time

in the projectin the projectDesi

gn

Docu

ment

Allows for…

Walk through of scenariosWalk through of scenarios Opportunity to view the site in Opportunity to view the site in

action prior to programmingaction prior to programming Collaboration tool when Collaboration tool when

development does begindevelopment does begin

Desi

gn

Docu

ment

The Document

Site GoalsSite Goals AudienceAudience ScenariosScenarios Competitive AnalysisCompetitive Analysis

Desi

gn

Docu

ment

The Document (cont)

Content and Functional Content and Functional RequirementsRequirements

Site StructureSite Structure Layout GridsLayout Grids Page MockupsPage Mockups

Desi

gn

Docu

ment

Part 1: Mapping Info (10 min) Read “meeting notes” from Read “meeting notes” from

scenarioscenario Identify all possible information to Identify all possible information to

Meet client’s goals & needsMeet client’s goals & needs Consider nature of infoConsider nature of info Consider future growth of siteConsider future growth of site

Act

ivit

y

Part 2: Organizing Info(10 min) Group information (categories)Group information (categories) Consider all possible labels for info Consider all possible labels for info

and select bestand select best Create an outline or table to Create an outline or table to

identify your main categoriesidentify your main categories List the information included in List the information included in

each categoryeach category

Act

ivit

y

Part 3: Compare

In small groups, compare In small groups, compare Categories Categories Overall organizationOverall organization Types of info included or notTypes of info included or notA

ctiv

ity

Debriefing (So what?)

Organizing & labeling info Organizing & labeling info is is difficultdifficult Label interpretations varyLabel interpretations vary Future growth unknownFuture growth unknown Designing a Designing a systemsystem

And you still don’t have a clue And you still don’t have a clue about what the site about what the site looks likelooks like

Act

ivit

y

Life “after” documentation

Navigation systemsNavigation systems Screen designScreen design PrototypingPrototyping

Paper, web, graphicsPaper, web, graphics Present Design Doc & Present Design Doc &

prototype(s) to clientprototype(s) to client

IA P

roce

ss:

Next

Ste

ps

Your thirst for knowledge

IA resources IA resources Usability & user testingUsability & user testing AccessibilityAccessibility

You

r next

step

s

IA is the blueprint…

Broad & Broad & growinggrowing field field Design Doc is small pieceDesign Doc is small piece More research now More research now Good IA contributes to Good IA contributes to usabilityusability Use your Use your knowledgeknowledge & & creativitycreativity

for good… not evil!for good… not evil!

Su

mm

ary

Questions??