1. Information Architecture Organizing content

2. 1. Information Architecture 2. CSS | Dreamweaver | Login task Today’s objectives

3. SOURCE: http://www.usability.gov/methods/process.html www.usability.gov

4. Design activity Do not build without a blueprint  Measure twice, cut once Most things are build twice - first conceptually, then physically Would car designers, builders, etc. ever begin without a drawing?

5. Start with your goals, users, and tasks 1. Decide what is most important/critical. 2. All pages must answer:  a) What is the site ID?,  b) What page am I on (page name)?,  c) What are the major sections (navigation),  d) Where am I?,  e) How can I search?

6. Make sketches | Use Grid

7. Establish a type scale

9. Information hierarchy

11. Information Architecture An introduction

12. Background | remember Web users spent 27 seconds on each Web page. On average users spent 1 minute 49 seconds visiting a Web site before they moved on. Users revisited sites infrequently. A site has only a 12% probability for being revisited - once you’ve lost your user, you’ve lost him/her. Source: Nielsen & Loranger, 2006

14. Usability issues Almost ¾ of usability issues people encounter relate to basic user goals: finding, reading, and understanding information. Issues that stopped users in their tracks:  Search  Find-ability (IA, category names, navigation, links)  Page Design (Readability, layout, graphics, scrolling)  Information (content, product info, corporate info, prices)  Task support (workflow, privacy, forms, comparison, inflexible)  Fancy design

15. Issues that stopped users in their tracks

16. Information foraging theory

17. Developed by Stuart Card, Peter Pirolli Analogy of animals looking for food to analyze how humans collect information online. Humans basically lazy – conserve energy - might be survival-related (don’t exert yourself unless you have to). People want max. benefit for min. effort. Peter Pirolli, (2007). Information Foraging Theory: Adaptive Interaction with Information (Oxford University Press)

18. Information foraging theory Cost/benefit assessment of achieving a goal where:  Cost is the amount of resources consumed when performing activity and  Benefit is what is gained from engaging in activity. Source: http://www.interaction-design.org/encyclopedia/information_foraging_theory.html

19. Information foraging theory We make tradeoffs based on: 1. Gain they expect from a specific information nugget (e.g., Web page). 2. Likely cost to discover and consume that information.

20. What gain can I expect by clicking MORE or Click for Details It’s 3:30 AM. I’ve been working for 14 hours, Should I click this? It’s probably a waste of time. No, I’m going to bed.

21. Information foraging theory Information patches: The temporal and spatial nature in which information is clustered. Information scents: Determination of information value based on navigation cues and metadata. Information diet: Decision to pursue one information source over another. Source: http://www.interaction-design.org/encyclopedia/information_foraging_theory.html

22. Information Patches

23. Information foraging theory Information Scent. User’s perception of the value, cost, or access path to information obtained from the cues, such as links. Source: http://www.infovis.net/printMag.php?num=153&lang=2http://www.infovis.net/printMag.php?num=153&lang=2 http://www.interaction-design.org/encyclopedia/information_foraging_theory.html

24. Information scents: Determination of information value based on navigation cues and metadata.

25. Information foraging theory Information scent: users estimate their hunt’s likely success. Users keep clicking as long as they sense they’re “getting warmer” Scent must keep getting stronger rapidly.

26. Information Architecture IAers design spaces for human beings to live and work. IAers create a blueprint for how to organize information/website to meet users informational needs. http://articles.sitepoint.com/article/architecture-defined http://www.youtube.com/watch?v=W0VYRev7_bQ10:30

27. Information Architecture Information Architects borrow from architecture discipline - wayfinding. Wayfinding employed in disorienting places such as malls, airports, and subways - helps people get from one point to another. Goals of wayfinding to let people know:  Where they are  Where the things they’re looking for are located  How to get to those things they seek

28. Questions users ask and designers need to answer. 1. Am I in the right place? (Where am I?) 2. Do they have what I’m looking for? 3. Do they have anything better? Can I buy speakers here?

29. 1. Am I in the right place? What we do: Show the range of your offerings. Show what your Website has to offer. Your organizational scheme needs to:  orient people (this is a Website about X)  tell users where to go - these are the pages you can explore.

30. 1. Am I in the right place? Clues to indicate location. Logos remind people whose site they are on Headers Breadcrumbs Navigation bar that shows where you are Color-coded sections

31. Where They Are

32. 2. Do they have what I’m looking for? Where are they hiding it? Wayfinding – hints and clues used to figure out where we are and where we’re going. Four key elements of wayfinding:  Familiar organization system. Use an organization structure that is familiar to the user. E.g., online grocery store is organized as bakery, dairy, produce, meats, etc.  Use obvious labels. A label is a signpost to help people find something. Do not use catchy terms. (e.g., Stop sign)  Navigation that looks like navigation  Let people know where they are on the site and where they came from. Let them know how to get back.

33. Chill Dude! Imagine if… Familiar organization system? Use obvious labels? Use Conventions?

34. Do they have what I’m looking for? Where are they hiding it? Ask yourself: “What do bulk of visitors coming to my site want?” “What do I want them to be able to find easily?” Keep these items in front of users as they travel site.

35. Do they have what I’m looking for? Where are they hiding it? Global navigation

36. Do they have what I’m looking for? Where are they hiding it? Global navigation

37. Do they have what I’m looking for? Where are they hiding it? Global navigation

38. Do they have what I’m looking for? Where are they hiding it? Global navigation

39. 3. Do they have anything better? See also - provide users a shortcut to related items. See also is more useful if it links to a range of related items.

40. Do they have anything better?

41. Organize information

42. How to organize the masses Observe and talk with others/users Study other sites Card sorting  Get a list of possible topics  Ask users to categorize and label items (card sort)  Repeat with several users http://www.peachpit.com/articles/article.aspx?p=30289

43. Labeling Ideally label by: A. What the user will understand? B. Common naming conventions in the domain. C. The company’s brand. A good label doesn’t make you think. When it looks like you came up with a label in 2 seconds, then you probably have the right one.

44. Categorization Categorization has consequences (e.g., a physician finding information about a surgical procedure) Categorization provides context – buy a knife from a hunting category, accessory category, or cooking category tells you the kind of knife you’ll get. Categorization is shaped by context. How you categorize will be shaped by who you are. (Dewey decimal system Religion category has nine subsections, seven of which relate to Christianity)