1 / 43

To navigate

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.

sapplegate
Download Presentation

To navigate

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related