Information Architecture Information Architecture (IA) is a process of identifying the objectives...

Information ArchitectureInformation Architecture

Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive plan, or blueprint before development begins.

• Define Goals for the Web Site • Define the Audience• Define the Site Content• Define the Site Structure• Define the Site Structure Hierarchy and Navigation

IA: Define Site GoalsIA: Define Site Goals

Understand “Why” the site is being built Understand “What” you are building – If

you don’t know what you are building, what is the point?

Defining the goals for the Web site establishes a clear, well-documented plan for what you are going to accomplish and helps to define the roles of the project participants

Solicit diverse opinions

IA: Define Site GoalsIA: Define Site Goals

Ask Questions– Basic set of questions should include:

• What is the mission or purpose of org?• What are short / long term goals of the site?• Who are the intended audiences?• Why will users visit your site?

– Filter answers and distill into a master list– You now have goals and a purpose!– Make sure the client agrees and signs off on the

goals for the site…

IA: Define the AudienceIA: Define the Audience

Objective is to establish a clear definition of the site’s audience and how they will react to the site

An audience is defined by more than the technology it uses to access the site– That a user visiting the site uses a 56 kb modem is

only a small part of the audience definition Avoid a “too narrow” focus, look beyond the

immediate needs

IA: Define the AudienceIA: Define the Audience

Why build a Web site if you don’t have an Audience?

Facts:– Most sites get a wide variety of visitors– Some visitors are better than others– Build your site around a “target audience”

IA: Define the AudienceIA: Define the Audience

What makes up an audience?– Goals:

• Why are they on your Web site?

– Language:• What is their native language?• Learn the “lingo”

– Technology:• Hardware / Software / Platforms, etc.

IA: Define the AudienceIA: Define the Audience

What makes up an audience?

– Demographics:• Age, sex, education, geography, etc.• http://www.valleytech.k12.ma.us/medialit/demo

graphics.htm

– On-line Skill Level:• New to AOL• Runs a Web design firm

IA: Define the AudienceIA: Define the Audience

Perform a Competitive Analysis– Know what the competition is doing on their Web

site– List competitors and research their sites– Generate a set of features and criteria to evaluate

each site– Begin with your goals, use them as the basis for a

set of features in your analysis– Criteria include things such as download time,

page size, layout, graphics, navigation, etc.

IA: Define the AudienceIA: Define the Audience

Perform a Competitive Analysis– Measure effectiveness of your Web Site vs.

your Competitor’s:• Load Time – How quickly do pages show up• Accessibility – How long does it take an

average user to navigate to pages• Content – graphics, text, technology• Task Analysis – Start to Finish process

– Measure from different user perspectives• 56k vs. Broadband line for example

IA: Define the Site ContentIA: Define the Site Content

Use the list of goals, needs of your audience, and competitive analysis to start two Content Inventory Lists:– Content elements– Functional requirements

Add as much content as you can to each list – types include:– Examples, copyright notices, rules, Web

pages, dynamic content, images, etc.

IA: Define the Site ContentIA: Define the Site Content

More types of content for your lists:– Member login pages, newsletters,

forms, documents, signup pages, etc.– Browse your competition …

When complete, revisit functional requirements– Determine feasibility– Rank importance

IA: Define the Site ContentIA: Define the Site Content

What do you already have in hand? What would be good to develop for the site?

For each item, ask yourself: -Does it fit purpose of site? -Does it suit the audience? -Why would people come to see this item?

Don't forget the functional items, e.g. -Site map -Copyright notices -Search function -Security

Define your incremental goals: -What should be published first?

 -What can come later stages?

IA: Define the Site ContentIA: Define the Site Content

Next, group and label content– Experiment with different groupings– When you are satisfied with the

groupings, label each group– Becomes the basis of your site

structure– Get feedback and input from key

players

IA: Define the Site StructureIA: Define the Site Structure

Site Structure is the blueprint that holds the page together

A well-defined structure helps to define a navigation system, and these two combined facilitate page layout design

Metaphor exploration can help to refine the vision of the site’s structure

IA: Define the Site StructureIA: Define the Site Structure

How will the site be Organized?– Based upon Organizational Structure:

IA: Define the Site StructureIA: Define the Site Structure

How will the site be Organized?– Based upon Topics of Interest:

IA: Define the Site StructureIA: Define the Site Structure

How will the site be Organized?– Based upon Target Audience Groups:

IA: Define the Site StructureIA: Define the Site Structure

