The traditional way to provide site navigation is by having navigation bars in the sites. These bars consist of links to appropriate pages within the sites. Some sites group the links in horizontal rows. Other sites group the links in vertical bars. Still other sites place the links inside graphics, a combination known as image maps.
Different Types of Navigation Bars
Text-Only Navigation Bar. Some people surf with graphics turned off, or use browsers with no graphics capability. It is customary to have text-only navigation bars in addition to graphical bars. Text-only bars are created as stand-alone navigation bars that are not associated with icons. These stand-alone bars usually have either vertical lines or square brackets that separate the links. The bars are usually placed at the bottom of the pages.
Examples of Text-Only Navigation Bar
 |
 |
|
Figure 6a. This is a vertical text navigation
bar used by About.com.
|
Figure 6b. This is another text navigation
bar used by About.com. This is an example of horizontal text navigation
bar.
|
Graphics Navigation Bar. Choosing a meaningful icon that can represent a link can be challenging. The developer should always add an alt tag to any images that are used in the site for visitors who have turn off the graphics option or are using non-graphic browsers. Image maps are also commonly used as a method of navigation throughout the site. It is often a good idea to cut up the image into smaller images and put them back to together using table cells. This can make maintenance easier since we can just make changes to the part that is necessary and smaller images can also reduce the loading time of a page.
Example of Graphics Navigation Bar
 |
|
Figure 7. This is a graphics navigation
bar that Amazon.com used to assist the user to browser their site.
|
Graphics Navigation Bar with Rollover Effects. This kind of navigation bar is very similar to the graphics navigation bar except there is an additional feature to this. When the user moves the mouse over to an image that is linked, the state of that image will change from an off state to an on state. This state change will execute an image swapping process. When the user moves the mouse off the image, the reverse will happen and the image will be swapped back to the original one. A survey showed that rollover effects not only add visual interest to a Web page but also improved click-through rates by approximately 30% (Kaiser, 2000).
Example of Graphics Navigation Bar with Rollover Effects
 |
 |
|
Figure 8a. This is the off state of a graphics
navigation bar used by SAIC. Without the movement of a mouse, this
navigation bar looks exactly like a graphics navigation bar.
|
Figure 8b. This is the on state of the
graphics navigation bar used by SAIC. When the visitor moves the
mouse over to a clickable image, the image will be highlighted.
|
Advantages
Text-Only Navigation Bar. Text navigation bar is easy to create and it can be displayed appropriately to any kind of Web browsers. Text navigation bar can also reduce the loading time of a page.
Graphics Navigation Bar. Graphics navigation bar is more interesting than text navigation bar. A good choice of icon for the navigation bar can increase the usability of the page. It can also catch the visitor's eyes and make the site more memorable.
Graphics Navigation Bar with Rollover Effects. Rollover effects make the visitors feel more connected to the site since there are some interaction between the site and the visitors. The rollover effects can also make the page more enhanced and interesting.
Disadvantages
Text-Only Navigation Bar. Although a text navigation bar is easy to create, it can be boring, since there is not any interaction or visual appeal to the visitors. Text links can also be hard to distinguish from regular text on a page.
Graphics Navigation Bar. Graphics navigation bar is better than text navigation in the sense that there is visual appeal to the visitors. However, it will take longer for a page to load. A graphics navigation bar is also useless if the visitors use a non-graphic browser.
Graphics Navigation Bar with Rollover Effects. Rollover effects make the page interact with the visitors, but the images used in a navigator bar have doubled the non-rollover effect version. This is because for each icon or image, there will be two different versions. One for the on state and the other for the off state. The pre-load time will be increased since we want to pre-load all the images before the page is fully loaded. This process of pre-loading the images will only happen once if the rollover images used is the same for all the pages through out the site.
Cost and Effort
The cost and effort needed to create a text navigation bar and a graphic navigation bar will be minimal. To create a graphic navigation bar with rollover effects will take some time since the developer needs to write a JavaScript code to perform the rollover effect. However, once the segment of code has written, it can be reused whenever it is needed.
 |
 |
 |