12 Rules for Web Menu Usability

While this is not an exhaustive list of menu design rules, these are certainly all factors designers need to keep in mind when designing (or redesigning) web menus. The guidelines in this list are detailed and illustrated throughout the rest of this chapter.

1.   Menus must be considerate of the user's main task.
2.   Menus must be distinct from content.
3.   Menus must be clearly readable (this includes visual contrast and text and icon size).
4.   Menus must be easily scanned for information.
5.   Menus must be easily operated.
6.   Menus must behave as your target user would expect.
7.   Menus must load as quickly as possible.
8.   Menus must be consistent across a site.
9.   Menus must put a higher premium on usability than branding.
10.Menus must be localizable.
11.Menus must be accessible to the handicapped.
12.Menus must work on multiple browsers.

As you can probably immediately tell, almost all of these guidelines apply to web pages as well as menus. For example, number 7 tells you your menus should load as quickly as possible, but in most cases the menu loads at the same speed as the rest of the page. In these cases, where the concepts of "web page" and "menu" are inseparable, assume the guideline means your menu system shouldn't negatively affect the usability (including readability, speed, etc.) of the web page any more than necessary. Obeying all 12 of these guidelines would be a tall order, and of course rules are made to be broken – we certainly do not advocate that you should stick to every one religiously. However, this list should guide your web designs, even if you decide to shatter one or more of its tenets.

Rule 1: Menus Must Be Considerate of the User's Main Task

A common mistake made by Web Designers and other interface designers is forgetting what the user really wants. If you go to Amazon, you probably want to buy a book, DVD, or one of the bazillion other things they sell. But you almost certainly don't want to read about what a great entrepreneur Jeff Bezos is, or how the web site works, or how cool things will be once you finally get a chance to buy something. Splash screens (or "Intro" screens) are a prime violator of this principle (see http://www.artisandesigngroup.com/ below), but some menus are equally inconsiderate of the user's task. As we'll discuss in Chapter 2, you have to know why your user is visiting, what their primary task is, then build everything they see around making that task easier.

As much as possible, the web site should get out of the way and let the user get on with doing what they want to do. The user usually wants to bounce in, buy something or get some information, and bounce away again as quickly as possible. In an ideal world, they don't even notice the web site around their activity. Back to Amazon.com – one of the secrets to their success (in addition to very good Customer Relationship Management) is that you can go there, find what you want, buy it, and get on with your life with a minimum of interruption.

Even "destination sites" (and there aren't nearly as many destination sites as some would like to think) have something the user wants to do. A site where you play games online, for example, may capture a user's attention for hours at a time. But we can't forget that playing the game, not using the web site, is the user's goal. It's the same with information/news sites. The user wants to get the information; they don't want to use the site. If we lose sight of the user's goals, we may as well simply redirect them to other, more usable sites – they'll go anyway.

Usable Web Menus
Usable Web Menus
Rule 2: Menus Must Be Distinct from Content