After over six years of seeing thousands of menus designs I've decided to release a guide that should be taken into serious consideration at the time of designing your menus.

First of all you should keep in mind that a menu is a navigation tool that should make the browsing experience of your web site easier. That's the whole idea behind the use of a menu. Nothing more and nothing less.

Although a menu can improve the appearance of your web site, its main purpose must always remain the same: offer your visitors a way of jumping from the different sections of your web site without the need of following an structured path.

The great advantage of using a menu over other navigation options is that it doesn't obscure your web site's contents: the menus are always hidden until the user decides to use them and only the menus that are selected are those that get displayed.

Even with all these nice features inherited from the main concept of what a menu system is, sometimes you will find that menus do not really help a user navigate your web site, but instead, confuses him/her.
This guide should help you avoid some of the most common mistakes made when designing a navigation menu.

Do you really need a menu?

From our sales department view... everybody needs a menu!!!
Unfortunately, that's not true.

Here're a couple of tips that should help you decide if you web site really needs a menu:

• The number of sections on your web site should not be a factor to decide if it needs a menu or not. There're many alternatives to organize a large navigation system without the use of menus. So, number of sections should not be considered.

  ---

• If you want to allow your visitor to jump from any section of the web site to another without having to navigate backwards (that is, pressing the back button).

  ---

• NEVER decide to use a menu because you think this will improve the looks of your web site. This is NOT true.

  ---

• Your web site design should be prepared to allow the easy integration of menus. If you designed your web site to use some other method of navigation and now you want to implement menus, chances are that you shouldn't without redesigning it.

  ---

• If your web site already provides an alternative navigation system do not use menus. Providing two navigation systems will simply confuse the user.
  Notice that our web site falls into this situation... but we're an exception: we sell a product that creates menus and we need to show it off! You don't.

I could probably continue... but I think you get the idea.

The menus' look & feel

I insist: the menus are not "things" that will improve your web site appearance! Your web site will NOT look better because it uses menus.

There's something that many webmaster/web site designers do not take into consideration when they design their menus:

A menu system is made of two basic elements:

• The menu bar:
  This is the element that contains objects that somehow trigger the menus, that is, when selected a menu is displayed.
  (This is known as the toolbar in DHTML Menu Builder)

  ---

• The menu items:
  And these are the menus... the list options that appear when an object from the menu bar is selected.

Notice that the menus appear and disappear based on the user's selections, contrary to the menu bar which is always visible.

Because the menu bar is always visible to the user it should be designed, allocated and prepared to blend with the design of the whole web site.

If, when you enter your web site you can differentiate the menu bar from the rest of the page then your design is not appropriate. A user should not be able to distinguish it from the rest of the page layout. It should be properly identified as part of the navigation system, but never as an independent part of the design.

So, when designing your menu bar, try to follow these simple guide lines:

• Never use something like "click here for the menu"!
  If you need to inform your visitors of the location of the menu bar, then your design in not correct.

  ---

• Never allow the menu bar to overlap with your pages' contents.
  Yes, menu bars that follow the browser's scrollbars look cool... but haven't you being paying attention: the menus are NOT supposed to be cool... they are supposed to be helpful.

  ---

• Use colors and fonts for your menu bar items that match those on your pages. The menu bar should blend with your design, so be consistent with it.

Remember that the menu bar is probably the most important part of your menus so pay as much attention as possible when design it.

DHTML Menu Builder, as most of you know, provides the ability to create a menu bar for you, known as a toolbar, and it also allows you to use elements already present on your web site to trigger the menus (known as hotspots).

Although many users avoid this second option, it should always be considered as an option. Why? Well, because it gives you the freedom to create a very nice menu bar using your HTML authoring tool or your graphics design application (the same you used to create the whole page design) and then attach the menus to it.

Remember... the menu bar is always visible to the user and it shouldn't look like something floating around over your pages... it should look as part of them.

Let's now talk about the menus... those lists of options that is what the user is really looking for when he/she chooses one of the options of your menu bar.

If you have the main concept of what a menu system is used for I'm sure you will find these "do's" and "don'ts" quite intuitive and logical:

• Organize your menus under logical categories.
  You should always avoid long menus. On most situations, a menu with over 8 elements is too large and you should consider reorganizing it using submenus; it's scary to open a menu and find 20 commands on it.
  Do you think your users will start reading what each item says?
  Do you really want your users to read everything every time they display that menu? If the menus are properly organize they will remember the paths to the sections they are interested in the most.

  ---

• Submenus... a cool feature often overused.
  If your navigation system contains more than 4 levels of submenus consider reorganizing it. It tends to confuse your visitors as its hard to remember the path they chose to get to some section of your web site. It also makes the menu navigation too complicated and this interferes with the main reason why you decided to use menus.

  ---

• If a menu has less than three options then probably you never need to use menus at all for that particular section.

  ---

• Use separators.
  A separator can help you divide a menu into similar categories without the need of using submenus.
  But please... don't abuse them. Separators should not be used to separate all the options on a menu... that's distracting.
  In the case of DHTML Menu Builder you can increase the leading value to create a very thin line between items increasing the effect of having each item separated from another. This is not the use of separators.

  ---

• Avoid using icons for every single menu item.
  Icons should provide a way to identify a section easily... not to enhance the look of your menus. Remember?

  ---

• Use icons to indicate that a menu displays a submenu. Tends to be confusing when a user selects an option and a menu just popups up! Arrows are often the best solution and if you don't want to use images, try the ASCII character 187 (»).

  ---

• Don't make the menus' items too thin or short.
  Not everybody is as experienced as you are using the mouse and although DHTML Menu Builder provides a series of timers to let your users make mistakes as they move their mouse of the menu items, it may still be confusing as they will try to be precise as they move the mouse.

  ---

• Avoid giving information about the menu options inside the menus. For example:
   

  About Us

  Click here for information about our company

  This makes your menus too big... and if you need to explain what an option is used for then the caption of the option is not correct.
  Besides, that's why DHTML Menu Builder offers the Status Text parameter, so any further explanations can be typed there. Click here to see a sample using tooltips generated from the text in the Status Text paramater.
  If you must add some sort of information as presented on the sample above then use some HTML styling tags to change the look of the information (as seen on this sample).
  

  ---

• Avoid changing the font on the mouse-over events.
  It tends to make your menus confusing and hard to read if you change from non-bold to bold, or to Italic, etc...
  However, changing the font to underline may help indicate that the menu items are clickable.
  

  ---

• Ask your friends (your real friends) to test the menus and listen to their suggestions. One can hardly see the problems on our own designs. Let others find them for you.

  ---

• Headings can be handy but use them wisely.
  Headings are something like titles on the menus. A heading can provide useful information about a menu but you should make sure the heading is understood as a heading and not as part of the menu.
  In DHTML Menu Builder you can create disabled commands (commands that do not respond to mouse actions) which is ideal to create headers. But disabling your headers is not enough. You should try to make them look different so the user doesn't confuse them with the actual options on the menu.
  You can see a sample of this technique here and here (select the "Functions" menu).
  

  ---

• And finally... be original!
  We're truly tired of the a-la-Office XP designs ;)
  The purpose of this design was to show off the power of DHTML Menu Builder... it was never intended to be used as a template.

Do you have any comments that could help us improve this guide?
Please, let us know here.