A Practical Introduction to Information Architecture

1
A Practical Introduction to Information
Architecture

• Presented by Stephen P. Anderson

2
Instructions

• 1. In groups of 4, SORT your pile of business
  cards into groups/ categories.
• 2. No further instructions will be given.
• (Ok, one more instruction)
• 3. Label your categories

3
IA in a Nutshell

• Who are we sorting for?
• Might also ask
• What do they want to accomplish?
• What is the ideal scenario for them to
  accomplish their task?

4
Before we go too far

• User Experience Design
• Focuses on
• How users interact with a site
• How users move through the site to find
  information and perform transactions
• How the site fulfills user goals and expectations
• How users rate their level of satisfaction

5
How IA fits into the User Experience/Web Design
Process

• From Jesse James GarrettsThe Elements of User
  Experience
• www.jjg.net/ia/elements.pdf

6
Information Architecture an Official
Definition

• Information architecture is creating consistent
  and functional systems for navigation, graphics,
  page layout and title languages so that the user
  knows where to go, what to do, and encourages
  them to return.
• -Web Review, Peter Morville

7
An IA performs the following

• Clarifies the mission and vision for the site,
  balancing the needs of its sponsor organization
  and the needs of its audiences
• Determines what content and functionality the
  site will contain
• Specifies how users will find information in the
  site by defining its organization, navigation,
  labeling and searching systems
• Maps out how the site will accommodate change and
  growth over time

8
Why Information Architecture?

• Abandoned shopping carts
• Ineffective searches
• Users who cant find content
• Bad experiences
• Complaints to call centers
• Interactions that dont work!
• Billions in lost business
• Need we ask?

9
The Process

• Understand the Problem
• Understand your Users
• Understand the Content
• Create a Navigational Framework

10
Understand the Problem

• Goals/Objectives
• Mission/Vision
• Concept Models

11
Understand the Problem

• Sample Concept Models

12
Understand the Problem

• Sample Concept Models

13
Understand the Problem

• Sample Concept Models

14
The Process

• Understand the Problem
• Understand your Users
• Understand the Content
• Create a Navigational Framework

15
Understand your users

• We do this through
• Contextual Inquiry
• Task Analysis
• Interviews/Questionnaires
• Field Research
• Reviewing server logs
• Search log analysis
• Role Playing
• Etc.

16
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

17
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

18
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

19
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

20
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

21
Understand your users

• User Profiles
• Personas
• User Scenarios
• Mental models
• Process Flow
• Task Analysis

(A simplified example) Imagine Wily Coyote
trying to buy an anvil for one of his nefarious
schemes from the web (A.)Buy An Anvil (1.)Find
The Anvil (a.)Search For Anvil (i.)Type in
"anvil" in Search box (ii.)Read results
(b.)Browse the Store (2.)View anvil
(B.)Purchase The Anvil
22
The Process

• Understand the Problem
• Understand your Users
• Understand the Content
• Create a Navigational Framework

23
Understand the Content

• Content Inventory A complete list of all the
  content that that information space holds and
  will hold
• Card Sorting activity

24
Understand the Content

• Content Inventory A complete list of all the
  content that that information space holds and
  will hold
• Card Sorting activity

25
The Process

• Understand the Problem
• Understand your Users
• Understand the Content
• Create a Navigational Framework

26
Creating A Navigation Framework

• Answers 3 Questions
• Where am I?
• Where have I been?
• Where can I go?

27
Creating A Navigation Framework

• Ways to organize content
• By Hierarchy (most common!)
• Global Navigation
• Local Navigation
• By Tasks (frontmedia.com)
• Contextually (related content)
• Alphabetically (yellow pages, good / dcc, bad)
• Chronologically (timeline, archived content)
• Based on Popularity (amazon.com)
• By Facets (gettyimages.com, wine.com)
• By Searchable Keywords (any)

28
Creating A Navigation Framework
29
Creating A Navigation Framework

• Schema should be consistent!
• Books Movies Toys Electronics
  About Us
• (which one doesnt belong? Why?)

30
Creating A Navigation Framework

• REAL WORLD EXAMPLE

Products
In-Stock
Made to Order
OR
Products
Jewelry
Watches
Jewelry
Watches
Jewelry
Watches
In-Stock
Made to Order
In-Stock
Made to Order
31
The Process

• Understand the Problem
• Understand your Users
• Understand the Content
• Create a Navigational Framework
• and Labeling

32
Labeling

• What is familiar?
• Services? Capabilities? Expertise?
• About Us? Our Team? Company?
• Coke? Pop? Cola?

33
Labeling

• What is accurate?
• Designs? Products?

34
Labeling

• Language of audience (not internal jargon)
• What is familiar/common? (evolving conventions)
• Audit different user segments (Hoagie? Subway?
  Gyro/Hero? Po Boy? Submarine Sandwich)
• Needs to be grammatically consistent
• Needs to not change within the site! (Products
  changing to Product Services on another page)
• Can be influenced by brand (Shopping Cart vs
  Shopping Bag

35
Labeling

• REAL WORLD EXAMPLE
• Find a Doctor OR Locate a Provider ?

36
Create a Navigational Framework

• From this work, we deliver...
• Site Maps
• Wireframes

37
Create a Navigational Framework

• From this work, we deliver...
• Site Maps
• Wireframes

38
Create a Navigational Framework
39
Create a Navigational Framework
40
Create a Navigational Framework
41
Create a Navigational Framework
42
(No Transcript)
43
What type of person makes a good IA?
44
Related Fields

• Usability/ Interaction Design
• Information Design
• Information Technology / System Design

45
Another Definition of IA
What is the information?
Who is using the information?
Where is the information being used?
46
A broader view of IA

• Menus
• Grocery Stores
• MP3s
• Bills/Mail
• Collections (Records!)
• Any data we try to understand by forcing an
  order or deducing a pattern (everything!)

47
A Restaurant Menu
logo
special combo
everything else
cheesesteaks
sides
drinks
cheesesteak toppings
kids menu
cheesesteak sauces
chips
(Example from Jesse James Garrett)
48
Resources

• For more information
• www.iawiki.net
• www.boxesandarrows.com
• www.adaptivepath.com
• www.aifia.org

49
Questions?