A Practical Introduction to Information Architecture Presented by

A Practical Introduction to Information Architecture Presented by Stephen P. Anderson

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 2

IA in a Nutshell… u “Who are we sorting for? ” Might also ask… u ”What do they want to accomplish? ” u “What is the ideal scenario for them to accomplish their task? ” 3

Before we go too far… User Experience Design: Focuses on: u How users interact with a site u How users move through the site to find information and perform transactions u How the site fulfills user goals and expectations u How users rate their level of satisfaction 4

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 5

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 6

An IA performs the following: u u 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 7

Why Information Architecture…? u Abandoned shopping carts u Ineffective searches u Users who can’t find content u Bad experiences u Complaints to call centers u Interactions that don’t work! u Billions in lost business u Need we ask? 8

The Process: 1. 2. 3. 4. Understand the Problem Understand your Users Understand the Content Create a Navigational Framework 9

Understand the Problem: u. Goals/Objectives u. Mission/Vision u. Concept Models 10

Understand the Problem: Sample Concept Models… 11

Understand the Problem: Sample Concept Models… 12

Understand the Problem: Sample Concept Models… 13

The Process: 1. 2. 3. 4. Understand the Problem Understand your Users Understand the Content Create a Navigational Framework 14

Understand your users We do this through… u Contextual Inquiry u Task Analysis u Interviews/Questionnaires u Field Research u Reviewing server logs u Search log analysis u Role Playing u Etc. 15

Understand your users u u u User Profiles Personas User Scenarios Mental models Process Flow Task Analysis 16

Understand your users u u u User Profiles Personas User Scenarios Mental models Process Flow Task Analysis 17

Understand your users u u u User Profiles Personas User Scenarios Mental models Process Flow Task Analysis 18

Understand your users u u u User Profiles Personas User Scenarios Mental models Process Flow Task Analysis 19

Understand your users u u u User Profiles Personas User Scenarios Mental models Process Flow Task Analysis 20

Understand your users u u u 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 21

The Process: 1. 2. 3. 4. Understand the Problem Understand your Users Understand the Content Create a Navigational Framework 22

Understand the Content: u u Content Inventory – A complete list of all the content that information space holds and will hold Card Sorting – activity 23

Understand the Content: u u Content Inventory – A complete list of all the content that information space holds and will hold Card Sorting – activity 24

The Process: 1. 2. 3. 4. Understand the Problem Understand your Users Understand the Content Create a Navigational Framework 25

Creating A Navigation Framework: Answers 3 Questions: Where am I? Where have I been? Where can I go? 26

Creating A Navigation Framework: Ways to organize content: u By Hierarchy (most common!) 4 Global Navigation 4 Local Navigation u u u u 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) 27

Creating A Navigation Framework: 28

Creating A Navigation Framework: Schema should be consistent! Books | Movies | Toys | Electronics | About Us (which one doesn’t belong? Why? ) 29

Creating A Navigation Framework: REAL WORLD EXAMPLE: Products In-Stock Jewelry Watches Made to Order Jewelry Watches In-Stock OR Products Jewelry Watches Made to In-Stock Order 30 Made to Order

The Process: 1. 2. 3. 4. Understand the Problem Understand your Users Understand the Content Create a Navigational Framework … and Labeling 31

Labeling What is familiar? u Services? Capabilities? Expertise? u About Us? Our Team? Company? u Coke? Pop? Cola? 32

Labeling What is accurate? u Designs? Products? 33

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

Labeling REAL WORLD EXAMPLE: “Find a Doctor” OR “Locate a Provider” ? 35

Create a Navigational Framework From this work, we deliver. . . u Site Maps u Wireframes 36

Create a Navigational Framework From this work, we deliver. . . u Site Maps u Wireframes 37

Create a Navigational Framework 38

Create a Navigational Framework 39

Create a Navigational Framework 40

Create a Navigational Framework 41

42

What type of person makes a good IA? 43

Related Fields… u Usability/ Interaction Design u Information Technology / System Design 44

Another Definition of IA… What is the information? Who is using the information? Where is the information being used? 45

A broader view of IA… u Menus u Grocery Stores u MP 3 s u Bills/Mail u Collections (Records!) u Any ‘data’ we try to understand by forcing an order or deducing a pattern (everything!) 46

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

Resources For more information: u www. iawiki. net u www. boxesandarrows. com u www. adaptivepath. com u www. aifia. org 48

Questions? 49