Information Architecture

1. Information Architecture Organizing content

2. Today’s objectives Principles of Information Architecture AE Write-up | Team meetings IDD Steps 2-3 | Step 4 Html | CSS workshop Room 205: Room 345: MW 9:00-9:50AM MW 9:00-10:50AM MW 1:00-2:50PM MW12:00-1:50PM

3. Reminders for final project • Do not build without a blueprint • Measure twice, cut once • Most things are built twice - first conceptually, then physically

4. Start with your goals, users, and tasks • Decide what is most important/critical. • All pages should 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?

5. Make sketches | Make wireframes | Make comps | Use Grid Source: http://www.uxbooth.com/

6. Make sketches | Make wireframe | Make comps | Use Grid 960.gs

7. Establish a type scale Be consistent

8. Heading 1 – 60pt Heading 2 – 48pt Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Heading 3 – 36pt Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Heading 4 -24pt Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

9. Create information hierarchy

10. Create information hierarchy

11. Information Architecture An introduction

12. 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 Source: Nielsen & Loranger

13. Information foraging theory • 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)

14. Information foraging theory I really like those flowers over there and they’re big but the grass is closer…

15. Cool Stuff What gain can I expect by clicking cool stuff. What if I go there and it’s not what I want – too much effort.

16. Information Architecture http://articles.sitepoint.com/article/architecture-defined IAers create a blueprint for how to organize information/website to meet users informational needs.

17. Information Architecture First Principles of Web Design First Principles of Web Design By Christina Wodtke http://www.peachpit.com/articles/article.aspx?p=30600 Principle #1: Design for Wayfinding Principle #2: Set Expectations and Provide Feedback Principle #3: Ergonomic Design Principle #4: Be Consistent and Consider Standards Principle #5: Provide Error Support—Prevent, Protect, and Inform Principle #6: Rely on Recognition Rather than on Recall Principle #7: Provide for People of Varying Skill Levels Principle #8: Provide Meaningful and Contextual Help and Documentation

18. Principle #1: Design for Wayfinding http://www.youtube.com/watch?v=W0VYRev7_bQ • Wayfinding – hints and clues used to figure out where we are and where we’re going. • Let people know: • Where they are • Where the things they’re looking for are located • How to get to the things they seek

19. Principle #1: Design for Wayfinding • 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. • 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.

20. Principle #1: Design for Wayfinding • Colored navigation for location and to navigate space. • Colored tab identify section.

21. Principle #1: Design for Wayfinding

22. Principle #1: Design for Wayfinding • Color coding • Hierarchy

23. Principle #1: Design for Wayfinding I can get to other places here I can find articles here. I can find additional stuff here. Layout design suggest areas for user to go

24. Principle #1: Design for Wayfinding Global navigation - navigation tools consistent throughout a web site. What do the bulk of the visitors want? Put it in front of users.

25. Principle #1: Design for Wayfinding What do the bulk of the visitors want? Global navigation - navigation tools consistent throughout a web site.

26. Principle #1: Design for Wayfinding How to Get to Those Things They Seek? • Good navigation design • Links look clickable • Links have clear labels • Labels set expectations of what lies beneath • Links are grouped

27. Principle #1: Design for Wayfinding How to Get to Those Things They Seek? • Good navigation design • Links look clickable • Links have clear labels • Labels set expectations of what lies beneath • Links are grouped Cool Stuff

28. Principle #2: Set Expectations and Provide Feedback What is in the shopping cart?

29. Think of your designs in terms of a conversation with another person. Be attentive, respectful, helpful, give feedback... Imagine giving your credit card to this person No feedback

30. Think of your designs in terms of a conversation with another person. Be attentive, respectful, helpful, give feedback... Or worse yet this person

31. Principle #2: Set Expectations and Provide Feedback

32. Principle #3: Ergonomic Design Consider things such as: Excessive scrolling Placement | separation of commonly used items Colors Excessive eye scans Text size Auto play sounds Unnecessary animation

33. Principle #4: Be Consistent and Consider Standards People bring prior knowledge, experience and expectations when they visit your site. Consider users’ expectations in your design.

34. Principle #4: Be Consistent and Consider Standards Logo placement | Clickable to go home Job opportunities

35. Principle #4: Be Consistent and Consider Standards Logo placement | Clickable to go home Job opportunities

36. Principle #5: Provide Error Support—Prevent, Protect, and Inform

37. Principle #6:Rely on Recognition Rather than on Recall

38. Principle #6:Rely on Recognition Rather than on Recall Placed in front of the user so he/she can see it and does not have to remember.

39. Principle #6:Rely on Recognition Rather than on Recall Recall But sometimes you do not even know the proper search term to type – so this drop-down menu relies on user recognition rather than recall.

40. Principle #7:Provide for People of Varying Skill Levels Options for advanced users

41. Principle #8: Provide Meaningful and Contextual Help and Documentation Place information in clearly labeled locations, rather than grouping it all under the generic and menacing "Help."

42. Principle #8: Provide Meaningful and Contextual Help and Documentation Place information in clearly labeled locations, rather than grouping it all under the generic and menacing "Help."