Exit tutorial


HTML Tutorial
Web Design - Good Practice
Site Navigation
Consider these factors when navigating a site:
  • First screens
  • Navigational tools: graphics, text and frames
  • Consistency
First Screens

The first screen a visitor sees is the first impression they will have of a site. Bear in mind that the first screen they see might not be the home page.

The most important information elements should be placed in the first screen because visitors may have limited screen area. Also, confine the home page to no more than two or three screens worth of material. People dislike scrolling.

Display important information prominently.

If it isn't important, it shouldn't be on the home page. It probably shouldn't be on any page, but the designer has more room to maneuver with subsidiary pages.

Navigational Tools: Graphics, Text and Frames

There are three main navigational tools which may be used singly or in combination:

  • Navigational graphics
  • Text links
  • Frames

Navigational Graphics: There are two classes of navigational graphics - buttons and imagemaps.

A button is a graphic that is also link. Visitors should be taken to another page when they click a button. Buttons are powerful navigational tools. Use them carefully. When using graphics, for example, ensure people don't confuse them with links.

An imagemap is an image that is treated as a navigational tool by the browser. When visitors click the imagemap, they should be taken to a new page. Ensure it is clear to visitors where they are going when they click on a particular location in an imagemap.

Text Links: Text links make excellent navigational tools and are extremely important. They are even more important on pages that use graphics and imagemaps as links.

If graphics or imagemaps are used as links, then corresponding text links must also exist.

There are two reasons for this assertion. First, if the graphics on a page total more than 35K, the text will appear before the images and visitors can click a text link and proceed before the image loads. Second, if the page contains an imagemap and visitors hit the Stop button before the imagemap loads, they won't know where they'll go when they click. If there are no text links on the page, they'll either have to reload the page or click and hope for the best.

Frames: Frames were created to ensure text links remain static so they don't constantly have to be reloaded.

In most cases I dislike frames, but under certain circumstances they make sense. For instance, the designer may wish to feature links from other sites, but doesn't want visitors actually leaving the site. In this case, when a visitor selects a link to a foreign site, it will target the designer's frame window, but the local site's buttons and links will remain visible.

Consistency

Each navigational tool should have a consistent look and location. Navigation should always be predictable. Create navigational tools that:

  • Are in the same place on each page.

  • Have the same look. The size and color of buttons should be consistent. Using buttons with various sizes and colors appears unprofessional.

  • Will propel the visitor to the desired information in as few clicks as possible. Bear in mind the "Click Annoyance Factor" - the maximum number of clicks the average person will execute to access desired information. Personally, if I can't get to the information within three clicks and the site doesn't feature a search engine, I'll go elsewhere.

[Back to the Stage 5 Index]