Navigation Systems for Business Websites
Inadequate navigation design is probably the main failing of business websites
By Rao Salim
Dec 20 - 26, 1999
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.
Top Level Sections
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. The more important the objective, the higher on the menu it belongs.
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
Next, make sure every page of your site is reachable, either directly or indirectly, by a hypertext link from your main page. Image maps (see below) look cool. But many people come to your site without seeing your image map. Don't worry much about Lynx text-only browsers; they represent only a fraction of 1% these days. 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.
The most important visitor, however, isn't a person but an insect. Well, not technically an insect, your biologists will say, but a cyber-arachnid, a Web search engine spider (used by AltaVista, Lycos, HotBot, Excite, Webcrawler, 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.
The use of left-side menus is widespread, and rightly so. Left-side menus 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.
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 with <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.
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 easier to maintain than graphic menus.
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 they take longer to download than image maps.
Image Maps are graphical menus which have a map linked to the position you put your cursor. Image maps look the best, 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.
There are two types of image maps. Server side image maps look up a map on the server, and are therefore a little slower. Their big advantage is that to change an entire navigation system, all you have to do is to change the graphic and the corresponding map file. Client side image maps contain the map file within each HTML page. The work a little faster, but you imagine how much work is involved to change each page in your system when you want to change the navigation system. If the code is exactly the same and you can change it with a global search and replace, but it seldom is. However, if you use Server Side Includes (see side bar), client side image maps are a better choice since they're faster to load and are easy to change.
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.
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.