1 / 49

A Practical Introduction to Information Architecture

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.

oswald
Download Presentation

A Practical Introduction to Information Architecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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: • 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 doesn’t 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. What type of person makes a good IA?

  43. Related Fields… • Usability/ Interaction Design • Information Design • 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… • Menus • Grocery Stores • MP3s • Bills/Mail • Collections (Records!) • Any ‘data’ we try to understand by forcing an order or deducing a pattern (everything!)

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

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

  48. Questions?

More Related