Practical Web Design - Fundamentals of Web Design

Navigation

Everyone needs to be able to find their way around your site with ease. The choices you make in providing navigational assistance on your site will often make the difference between a site that users frequent, and frequently use, and a site that gets visited once and promptly forgotten. I can't tell you how many sites I've visited that offered tons of good information but were so difficult to navigate that I refused to visit that site again, choosing instead to visit an alternative site that gave me an easier, more intuitive navigational scheme (remember, on the Internet, there's always an alternative!).

One traditional method is to use a simple table of links that march down the left side of the page. There's absolutely nothing wrong with this design; millions of effective, well-patronized Websites use this every day. It has the advantages of usability and familiarity: we've seen it before, we know how it works, it's comfortable and workable. We don't have to sit and ponder how to move around the site, we just glance at the structure and go. But there are plenty of other choices. If you find, or concoct, an alternative that appeals to you and your audience, by all means use it.

The Psychology of Navigation

One thing to remember: the human brain sees five or less items as a single group, but when it encounters more than five items, it breaks them down into "subgroups" to process them. What this means for Web designers is that we need to keep our navigational options simple enough for easy use. "Next step" options should be as few as possible. Although it's not always feasible to keep your navigational choices to five or less, you can usually group the options into smaller "subcategories." Five groups of five is easier to handle than a single group of twenty-five, for example.

Another, related concept is the idea of "three clicks or less" to find the desired information. Nothing frustrates a Web surfer more than having to click and click and click again in order to find whatever specific piece of information they're hunting for. The Project Cool folks remind us that "when people get lost, they tend to surf off somewhere else instead of fighting their way around a site." Ideally, everything a surfer wants should be no more than three clicks away from the home page. Don't forget to make it easy for them to get back to their starting point... home should never be more than a single click away.

Top Tips for Good Navigation

There are a few things to remember in designing any navigational scheme.

Make It Clear

First, it should be apparent to the first-time visitor how to move around your site without scrolling down -- everything should be obvious as soon as the page loads. The first-time visitor should be able to have your page load AND be able to grasp the essential layout of your home page within 30 seconds... much more than that and they'll fly away to find a site that's easier to use. For users restricted to dial-up access, this means home page sizes no larger than, say, 45K.

Consider A Site Map

A separate "site map" for a larger, more extensive site is a good idea, but shouldn't be relied upon as the main navigational tool. Many users, particularly less experienced ones, don't employ site maps. Many don't even know what a site map is, nor do theycare to find out. And since it must be accessed through the main page by a click, it will always function as a supplemental method of navigation, not the main method.

You should make sure that your site map is easily accessible through a link or button labeled "Site Map" (surprise!), and that your map makes it easier, not more difficult, to navigate your site. Your site map should be much simpler in design than your regular pages, eschewing graphics and effects in favor of simple, easily used text links. The idea behind a good site map is to provide the user with a single overview of the navigational scheme and informational structure of your site. Keep these especially simple and easy to use; don't make the user work to figure out how the map functions.

Include Site Search

Another good idea is to make your site searchable within itself. Search functions allow the user to find what they're looking for outside of your navigational framework, as well as giving them an "out" when they get turned around. Most users know to look for "the little box that they can type in," so give them just that, preferably labeled "Search This Site" or something similar.

Keep the search parameters simple, as many users refuse to learn advanced search query techniques. "Scoped" search techniques (limiting searches to specific areas of your site) and other "advanced" search functions are useful for some users and confusing for others. Most users want to be able to find what they're looking for with a simple onoe- or two-word query; let them do just that.

Navigational No-Nos

Some common navigational "no-nos" have been floating around the Web for as long as people have been designing Web pages. Many of them are still valid, while others have become outdated and less applicable. Here are a few, based largely on the observations of Web design guru and curmudgeon Jakob Nielsen:

Frames

This used to be the great "bugbear" of Web navigation. I hate frames, you hate frames, we won't visit sites that use frames. Well, that's not true any longer. The old versions of Netscape and MSIE both handled frames quite poorly, but the problems in these browsers' frame handling have long since been fixed, so frames aren't the no-no they used to be. Still, frames can be a bit clumsy to work with, so while it isn't necessarily a design faux pas to use frames, it's a good idea not to use them unless you absolutely have to. Usually a well-thought out table structure works better for most sites than frames. Note I said "usually," not "always." There are times when frames work very well, particularly if you want to keep a header or navigational structure always visible.

Other sites that use frames are sometimes badly behaved enough to "trap" your page within their frames. To keep this from happening, use this simple META tag:

<META HTTP-EQUIV="Window-target" CONTENT="_top">

For more about using META tags, see the first installment of this column, Top 15 META Tag Tricks.

Make sure every page on your site has this tag in its <HEAD> section. And don't let your page "trap" other folks' pages. It's bad design and downright rude