Information Architecture

Information The communication or reception of knowledge or intelligence Text Images Music Video

The communication or reception of knowledge or intelligence

Text

Images

Music

Video

Architecture The art or science of building Design Structure Space Function

The art or science of building

Design

Structure

Space

Function

Building Blueprint Bedroom Sleeping Living Room Relaxing Den Books Kitchen Cooking Dining Eating Garage Storage

Website Blueprint Services Contact Products Main Staff About

Levels of Information Architecture The Internet Websites Site sections Section page groups Pages Page elements Paragraphs

The Internet

Websites

Site sections

Section page groups

Pages

Page elements

Paragraphs

Page Level Information Architecture HTML title and filename Description (metadata) Title on the page Subsections Paragraphs Sentences Words/Keywords (metadata)

HTML title and filename

Description (metadata)

Title on the page

Subsections

Paragraphs

Sentences

Words/Keywords (metadata)

IA Deliverables Page Flow Diagram Interaction diagram Flow chart Wireframe Mockup Paper Prototype

Page Flow Diagram

Interaction diagram

Flow chart

Wireframe

Mockup

Paper Prototype

Page Flow Diagram Define navigation Define structure Visualize page relationships Define site scope

Define navigation

Define structure

Visualize page relationships

Define site scope

Horizontal format Used to describe interactive sites Services Contact Products Main Staff About

Used to describe interactive sites

Horizontal format Used to describe interactive sites Services Contact Products Main Staff About History Mission

Used to describe interactive sites

Vertical format Used to describe step by step flows Return Date Payment Departure Date Choose Flights From/To City Airline Reservation

Used to describe step by step flows

Boxes (symbols) Decision External Process Output (print) Database Jump Page Page Page Page Page Stack Page Group Page Page Page

Double arrow points – two way link Single arrow point – one way link Dotted lines – anything different than a standard link Arrows (connectors)

Double arrow points – two way link

Single arrow point – one way link

Dotted lines – anything different than a standard link

Wire Frame Diagram Paper prototype Mockup Page script

Paper prototype

Mockup

Page script

Tools Visio OmniGraffle PowerPoint Pencil and Paper

Visio

OmniGraffle

PowerPoint

Pencil and Paper

Questions?

Web Head Processes