Communication Services > Web > Web Based Training
Designing Navigation

WBT Contents

 Approved Template
 Recommended Tools
 Design Process
 Instructional Events
 Interactive Questions
 Threaded Discussion
 WBT Journals









The easier the learners navigate through a site the more "in control" and "empowered" they feel about their learning.

There are several different ways to coax a learner to progress through a project's navigation the way you want them to go. Some of the strategies depend on your audience but they are also dictated by how your information is parsed.

Navigation design should not be attempted until after a outline and flowchart have been constructed.

Avoid using graphic symbols as menu links. Graphics take longer to download and what they represent are not always clear.

The post popular method is to have a list of menu items that have a number in front of each item. Its not fancy, but works.


1. Objectives
2. Research
3. Outline

Another popular method but does not feel so obvious is using letters before each menu item.

Being direct also works. Have a note at the bottom of your menu list that suggests that the learners proceed through the items in which they are ordered.

A second method that works where the project does not need to be progressed through in a particular order is to list your menu items with bullets (just as this site does).

Depending on your project and your audience you might want to consider a graphic other than a big dot. Many sites use a triangle for a clean professional look that is reminiscent of the Windows and Macintosh hierarchical items list.

If you want your site to be distinct and stay in the memory of your learners you might want to consider an alternative. Consider a graphic that would represent the content of your site. Unlike the sample below, use the same graphic for each menu item.

It is a mosquito
It is the "Ounce of Prevention" Germ
A syringe

As seen with the first example it is so small it is not recognizable as a mosquito. Think about what image will work and what will not. Remember to take into account the page's background color.

Consider descriptive text associated with the link. Because web pages take time to download the learner does not want to go to a page that will not be relevant to what they desire or feel they need. Known as "a description," this text gives a preview of what is to come if selected.

As an example see the first page of this module.

External links. Traditionally people use the net because it is possible to link to external material. However, with WBT that should be avoided because they:

  • Disrupt the visual flow of learning.
  • Links on the outside site can lead the learner off track.
  • You don't control the information on the external site (lots of nasty surprises can occur).

These warnings should not stop you from linking externally but should be justified (The sample WBT template shows examples).

When you do need to link, it has become standard to warn the learner, and open the external site in a new browser window. This is a technique easily done in all the popular HTML editors.

(Select one of the journal articles recommended on the Journal page to see an example of this method).


Intranet Home | CDC Intranet Home
NCID Internet Home | CDC Internet Home