chapter 6: navigationcopyright © 2004 by prentice hall 6. navigation design site-level navigation:...

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


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


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


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


Three types of navigation systems

HierarchicalDerived from hierarchical organization

Ad hocHyperlinks

DatabaseSearch engines


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


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


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

Global navigation


Global navigation bar can be vertical

Global navigation


Showing more levels in the hierarchy

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


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


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

Breadcrumbs


Many sites have subsites

Subsites


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


The most familiar example of database navigation: Google


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


Building context for the user with navigation bars


Graphical navigation bar


Labels vs. Graphics

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


Be careful with metaphors: what do these mean?


Intended meanings. Moral: add words, too!


So add words!


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


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


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


Menus pack in a lot of information-

Note the dropdown from Software


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


Graphical site map


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


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.


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


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


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

chapter 6: navigationcopyright © 2004 by prentice hall 6. navigation design site-level navigation:...

Documents

prentice hallchapter

prentice hallthe

prentice hallrare

prentice hallshowing

prentice hallad

prentice hallbreadcrumbs

prentice hall6

prentice hallmany sites