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

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: In-StockMade to Order JewelryWatchesJewelryWatches In-StockMade to Order JewelryWatches In-StockMade to Order Products OR

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

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 cheesesteak toppings cheesesteak sauces everything else chips drinks (Example from Jesse James Garrett)

48 Resources For more information:

49 Questions?