1. Put navigational aids where they're needed.
Local navigational aids, whether implemented as text, icons, or buttons, should be unobtrusive but handy when they're needed. Usually this means placement in the footer. Placing another set at the top of the document, while it may distract from the title or banner graphic, allows a viewer to jump to the previous page or the top of a sizable document as soon as the need is recognized without having to scroll to the bottom of the page. Utility at both the top and bottom of a page is another argument for simple, discreet navigational aids.
For pages meant to be read in a specific order, such as instructions, it is very useful to include "Previous" and "Next" navigational aids. These allow a viewer who has arrived at a page via a hypertext jump to find the beginning of the linear sequence--something a browser's "back" and "forward" buttons can't do. A useful selection of aids might include: [prev], [next], [top] or [contents], and [home]. At Penn the home/views bar and tool bar might replace the [home] button.
2. Be cautious in using icons without text labels.
Well-designed icons are compact, easily recognizable substitutes for, or reinforcers of, names or instructions. Once an icon's meaning is understood it may replace long text descriptions, and its proportions may offer an easier target for the mouse click than a text strip.
But complex icons have to be learned or mapped against their referents. And very few, if any, icons--even the simplest and most abstract--are unambiguous across national and cultural boundaries. So for basic functions such as navigation, it may be best to use labeled icons; you don't want your users to have to learn much to get around your site. If you have more complex concepts to convey, and you expect viewers to return to your site often enough to repay learning your interface, then pictorial or symbolic icons alone may be effective. The tool bars of many commercial software programs rely on this principle.
3. Choose button styles to complement your site's look and feel.
Buttons in computer interfaces began as simulations of real-world machine controls: "click in this space" was analogous to "push this button" and easily understandable. Today most computer users are accustomed to the idea of clicking on screen objects. Web viewers are used to clicking on underlined text or text in a contrasting color. The button metaphor is no longer essential, and the use of illusionistic buttons is now an aesthetic choice. You may choose to use beveled-edge buttons to achieve a precise, machine-like "feel" for your site, or to reinforce the interface of a specific browser. On the other hand, you may prefer to have simple "buttons" of floating colored text, or plain bars of color with text labels, to achieve a different "feel." The key point is that your "hot" zones must be clearly distinguishable in the context of your page. If you have a lot of flat colored shapes as illustrations on your page, then flat bars of similar colors may not be adequate signals that the labeled items are links. Here, falling back on the literal beveled-edge button might make sense. Note that any bitmapped buttons or other images used as navigational aids should be assigned an alternate text for viewers with text-only browsers.
