1. Information Architecture Navigation

2. Goals 1. Organization systems 2. Navigation: Conventions 3. Login & Forms Task | Dreamweaver 4. 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 Category Audience Task

13. Hybrid organizational scheme Category Audience Task

14. Types of organizational structures Hierarchy Hypertext Database

15. Hierarchical structure CLOTHINGBOOKSBUY MUSIC HOME ROCK JAZZ CLASSICALFOLKREGGIE 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 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 1. No sense of scale – how big is this site? 2. No sense of direction (no left, right, up down). 3. No sense of location.

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

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 user about what is on site.  Make a visible hierarchy to convey what is on site. Informs user how 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 Sections Utilities Subsections Location Local navigation Small Text Navigation Global Location Conventions

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

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

34. Site ID Sections Utilities Subsections Location Navigation: Conventions

35. 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/persistent navigation also includes space for secondary navigation. Primary Secondary

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

51. Navigation: You are here Tell the user his/her location – you are here.

52. Navigation: Breadcrumbs Use “>” between levels Use small type Special visual treatment for last item

53. Navigation: Links | Repeated information Placing duplicate links all over the page decreases likelihood that viewers see them. Fewer objects on the page, the more likely people will notice them. With many competing elements, all items lose prominence.

54. Navigation: Conventions | Words People tend to skip meaningless words. Remove extraneous words. Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences. Help people quickly differentiate links by giving them informative names.

55. Navigation: Your page should answer these questions. What is the site ID? What page am I on (page name)? What are the major sections (global navigation) Where am I? (global and local navigation) How can I search?