How will the site be Organized?– Based upon Task Oriented Goals:

IA: Define the Site StructureIA: Define the Site Structure

How will the site be Organized?– Based upon Metaphors:

IA: Site Structure: MetaphorIA: Site Structure: Metaphor

Explore various metaphors during the process of determining the site’s structure

Good metaphors help to make your site intuitive to users

No metaphor is perfect – combine elements of several types

IA: Site Structure: MetaphorIA: Site Structure: Metaphor

Organizational metaphors– Rely on the existing structure of a group,

system or organization– For a site to sell groceries, your

metaphor could be a supermarket, where products are grouped logically by type

IA: Site Structure: MetaphorIA: Site Structure: Metaphor

Organizational metaphors

IA: Site Structure: MetaphorIA: Site Structure: Metaphor

Functional metaphors– Relating online tasks to real-world

representations of tasks– You can figuratively “cut”, “copy” and

“paste” graphics on a computer using PhotoShop for example

IA: Site Structure: MetaphorIA: Site Structure: Metaphor

Visual metaphors– Based on common graphic elements

familiar to most people– Consider a music site that allows users

to play songs using traditional icons found on CD players for “start”, “pause”, “stop”, etc.

IA: Site Structure: HierarchyIA: Site Structure: Hierarchy

Integrate Metaphor with Content– Match content with Sections to form a

Hierarchy, starting with general information and drilling into specifics

– Major sections form the site’s “roots”– Map out the levels on paper, indenting as

you drill deeper

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Navigation system should address Global and Local paths

Create a visual representation of the site structure showing how elements are grouped and linked

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Questions:– How will visitors use the site?– How will they get from “A” to “B”– How do you prevent them from getting lost?

Major sections are good candidates for Global Navigation

Each section can also have multiple subcategories - People like to work from structured lists

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Include notes that distinguish among parts of the site that perform a function or transactions, parts that are generated dynamically, etc.

• Work on paper or a whiteboard, with sticky notes, etc. • Brainstorm! • Plan for growth

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Create a visual representation of the site structure showing how elements are grouped and linked

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Limit number of Global Navigation elements to between five and seven

Decide on the category order Alphabetize categories

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Local Navigation can take many forms:– Hyperlink lists (Yahoo)– Sub Menu Choices– Next Page Buttons

IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap

Remember the 3 Click Rule!

Design Process: ArtifactsDesign Process: Artifacts

During the process of defining the Site Structure, Web designers create representations of the site at various levels of detail

Web sites are refined at all levels of detail

Site Maps

Story Board/Scenarios

Page Mock-ups

Sketches

Prototypes/Templates

Design Process: ConceptualizeDesign Process: Conceptualize

During the early phases of the design process, activities typically involve:– Brainstorming– Sketching ideas – Defining site structure

Early project deliverables:– Site maps– Scenarios and storyboards– Written reports and Proposals– Presentations (off-line & on-line)

Design Process: ConceptualizeDesign Process: Conceptualize

Early IA starts out unrefined …– Rough navigation and

site map

Design Process: ConceptualizeDesign Process: Conceptualize

Minimal page level detail

Interaction Sequence

Story Boards

Design Process: PreliminaryDesign Process: Preliminary

Generate multiple (3-5) designs– one will be selected for development– navigation design– early graphic design

During this phase, activities typically involve:– Design Sketches– Creating Templates and Page Mock-ups

Preliminary project deliverables:– Schematics (a.k.a. templates)– Site maps– Mock-ups– Presentations

Design Process: PreliminaryDesign Process: Preliminary

Rough sketch of content and navigation as a page layout

Design Process: PreliminaryDesign Process: Preliminary

Refine the navigation and page layout on a template or prototype

Create more solid navigation

Design Process: Design PhaseDesign Process: Design Phase

Develop the design– Design is selected in previous stage– Increasing level of detail

During this phase, activities typically involve:– Design, Prototype, Evaluate, Design …– Creating more refined graphics and prototypes

Design phase project deliverables:– Mock-ups– Prototypes (with HTML)– Presentations

Design Process: Design PhaseDesign Process: Design Phase

• Graphic design: mock-up

• High-fidelity, precise representation of page

Summary: Why IA?Summary: Why IA?

Building a “blue print” for the Web site structure

Support information/navigation design Support creation of specific Design Process

artifacts– Sketches– Schematics– Site maps – Prototypes– Walkthroughs/presentations