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