Navigation
Styles
by
Agatha Taormina
Table of Contents
| The keys to navigation are consistency and usability. | ||
| Consistency |
|
|
| Usability |
Ease of locating navigation bars
Ease of using navigation bars:
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:
|
||
| 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:
|
||
| 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:
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 Center Readings
Last Revised:
March 30, 2007
©2001 Agatha Taormina