1. To navigate ● To steer or manage ● Generally a ship or an airplane ● To choose a path of travel over the Web. ● Navigation: choose a path through a website's information space ● Key aspect of usability ● Goal is to help users to – Know where they are – Give conficence when choosing where to go next

2. Navigation Design ● Site-level navigation: making it easy for the user to get around the site ● Page-level navigation: making it easy for the user to find things on a page ● A navigational system is a visual representation of an organizational structure

3. Navigation: connections ● Good navigation builds on good content organization – Choose a navigation system that reflects the content’s organizational structure – Based on users interviews ● Visual design and navigation design are interrelated – Choose visual navigation elements that build context for a user

4. Strategies to create navigation system ● Choose appropriate navigation system – To reflect content organization ● Choose visual navigation system – To build context for the user ● Take advantage of built-in services provided by Web borusers

5. Three types of navigation systems ● Hierarchical – Derived from hierarchical organizational structure – Top down view ● Ad hoc – Hyperlinks ● Database – Search engines – Bottom down view ● The most common is hierarchical, with many ad hoc links added

6. Rare to use only one ● Most websites build on a judicious combination of these three, with one dominant theme ● Hierarchical plus hyperlinks very common

7. A pure hierarchy is rare We add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level

8. Global navigation ● For a small site, possible to show the major links on every page Global navigation

9. Global navigation bar can be vertical Global navigation

10. First, Second, and Third level pages ● A navigation bar is necessary if the primary links are not already displayed as part of the page layout ● Provide a link back to the home page in secondary pages ● Small sites may be served efficently by a global navigation system ● A secondary navigation bar to third-level pages, is useful for a more complex system

11. Showing more levels in the hierarchy ● Drop-downs or pull-outs can show the next level

12. Breadcrumbs ● Record of user's trail through the site – You are here, and this is where you came from ● Consistency in placement of navigation bar across pages on the site is very important

13. Breadcrumbs show user “This is where you are, how you got here” Breadcrumbs

14. Subsites ● Required for sites with great complexity ● Subsite – Collection of pages within website that can share a common navigational system ● Perhaps different from the rest of the website ● Links in local navigation give access to subsite ● Top-level navigation whitin subsite should afford global navigation

15. Many sites have subsites Subsites

16. Ad-hoc navigational system ● Hierarchical system can't accommodate all relationships among content items on a site ● Insert ad-hoc links once content is in place – These afford connections required by content relationship – More editorial than architectural ● Added, perhaps after testing ● Convert words or phraces to hyperlinks ● Make them into bullets, or place them at beginning or end of paragraph

17. Ad hoc links are very common

18. Batabase-driven navigational system ● Implements database organizational structure – Bottom-down approach ● Often used as a facility ancilliary to the main navigational system ● Rarely used as the only navigational system – Even search-engine sites have additional navigation to supplement a purely database-driven system

19. The most familiar example of database navigation: Google

20. Building context ● Helping users understand where they are and where they are going while visiting a website ● Navigational elements helps build context – Visual organizations of text and graphics that display user's options and current position in a site – Bars – Menus

21. Navigation bars ● Collection of links group together on a page – Text based – Graphical ● Have ability to display context clearly ● But, take longer to download ● Problem for limited bandwidth connections – Every image should have named ALT attribute ● Hihger maintenance cost – Choice depend on intended audience, access to tools, and expected fluidity of site

22. Graphical navigation bar

23. Building context for the user with navigation bars

24. Graphical navigations ● Icons or metaphores as links in navigation bar – Always include text to explain them ● Extremly difficult to represent concepts pictorially that are universally understood

25. Be careful with metaphors: what do these mean?

26. Intended meanings. Moral: add words, too!

27. Graphical navigations ● Skilled designers created the icons ● Test users where from the same company – Had very similar user profiles ● It is this hard to creat effective icons for a homogeneous group, – Imagine how hard is it to creat them for a larger group ● Best to include accompanying text explaining the icon

28. So add words!

29. Effective Labels ● Look at the results of your card-sorting interviews – Best resource – Participants named the piles – Patters or trends in those names will be usefull in creating navigation labels ● Labeling systems on the Web – There are standard meanings for certain lables

30. Some standard meanings Label and meaning ● Home: the main entry point of a Web site, generally containing the top-level links to the site ● Search: find related pages by supplying a word or a phrase ● About Us: information about the company that created the site ● Shop: browse for merchandise ● Check Out: supply shipping and billing information, complete transaction

31. Consitent navigation ● Use labels consistently throughout the site ● Consistency is key – Choosing navigation labels – Placing navigation bars on each page ● Conventions for placing navigation elements are emerging – “home” -- upper left corner or bottom center – Internal site links on the left side

32. Menus ● Prensent links as – Drop-down list – Scrollable list ● As navigation elements, menus helps reduce number of clicks required to reach a page ● Con help pack large number of options into a single page

33. Menus pack in a lot of information; note the dropdown from Software

34. Menus ● Big advantage by reducing the number of clicks ● Two disadvantges: – Not all options are visible at one time – The user must act before seeing the menu ● Not all users know to do that ● Provide efficient navigation alternative ● Take great care in selecting lables for menu items

35. Site maps ● Textual – Takes work – For a big site, must be selective ● Graphical – Cool—for a small site. ● A site map is no substitute for good navigation

36. Graphical site map example

37. Frames ● A frame is an area of the browser window that stays visible as the user moves from page to page ● A simple way to provide global navigation ● But hogs screen real estate: you can’t do anything else with that space ● May not print ● Hard (impossible?) to bookmark ● Used much less often than formerly ● See Jakob Nielsen, “Why Frames “Suck (Most of the Time)”

38. Built-in browser services ● History of pages visited ● Back button ● Forward button ● Color coding of links – Unvisited – Visited – Active ● Don’t mess with the convention that blue is an unvisited link.

39. Page-level navigation aids ● Remember proximity, alignment, consistency: make the layout obvious ● Make size of text field box appropriate to the amount of data – How many forms have some box which is MUCH too small for necessary input? ● What were those people thinking? ● Users do not like text field boxes that forces them to scroll horizontally

40. Page-level navigation aids ● Mark required fields clearly, – with * or Required ● Make button placement consistent: – before or after its associated labels ● Do not force the user to figure out correct button label association ● This waste user's time ● Increases input errors

41. Make input-error reports clear ● Best practice is to present form to user again with – All input correctly in place – Message explicitly identifying the problem ● Perhaps change the color of the offending box ● Show as many errors as possible on one page; – don’t make user correct one error per attempt ● Consider using “Go to the next error” – A link to the field causing the problem with and explanation and a link to the next error

42. Make input-error reports clear ● Don’t make user re-enter correct data ● Sounds obvious, huh? – Then why are so many forms terrible? ● Sales are lost at this point, – in big quantities

43. Summary ● Effective navigation is a combination of – good content organization and – good visual organization ● The main navigational system is hierarchical, with a lot of hyperlinks added ● Learn from all the bad sites you’ve suffered