Chapter 6: Navigation Copyright © 2004 by Prentice Hall

6. Navigation Design

Site-level navigation: making it easy for the user to get around the sitePage-level navigation: making it easy for the user to find things on a page

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Navigation

Choosing a path through the web site’s information spaceGoals:

Let user know where he isGive user confidence in knowing where he is going next

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Navigation: Connections

Good navigation builds on good content organization (Chapter 4)

Choose a navigation system that reflects the content’s organizational structure

Visual design (Chapter5) and navigation design are interrelated

Choose visual navigation elements that build context for a user

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Navigation: Connections

A Navigational System is a visual representation of an organizational structureNavigation Bar: collection of links grouped together on a pageSite-level navigation vs. Page-level Navigation

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Three types of navigation systems

HierarchicalDerived from hierarchical organization

Ad hocHyperlinks

DatabaseSearch engines

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Rare to use only one

Most websites build on a judicious combination of these three, with one dominant themeHierarchical plus hyperlinks (ad hoc) is most common

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

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

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Global navigationFor a small site, it may be possible to show the major links on every page

Global navigation

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Global navigation bar can be vertical

Global navigation

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Showing more levels in the hierarchy

Drop-downs or pull-outs can show the next level

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Other items

Breadcrumbs: a sequence of links showing user how he got to current locationSubsite: a collection of pages that share a common navigation system, perhaps different from the website as a whole

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

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

Breadcrumbs

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Many sites have subsites

Subsites

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Ad hoc links are very common(created for one specific purpose)

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

The most familiar example of database navigation: Google

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Building Context

Helping the user to understand where he is and where is can go in the web siteNavigation can be used to build context

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Building context for the user with navigation bars

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Graphical navigation bar

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Labels vs. Graphics

Graphical representations are nice but slower to downloadShould always include label with graphicBe careful in selecting both labels and graphicsConsider conventions

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Be careful with metaphors: what do these mean?

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Intended meanings. Moral: add words, too!

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

So add words!

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Some Standard Conventions

Home: the main entry point of a Web site, generally containing the top-level links to the siteSearch: find related pages by supplying a word or a phraseAbout Us: information about the company that created the site

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Some Standard Conventions

Shop: browse for merchandiseCheck Out: supply shipping and billing information, complete transactionContact Us: initiate interactive dialog with customer representative – phone or email

Consistency + Conventions

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Menus

List of possible links Usually in drop-down formProvides many more options without clutter

DisadvantagesNot all options are visibleUser must act to activate a menu

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Menus pack in a lot of information-

Note the dropdown from Software

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Site mapsGraphical representation of the siteTextual

For a big site, must be selective

GraphicalA site map is no substitute for good navigationTrend away from site maps

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Graphical site map

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Frames

Frame: an area of a browser window that stays visible as the user moves from page to pageSimple way to provide global navigation: scrollsBut hogs screen real estate: you can’t do anything else with that spaceMay not printHard (impossible?) to bookmarkUsed much less often than formerlySee Jakob Nielsen, “Why Frames “Suck (Most of the Time)”

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Built-in browser services

Take advantage of theseHistory of pages visitedBack & Forward ButtonsColor coding of links

Unvisited vs. Visited vs. Active

Don’t mess with built in conventions

e.g. Blue is an unvisited link.

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Page-level navigation aids

Remember proximity, alignment, consistency: make the layout obviousMake size of text box appropriate to amount of dataShow which fields are required with * or Required Use error messagesMake button placement consistent: before or after its associated text

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Make error reports clearExplicitly state the problem Perhaps change the color of the offending boxShow as many errors as possible on one page; don’t make user correct one error per attempt to send the dataDon’t make user re-enter correct dataSounds obvious, huh? Then why are so many forms terrible?Sales are lost at this point, in big bad quantities

Chapter 6: Navigation Copyright © 2004 by Prentice Hall

Summary

Effective navigation is a combination of good content organization and good visual organizationThe main navigational system is hierarchical, with hyperlinks addedYou can learn from all the bad sites you’ve suffered with