[Note: This article contains technical subjects which may not be suitable for all readers. CGI programs and SSIs may cause temporary insanity. Read with care or pass on to a local geek for interpretation. An earlier version of this article originally appeared in WMT, Issue 47, August 1, 1998]

Many of your site visitors leave before they find what you have to offer. One of the biggest culprits is an obsolete navigation system. I know. I find I need to redo my site's navigation system every few months to make sure it is working hard for me.

A small six-page small business site doesn't usually have a problem. But when your site grows to 20, 50, 100, or 1,000 pages, you need to plan how to speed visitors to the information they seek. If they become lost deep within a site, they may give up entirely. Getting customers to information quickly and intuitively is the goal of navigation systems. In this article we'll be discussing several types of systems. Larger sites are advised to use several systems; redundancy is better than a single system a visitor may not understand.

Prioritize Your Site Objectives

The first task is to clarify your business objectives for the site. What do you want to accomplish? Get the visitor to fill out your questionnaire? Sign up for your newsletter? Phone you to find out more? Order a catalog? Make a purchase online? Work through these questions before you design your navigation system, since the structure of your site should be determined by your objectives, pure and simple. The more important the objective, the higher on the menu it belongs.

Top Level Sections

Next, group your Web pages into a hierarchy of topics. If you come up with a dozen topics, think again. Back in 1956, George Miller formulated his Seven Plus-or-Minus Two Rule (http://www.well.com/user/smalin/miller.html). He found that people's short-term memory can handle about seven pieces of information, plus or minus two (depending upon the person and the kind of information). So keep your top-level menu to seven sections or less. Beyond that you run the risk of visitors suffering information overload and quitting.

What questions are your customers trying to answer? Group your information in a way that will make it easiest for them. Don't be swayed by internal company politics. Your customers don't really care about the names of your divisions; they want their questions answered. Make your divisions happy by putting their name in lights farther down the topic hierarchy tree. Don't let politics affect the top level menu.

Now look for labels for each of these top level topics. Don't be too creative. Web surfers are used to such terms as Contact Us, Home, About Us, and so on. Make sure your one- or two-word labels convey effectively what they are pointing to.

Good Old Hypertext

It seems that many website designers have gotten too sophisticated for hypertext navigation links. Everything has to be a linked graphic. But many of the most heavily trafficked sites have gone back to using hypertext links. They're efficient, fast to download, and, with version 4.0 and 5.0 web browsers, can look pretty good.

"Lights-Off" Visitors

Next, make sure every page of your site is reachable, either directly or indirectly, by a hypertext link from your main page. But 10% to 20% of customers turn off the images on their browser and race through a site looking for the information they need. These "lights off" surfers need hypertext clues by which to navigate. Don't disappoint them. Don't rely on image maps alone. And make sure each of your navigation "buttons" (if you use them) has an ALT tag to tell where it leads.

Arachnid Visitors

The most important visitor, however, isn't a person but an insect. Well, not technically an insect, you biologists will say, but a cyber-arachnid, a Web search engine spider (used by AltaVista, Lycos, HotBot, Excite, Webcrawler, Google, and Infoseek). When they come silently climbing your Web, you'd better have hypertext links or they'll scurry off and index someone else's Web instead. Spiders can follow actual hypertext links, or images which have been made "clickable" through a hypertext link. They are blind to image maps, disgusted by frames (see below), and revolted by drop-down menus. Serve them hypertext links from page one, down through every level of your site if you want to keep them happy.

One way to do this is to include a bar of links in small type at the bottom of every page in your site such as:

Home | About Us | Products | Services | Contact Us

Then on each sectional page, have a real hypertext link to every Web page in that section. Easy, but forgotten by many business sites. The problem with putting hypertext links at the bottom of every page is that if you redesign your site and add a new section, you have to open every single page and change the code. Global search and replace doesn't always work well (see sidebar on Server Side Includes).

Splash Pages and Entry Tunnels

Just a word about what some call "splash pages" and David Siegel, in his Creating Killer Web Sites, calls "entry tunnels." These webpages are often graphic rich or have fancy MacroMedia Flash displays to reinforce your "brand" in the visitors mind. My advice: don't bother with them unless graphics and design is what you are selling. People are impatient with pages that say, "click here to enter the site." They don't care about your graphics display. They ask, "Where's the beef?" Get them to the content they desire as quickly as possible. (Follow Siegel's other advice and you'll be an excellent Web designer.) http://amazon.com/exec/obidos/ASIN/1568304331/wilsoninternetse

Left-Side Menus

The use of left-side menus is widespread. They allow your customers to get deep into your site without clicking through a series of hierarchical linking pages (though still include those linking pages). They also display the structure of your site more clearly than you can with just six or seven sectional titles. But don't forget the sections. Make the larger sections bolder, with lighter face pages below them in the left-side menu.

Frame Rant

A tempting short cut is known as "frames." Frames divide the screen into two or more areas, and use separate scroll bars to scroll up and down each area. The advantage of frames is that they keep the menu constantly in view. But frames create more navigation problems than they solve.

• They are difficult for search engines to index, since most designers forget hypertext links within the <NOFRAMES> tags. And pages that happen to be indexed usually come up without the frames structure at all, completely dismantling the navigation system. Many sites are low in the search engine listings because of frames.
• They make it difficult to bookmark any but the main page, so customers who like a particular section of your site won't be able to get to it quickly.
• The scroll bars look ugly.
• Some browsers don't print content from frames correctly.
• Frames make it clumsy for people with 640 x 480 monitors to browse your site. Fixed-width frames often hog too much of the screen, leaving just a small area to read the text.

My advice: Don't use frames except in special circumstances, such as displaying a list of dealers' addresses by state, or that sort of flat database. Otherwise, stay away from frames entirely.

Types of Left-Side Menus

But do use left-side menus. There are three ways to do it:

Text labels with hypertext links. While these look a bit less sophisticated, they make your site come up very fast and are much easier to maintain than graphic menus. Good examples are CNet (http://www.cnet.com/), Yahoo (http://www.yahoo.com/), and AltaVista (http://www.altavista.com/).

I used to build sites using nice looking image maps on the left side, but no more. A bug in Microsoft Internet Explorer (MSIE) 4.0 and 5.0 caused vertical image maps to fail. Now I use hypertext links along the left menu.

If you or your web designer aren't using Cascading Style Sheets (CSS), now is the time to learn. One style sheet keeps all of the webpages in my site looking consistent. In the HEAD section at the top of each webpage I reference my style sheet. http://www.wilsonweb.com/css/wct.css

I set my style sheet for a special "class" of left menu hyperlinks. In order to make them look nice, I've removed underlining, and colored them to have good contrast with the background color in my left menu. Since nearly 70% of my visitors use MSIE, I take advantage of the "hover" feature supported by MSIE (not Netscape) browsers. This way, when someone's mouse cursor hovers over a link it will change color to let them know there is a link underneath. For more about how to use Cascading Style Sheets, refer to an up-to-date book on HTML or Web design. My personal favorite is Jennifer Niederst's Web Design in a Nutshell (O'Reilly, 1999). http://amazon.com/exec/obidos/ASIN/1565925157/wilsoninternetse A fatter book is Thomas A. Powell's Web Design: The Complete Reference (Osborne/McGraw Hill, 2000). http://amazon.com/exec/obidos/ASIN/0072122978/wilsoninternetse

But I'm not ready to do away with underlining for links in the text. Underlining and color are two clues for your visitor of a hyperlink. If you take away the clues, the site may look better but the novice is confused and clicks away in frustration.

Buttons (separate graphics) each hyperlinked to a destination. The advantage of buttons is that when used with ALT tags, a site can be navigated without images on. The disadvantages are that each button graphic requires a separate call to the server, so your visitor has to wait for each to download before he can see your navigation system. With a slower connection (or on a slow Internet day) this can be very annoying. A good example of this used to be Microsoft's site (http://www.microsoft.com/), though now they only use buttons at the top of their main page, with text links down the left-side. Too many sites still rely on kludgy buttons for navigation!

Image Maps are graphical menus which have a map linked to the position you put your cursor. Image maps look good, and download faster than buttons that cover the same screen area. But neither browsers with images off nor search engines can follow them. They're also more difficult to maintain than either text or button menus.

Drop-Down Menus

Another way to get your customers deep into your site quickly is to place a drop-down menu on your main page, with sections clarified by indentations or spaces. Such menus don't take up much screen real estate at all, but pack a lot of navigation power. The downside is that your customer must click on the dropdown menu in order to see the contents.

The freeware program AnyURL works well. Developed by Mark Renton with the U.S. Department of Commerce TAO Project, the program is available at their site. http://www.pmel.noaa.gov/toga-tao/AnyURL.html

Tabs or Top Buttons

As my site has gotten more complex, I now use file-folder-style tabs across the top of each page to show the four major divisions of my site. This way my visitors can see at a glance what I offer and get there quickly. I also use a left side menu, drop-down menus, and search engines.

Site Search Engines

If your customer doesn't know where in the site a particular piece of information might be found -- or if it is on your site at all -- a search engine may help retrieve it quickly. Sonnenreich and Macinta's WebDeveloper.com Guide to Search Engines (Wiley, 1998) describes some of the higher end search engines. Webmasters with fewer resources may find these resource helpful:

• Matt Wright's Simple Search 1.0 is Perl script. While not too sophisticated, it's fine for 200 pages or so. Its lack of an index, however, makes it inadequate for sites beyond that. http://www.worldwidemart.com/scripts/search.shtml
• SWISH-E is a freeware indexed search program originally written by Kevin Hughes, now maintained at UC Berkeley Digital Library. http://sunsite.berkeley.edu/SWISH-E/
• The Piper Letter describes various search engines. http://www.piperinfo.com/pl03/searcha.html
• Free search engines services are available from Atomz.com http://www.atomz.com/ and EveryOne.net. http://www.everyone.net

Site Map

The 404 Not Found Page

I encourage you to use multiple navigation systems for your site to make it more likely that your customer can find the information he needs. As you plan the next redesign of your site, refine and expand your navigation system. Your online business should improve as a result.

For more more complete coverage of some of these topics, read Louis Rosen Feld and Peter Morville, Information Architecture for the World Wide Web (O'Reilly & Associates, March 1998). http://amazon.com/exec/obidos/ASIN/1565922824/wilsoninternetse