Navigation 101

by Charlie Morris

A simple, logical, understandable navigation scheme can increase your number of page impressions, boost return visits, and improve your "conversion rate" (the number of visitors who are "converted" into customers). It's a critical aspect of site design that has a direct effect on the bottom line. Well-designed navigation bars (navbars) can make it easy for users to find their way through large quantities of content. Frames can also be a useful part of your navigation scheme, but don't overdo it.
April 2, 1999

1. Basic Principles of Web Site Navigation
   
   
2. Using Navbars, Frames and Site Maps
   
   
3. Contact Pages and Off-site Links

Navbars are Neat

A "navbar" is an essential element of a well-laid-out site. A navbar not only makes navigation easier, but is an integral part of a site's branding. When a user sees the navbar, they know what site they're on, and they know that they can get back to where they started any time, so they worry less about getting lost. Your navbar should include all the main sections of your site, and it should be the same on every page of the site (although each section of a larger site may have its own sectional navbar in addition to the main navbar). Every page should have a navbar as an integral part of the layout of the page, which should be consistent throughout the site. Most designers put a navbar at both top and bottom of the page, although they needn't be exactly the same. A "sidebar" is also a good place for a navbar.

A navbar may be made up of individual graphics, it may be an image map, or it may be simple text. Javascript may be used to make the buttons change appearance when the mouse is over them, or to create even more elaborate effects, such as a bit of explanatory text that appears for each item. Make sure that your script includes a bit of code at the beginning to hide the script code from older browsers that don't support Javascript. The Golden Rule of Web design applies to navbars, too: Keep it simple! Never use clever Javascript animations just because you can, but only if they actually add functionality to the user interface.

In the early days of the Web, every item on a navbar tended to have a cute little icon next to it. Nowadays, improper use of cutesy icons falls into the same category as hit counters and busy backgrounds - an all-too-common sign of amateurish design. The original purpose of the little icons that grace our airports, road signs and Web sites was to make it easier for people who don't speak the local language (or can't read) to find what they're looking for. This is quite apropos on the international Web. It logically follows, of course, that an icon that doesn't clearly represent what it is supposed to represent is worse than useless. A little picture of a letter is obviously the place to click if you want to send email to a site's proprietors, but a little picture of a man or a circle or triangle is generally meaningless. If your icons aren't worth a thousand words apiece, ditch them. Also, if you're going to use icons, make sure they fit in with the overall look of the site.

Many sites use a little hierarchical outline at the top of each page, to good effect. Across the top of every page is a list of all the levels between the home page and the current page, all of which are hyperlinks (see Yahoo for the best-known example). For example, the Widgets, Inc. Web site might have the following on the top of the page that describes their latest product:

Widgets, Inc. : Products : Consumer Widgets : New Widget 6.0 for Windows

Each of these items is clickable. The user can see at a glance exactly where he or she is in the site, and can go back to the "Consumer Widgets" hub page, the main "Products" hub page, or the site's home page at any time. This setup does not replace navbars, but exists in addition to them. Every page should still have a standard navbar, perhaps on a sidebar and also at the bottom.

I've Been Framed!

Many sites use frames as part of their navigational strategy. If you divide each page into two or three frames, you can have your company logo and/or your navbar constantly in sight. The frame with the content scrolls, but the frame with the navbar does not, so the navbar is always right there where the user can find it.

Frames, however, have several drawbacks. All hyperlinks on a framed site must use the TARGET attribute to ensure that a page comes up in the correct frame. Nothing looks stupider than a page full of content coming up in a narrow frame that was intended for the navbar. Getting the TARGET attributes right can be quite complex, and every single link must be tested to make sure that the frame scheme works out right.

If someone (or a search engine) links to a page that is not a frameset, it will not come up the way you intended, and you'll look like an amateur. To mitigate this problem, include a "robots.txt" file in your home directory. This file contains a list of directories that should not be indexed by visiting spiders. All pages other than framesets should be in separate directories, and those directories included in your "robots.txt" file.

If you have links to other sites, these links must include a TARGET= "_parent" attribute so that the other site will not come up inside one of your frames ("_blank" or "_new_window" will also work). Never, ever have someone else's site come up inside one of your frames. This quite rightly makes site owners apoplectic, not only because it's unethical (and possibly even illegal - the jury's still out), but because it violates every principle of good design. A page designed to be viewed as a full screen will not look good inside a frame. It will scroll, you will look like an amateur, they will complain, and you will go to Hell.

Incidentally, the author objects to frames not for any of the reasons mentioned above, but simply because they tend to make a page look cramped and cluttered. There's also the question of undesired scrolling, which can really make a page look terrible. Only neophytes (or self-parodists) use more than 3 frames on a page, and those who choose to use them should make sure that they fully understand how they work, and handle them as one would a loaded firearm.

A Site Map to Success

No matter how carefully you construct your navigational scheme, there will be some who can't figure it out. If your site is complex, a site map may be a good navigational tool of last resort. A site map is a page that presents your Web site in strict hierarchical order. No fancy stuff, just a list of every single page on your site, showing how they link together.

A site map may be a text outline or a graphic image map. A text site map might look something like this:

Widgets Inc. Home Page

 - Products

    - Consumer Widgets
       - Widget 4.0 for Windows
       - Widget Lite
       - Widget for Unix

    - Professional Widgets
       - Widget Gold Edition for Pros
       - Widget Silver Edition for Circus Clowns

 - About Widgets
    - Company History
    - Work for Widgets

 - Contact Widgets
    - Email Addresses
    - Telephone Directory

Every line of text above should be a hyperlink to the page. If you prefer, you can create an image map with a little box for each page. An image map is usually preferable, because it looks better and can better show the relationships among pages. The drawback is that it's harder to modify than a text site map.

1. Basic Principles of Web Site Navigation
   
   
2. Using Navbars, Frames and Site Maps
   
   
3. Contact Pages and Off-site Links