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

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

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

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

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

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

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

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

Global navigation bar can be vertical Global navigation

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

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

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

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

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

Many sites have subsites Subsites

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

Ad hoc links are very common

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

The most familiar example of database navigation: Google

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

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

Graphical navigation bar

Building context for the user with navigation bars

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

Be careful with metaphors: what do these mean?

Intended meanings. Moral: add words, too!

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

So add words!

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

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

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

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

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

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

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

Graphical site map example

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)”

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.

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

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

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

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

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