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.
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
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
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
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.
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.