A Practical Introduction to Information Architecture
Post on 03-Feb-2016
28 Views
Preview:
DESCRIPTION
Transcript
A Practical Introduction to Information Architecture
Presented by Stephen P. Anderson
2
Instructions1. 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 Garrett’s“The 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 can’t find content Bad experiences Complaints to call centers Interactions that don’t work! Billions in lost business Need we ask?
9
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. Create a Navigational
Framework
10
Understand the Problem:
Goals/ObjectivesMission/VisionConcept 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:
1. Understand the Problem2. Understand your Users3. Understand the Content4. 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:
1. Understand the Problem2. Understand your Users3. Understand the Content4. 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:
1. Understand the Problem2. Understand your Users3. Understand the Content4. 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 doesn’t belong? Why?)
30
Creating A Navigation Framework:REAL WORLD EXAMPLE:
In-Stock Made to Order
Jewelry Watches Jewelry Watches
In-Stock Made to Order
Jewelry Watches
In-Stock Made to Order
Products
ProductsOR
31
The Process:
1. Understand the Problem2. Understand your Users3. Understand the Content4. 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
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…
Who is using the information?
What is 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
cheesesteaks
logo
sides
kids menu
special combo
cheesesteaktoppings
cheesesteak sauces
everything else
chips
drinks
(Example from Jesse James Garrett)
48
Resources
For more information: www.iawiki.net www.boxesandarrows.com www.adaptivepath.com www.aifia.org
49
Questions?
top related