Introduction  Audience

Limitations
Escaping Paper

Navigation Bar
Navigation Map Virtual Includes 

Audience-to-Author
Conclusion

Bibliography

Navigation Tool bar Using "Mouse-Overs"

The most important part of any web page is the navigation tool. The tool must be clear and concise, should give a sense of the scope of the web site, and also needs to be small enough to leave room for content on the web page. Like all of the components of a successful web page, the navigation tool must also work with most common browsers and with in the constraints of bandwidth and monitor limitations.

By providing your own consistent and predictable set of navigation buttons you also help give the user a sense of your site's organization, and makes the logic and order of your site visually explicit (Lynch, 1997 p.1).

The navigation tool that appears above, (and a similar one which appears on all of the lab web pages) is my attempt to fulfill all of these objectives. The color, font, and layout remain constant as the user moves through the site. Even when the reader moves into the "Audience to Author" subsection, the extra navigation bar is a logical extension of the existing navigation tools - rather than a new tool, this extension works with the same rules the reader has learned to expect. Kim Campbell points out that the "visual elements that producers manipulate in order to create a sense of continuity include similar page or screen placement...typography...color...and visual form" (Campbell, 1995 p. 43). To maintain this sort of consistency, I have used the same color and font on the header graphic, navigation bar mouse-overs, and graphical navigation buttons. I have also used similar geometric shapes among these tools - basically rectangles of approximately the same aspect ratios. Finally, I have tied these elements in with the tables and font colors most commonly provided by a web browser. This means that the blue (unvisited link) and lavender (visited link) of the navigation bar links is bridged by the purple/blue color of my navigation tools and header.

At first glance, the navigation tool is simply an html table with text links. While a stack of graphical buttons might look nicer, the possibility of different interpretation by different browsers makes that option unattractive. The text links will also have a much faster load time than graphics would. The text just below the navigation table is a graphic. While this graphic is not an integral part of the navigation (the text links load first and the navigation tool works fine without the graphic) it does add value to the navigation tool for users with a capable browser and moderate bandwidth.

As the user moves his cursor over the various links, the graphic changes to describe the documentation behind that link. This reveals to the user my design rationale and how I am using the labels within my site, so that the terminology becomes clear and understandable to the user (Pirouz,1997 p. 189). This way the navigation tool can be kept small and the links stay short and descriptive, but as a user peruses her options, she can see more detail about the choice before she moves to that new page. Note that as the user moves his cursor over the "Basic Access" link, the graphic changes to the following text: "All registered students have access to the internet, email, dial-up modem..." This text is intended to serve the dual purpose of defining "basic access" and alerting the user to the content of the page before they decide to migrate to that page.

Preserving Screen Real Estate
Another very important consideration here is that the navigation tool and header graphic need to be small, so that there is plenty of room for the content, and the user does not have to scroll down the page every time they move to the next section. Jakob Nielsen points out that "navigation is a necessary evil that is not a goal in itself, and should be minimized" (Nielsen, 1999 p. 18).

Finally, no matter what size screen the user is looking at, the navigation tool should be fully visible and right near the top of each section, to give a clear impression of the scope of the web site (Pirouz 93). This space conserving technique is not available on paper and is a great example of the web medium enhancing the usability documentation.

While it is generally advisable to limit the content of a web page to minimize scrolling, it is sometimes a better strategy to include all of the pertinent information on one page. Once you get into the meat of a web site, the content becomes more important and sometimes a very large chunk of text needs to be together. At this point a secondary navigation tool can add to the usability. The secondary tool ought to be distinct from the primary tool, but still conform to the same principles and general design so that the suer does not need to learn any new conventions within the site. Again, consistency is paramount. The tools is simply a set of links to jump further and further down the page, rather than scrolling. It is basically an interactive table of contents.

By augmenting the standard Web viewer "Back" and "Forward" buttons with "Next Page" and "Previous Page" buttons built into the page itself the user then has interface tools to navigate through the information in your site in the sequence you intended (Lynch, 1997 p.1).

Keeping all of the text on one page allows the user to search the contents of the page with their browser, print out a page, and see the relationship between like or related policies.

The main navigation bar is designed to take up as little space as possible at the top of each page. It also provides graphical identity to show the user they are still in the same website. The categories are laid out in concise terms that communicate both the scope and the order of topics within the site. Mouse-overs provide extra information as the user considers the links, without compromising screen real estate. The secondary navigation tools, a side bar and graphical buttons, maintain the same design schemes and build on the same set of rules as the primary navigation bar. A user can basically decide to follow the continuity of the "next" or "back" buttons or jump to the top of the page and anywhere else within the site. Finally, all of this navigation contains simple design elements and takes up minimal space, so that it does not overshadow the content.



Page URL http://www.d.umn.edu /~jdavis/planb/toolbar.html
Last Modified on Monday, 27-Mar-2000 13:01:31 CST
©2000 Jason Davis email: jdavis@d.umn.edu