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.
Arachnid Visitors
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.
Left-Side Menus
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.
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 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.
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.
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.
