Navigation Styles
by Agatha Taormina

 

Table of Contents

Consistency
Usability
Navigating Site Subsections
Frames
Examples of Navigation Styles
--Bread Crumbs
--Saturation
--Bottom Only
--Bottom with Submenus
--Top with Submenus
--Side
--Side with Bottom Submenus


The keys to navigation are consistency and usability.
Consistency
  • Location of the navigation bars on a page
  • Appearance of the navigation bars on a page
Usability

Ease of locating navigation bars

  • Most common places for bars are the top, bottom, or left side of a page.
  • Some designers are now putting a bar on the right side of the page; However, I think that location interferes with the natural eye movement of reading from left to right.

Ease of using navigation bars:

  • Navigation links should be of sufficient size.
  • Navigation links should have sufficient space between them.
  • Navigation links should have clear and consistent labels.

Ability to always return to an entry point, usually the site's home page

Navigating Site Subsections

Think about the organizational structure of your site.

Most largish sites have subsections.

In your site these subsections might be the branches of your storyboard.

Someone browsing through a subsection is likely to want to browse through the subsection at will.

Thus perhaps you will want to insert two navigation bars on your pages:

  • a main navigation bar with your major site sections and a link to your home page or site entry point
  • a subsection navigation bar that allows the visitor to jump from one page to another in a subsection without first having to return to the home page of that subsection.
Frames

Framesets are pages that function as placeholders for a number of separate web pages (usually no more than three) that all appear at one time--each in its own frame--on a monitor screen.

With frames, for example, you can maintain a banner in a top frame and change the content in the frame below it.

Frames are often used for navigational purposes.

The Blackboard course management system, for example, uses a left hand frame for the buttons to all the major sections of a course site. Clicking on a button in the left hand frame changes the page in the main frame to the right.

Frames are also often used to good effect as a narrow band for navigational purposes at the very top or very bottom of a monitor screen.

Problems with frames:

  • they are not particularly user friendly.
    • voice recognition software used by the visually impaired is not able to process frame content
    • with some browsers it is often difficult to print the desired frame
    • it is a bit tricky to write the code to have a link in one frame open in a second frame
  • Frames can clutter a screen
    • regardless of their size, frames do reduce the usable space on a monitor screen
    • small screens look especially cramped
    • often users of frames design full size pages that will appear in the largest frame, but the pages will be cramped or will horizontally scroll because the main frame is narrower than the entire monitor screen.
  • Frames reduce your control over your navigation bar: it is difficult without a lot of special coding to show, for example, a blanked out link to the page you are currently on.
Examples of Navigation Styles

On the web are a number of common navigation styles. Which one you choose or choose to adapt will depend on a variety of factors:

  • your sense of design and the way you want your site to look
  • the organizational structure of your site
  • the way your site will ordinarily be used

Below are some explanations of navigation styles and examples of the way they function on a web site.

Screen shots will open in new windows. The web pages shown in these new windows are illustrations. The links do not work.

To return to this screen, close the new browser window.

Bread Crumbs

Like Hansel and Gretel in the fairy tale, a Bread Crumb navigation bar at the top of a page shows you where you are in a site and the site layers above your current location.

The NVCC Loudoun Campus web site uses bread crumbs

Saturation

The Personal Web Works site features navigation bars on every part of the screen--top, bottom, left side--where one could conceivably look.

Within the site sections, the author has also provided submenus with links to the other pages in that subsection.

This navigation style works because the navigation links themselves are either low resolution graphics or text links--very unobtrusive and quick-loading.

Bottom Only

Most web surfers expect to see a navigation bar at the bottom of a screen, and indeed that is the most common location of a navigation bar.

The Autumn site uses rollover buttons to link every page to the main site menu

Bottom with Submenus

Probably the most useful navigational schemes are those which allow a visitor to move freely from one major site section to another and at the same time allow a visitor to move freely within a site section without having to continually click back through an intermediate cover page.

The Philly Phanatic site uses such a navigational scheme.

Top with Submenus

Another popular navigation scheme uses a top main menu navigation bar and just below it a navigation bar for the menu for the other pages in a particular site section.

Gaily is a site that uses such a scheme.

Side

One of the most popular uses of frames is for the creation of a left side navigation bar.

However, it is quite easy to create your own side navigation bar by using tables for both the navigation bar and the main section of your page.

Sue's Audio Adventures uses such a navigational scheme.

 

 

Side with Bottom Submenus

Another common navigational scheme uses a left side navigation table for the main menu and supplements it with a bottom text navigation bar for the section submenus.

Diego's Web Site uses such a navigational scheme.

Remember to choose a navigation scheme and maintain it consistently throughout your site.

The easiest way to ensure consistency is to create a page template which includes the navigation scheme on it.

 

Web Design CenterReadings MenuTop of Page

Web Design Center Readings
Last Revised: March 30, 2007
©2001  Agatha Taormina