Information Architecture

1. Information Architecture Navigation

2. Goals • Organization systems • Navigation: Conventions • Login & Forms Task | Dreamweaver • Client Project 2 • Blue Archer • CONSOL Entergy Center

3. Content Organization An organizational system consists of an organizational scheme and an organizational structure. • Organizational schemes: classification systems for organizing content into groups • Organizational structures: defining the relationships among the groups

4. Exact organizational schemes • Alphabetical scheme uses alphabet to order content items (e.g., author index in a library). • Chronological scheme uses time to order the content items (e.g., books and history books). • Geographical scheme uses location to order items (e.g., floor plans, weather maps)

5. Ambiguous Organizational Schemes Content and Navigation

6. Ambiguous organizational schemes • Situations where there is more than one reasonable way to group things. e.g., Books organized by author, title, by audience, price, etc. • Types: 1) Topical 2) Task-oriented 3) Audience-specific

7. Topical organizational scheme • Organizes content by topic or subject • Encyclopedia • Chapter titles in textbooks • E.g., fiction/non-fiction, clothing - shoes, shirts, coats; mike, bread, meats, etc.

8. Topical organizational scheme Topics/Categories

9. Task-oriented organizational scheme • Example: Autobytel.com By Tasks

10. Audience-specific organizational scheme Specific audiences

11. Hybrid organizational scheme • Combines multiple organizational schemes • Quite common, but must be done with care to avoid confusion • Example: Nordstrom

12. Hybrid organizational scheme Audience Category Task

13. Hybrid organizational scheme Audience Category Task

14. Types of organizational structures • Hierarchy • Hypertext • Database

15. Hierarchical structure HOME BOOKS CLOTHING BUY MUSIC CLASSICAL FOLK REGGIE ROCK JAZZ http://www.surl.org/usabilitynews/42/hypertext.asp http://www.otal.umd.edu/SHORE/bs04/

16. Hypertext organizational structures

17. Database organizational structures

18. Navigation

19. Navigation • “Navigation isn’t a feature of the Web site, it is the Web site… without it there’s no there.” Krug, S. (2001) • Design for the user’s convenience, not yours. Nielsen, J. (2006)

20. Navigation: How do we find something? • Do you decide to ask first or browse • Search dominant users • Link dominant users • We make our way though hierarchy using signs to guide us. Source: Krug, S. (2001). Don’t make me think.

21. In a Store

22. On the Web

23. Navigation • The Web lacks cues we rely on in physical spaces. Source: Krug, S. (2001). Don’t make me think.

24. Navigation • No sense of scale – how big is this site? • No sense of direction (no left, right, up down). • No sense of location.

25. Navigation Text density??? Size/scale | Location | Direction

26. Navigation • Unlike physical spaces, on the Web, we must remember where something is in the conceptual hierarchy and retrace steps. • The importance of the Home page (Home base) • Depicting the information hierarchy • The Back button

27. Navigation: Purpose • Informs userabout what is on site. • Make a visible hierarchy to convey what is on site. • Informs userhow to use site - where to begin and the options available. • Builds user confidence.

28. Navigation Conventions

29. Navigation: Conventions • Good navigation design shows users: • where they are • where things are located, and • how to get the things they need.

30. Navigation: Conventions • It is predictable and makes people feel comfortable exploring the site. • Doesn’t need to be studied or memorized. • Reflects users impression of how information should be represented in Web space.

31. Site ID Utilities Sections Global Location Conventions Subsections Location Local navigation Small Text Navigation

32. Navigation | site map Global Navigation Sub-level Navigation Translate site map | flowchart into navigation

33. Site ID Utilities Sections Global Location Conventions Subsections Location Local navigation Small Text Navigation

34. Navigation: Conventions Sections Utilities Site ID Subsections Location

35. Navigation: Conventions • Navigation is in same location on every page. • Exceptions – the home page, forms. • Mains topics static and appear at once – users skim the choices • Keep Site ID (logo) on every page of site – upper left. • Site ID is the highest element in the hierarchy

36. Site ID Books Computer Books Perl scripting made easy

39. Conveys that items are under this section

44. 1 2 3 4

45. Navigation: Conventions • Site ID must look like a Site ID • Site ID should also function as a link to Home. • Add Search to every page: A box, a button, and Search • No unique words

46. Navigation: Conventions Primary Secondary • Primary/persistent navigation also includes space for secondary navigation.

47. Navigation: Conventions Utilities • Utilities are not part of the hierarchy • Helps users use the site • Provide information about site publisher • Only include the most important 4-5 utilities on Primary navigation • Make utilities list less prominent than sections

48. Navigation: Page names • Name your pages • Page Name should frame content unique to the page. • Names should be prominent • Name should match what user clicks.

49. Site ID Books Name pages