Creating the Perfect Web Menu

In order for visitors to have a positive experience on your web site, many factors have to work together flawlessly. The site should load quickly, have a pleasing appearance, offer benefits to the visitor and be easy to navigate. This last piece of the puzzle is the subject of today’s article.

If you are planning a small site of six or seven pages, its organization is practically a given. The home page will have links to the other pages, which will also have links to every other page in the site. As long as the links (or buttons) are easy to find and read, your visitors should have no problem moving around the site.

Organizing larger sites

As a site grows larger, confusion can set in. If you have a 24 page site you won’t want to have 24 buttons down the left side of your home page. Many of the buttons won’t even be visible without scrolling down the screen, and it will be difficult for visitors to find what they’re looking for with that many choices. And if your site grows to 50 or more pages you have a real organization problem to overcome.

I suggest you first separate out your housekeeping items. These would include your privacy policy, contact page, shopping cart, FAQs, newsletter sign up and so on. This menu group will appear on every page, but it can be small and inconspicuous. These aren’t your critical areas, but should be available when someone looks for them.

Larger sites will ideally give visitors no more than seven major categories to choose from. Four or five is even better. Some of the areas may have sub-menus, but those don’t have to appear in any other section of the site. For instance, a site for a printer supply business may be divided into the following sections: Printers, Cartridges, Accessories, and Service. These buttons would make up the main menu on every page. However, when a visitor got to the Printer section they might find a sub-menu for Laser Printers, Color Laser Printers, Ink Jet Printers, and Multifunction Machines. This menu would not appear in the Accessory section, which would have its own sub-menu. In this way, visitors can easily reach any area of the site, but won’t ever be overwhelmed with choices. Each page of the site will remain uncluttered, yet be very useful.

Drop-down menus

Many larger sites use drop-down menus to give access to many pages at once. In this way the number of buttons on a page can remain small, yet visitors can go directly to their area of interest. To continue with the printer site example, a visitor rolling their mouse over the Printers button would then see all the choices and could go directly to the Ink Jet Page, skipping the step of going to the main Printer page first/. Getting visitors to their destination with a minimum number of mouse clicks is always a good idea.

However, a word of caution is in order here. In order to create drop-down or fly-out menus, the designer must use the coding language called JavaScript, which is also used to create those pop-up windows you see on many sites to present advertisements. About 12% of current users have turned off JavaScript in their browsers, probably to avoid the pop-up windows. By doing so, they’ve also disabled any drop-down menus you might have on your site. If a person with JavaScript disabled rolled over the Printer button, none of the other choices would appear.

To get around this the Printer shop should create a separate page for each major category. These don’t have to be very fancy, but should contain links to all the sub-category pages. Most people will never see these category pages as they use the drop-downs to navigate the site, but the 12% of folks can click on the Printer button (for example) and still get where they want to go. If you don’t take this extra step you’ve just closed the door to 12% of your visitors.

Text Menus

One last type of menu to have is a set of text links at the bottom of every page. The graphics that make up your menu buttons won’t be visible to the visually disabled or to those who have graphics turned off to speed up their surfing. These text links can be read aloud by text-to-speech browsers and can be used when a page is loaded without graphics.

If you are designing your own web site, or supervising someone else who is, you will probably want even more information than is available in this short article. The book that I have relied on the most in this area is Web Menus with Beauty and Brains by Wendy Peck. With 27 chapters and an included CD-ROM, you will have the expertise to create an attractive, usable site that is a pleasure to explore.

An excellent resource for more advanced users is Constructing Usable Web Menus by Andy Beaumont, et al. Have fun!