Lesson 8:Navigation

Overview

The manner in which you display your web site’s navigation is crucial to its overall usability.

Users need a clear path to the information that they seek. This path should minimize both the time and

complexity of locating relevant information. Metaphors, navigation bars, and text links are

among the features that facilitate navigation.

Metaphors Using visual metaphors may

assist you in organizing navigation options.  For example, a hotel may

arrange its content options around the image of an actual check-in desk.

However, if a visual metaphor does not suit your web site, do not attempt to use one. Weak metaphors are unlikely

to assist users in navigation.

www.drippinginfat.com: Example of a site metaphor.

Navigation Bars Given the proliferation of navigation

bars across software programs and operating systems, using a navigation bar on your site presents the user with a familiar tool.

Horizontal navigation bars can logically organize content and occupy very little screen space They can be expanded through drop-

down menus that further help the user orient the site. 

Vertical navigation bars offer the same benefits, but consume horizontal space that could be instead used for body text.

Ebay.com & FoxNews.com Examples of vertical and horizontal navigation bars.

Text Links Text links may use words,

phrases, or sentences to direct a user to another section or page of the site.

Text links may appear almost anywhere on a site, including: Side bars Embedded within body text As “breadcrumbs” tracing

the user’s path Headings Progress bars Expandable outlines

drudgereport.comText links are used throughout the web site to direct users to relevant content.

amazon.comA progress bar allows users to move through search results at varied intervals.

newegg.comBreadcrumbs present users with the path they have taken to reach a page.

Alternative SolutionsIf a user cannot find relevant information by using a navigation bar, text link, or icon (see Lesson 9), some alternative navigation techniques include:

Site Maps Allow users to understand the scope

and structure of the site Can be presented in both graphical and

text forms

Indexes Like indexes found in books, site

indexes provide users with an alphabetical listing of the site’s topics neu.edu

A site index provides an alphabetical listing of the site’s topics.

Alternative Solutions

Table of Contents Similar to a site map, a

table of contents provides users with a list of site topics

The topics are ordered by the user’s anticipated path through the site and grouped by hierarchical relationships

apple.comA site map allows users to see how content is organized.

plcs.netA table of contents orders the site’s topics in a logical manner.

Alternative Solutions

Search If your site is very large, a search

function will allow users to quickly find what they are looking for

However, search functions are not entirely foolproof Users may search for terms that are

either too broad or too restricted As a result, avoid making a search

function your central navigation method

sephora.comExample of a simple search box.

priceline.comExample of a parametic search.