Drop-Down Menus: They Aren't User-Friendly

On many sites, drop-down menus aren't a significant part of the design. However, they appear often enough that they deserve some attention. So exactly how should they be used?

For an example of the kind of drop-down menus I'm referring to, check out the four menus at the top of this site: Logorugs.net. Just as a slight clarification, drop-down menus (little boxes that are usually white) are different from fly-out menus used in some navigation bars. Although there are several similarities between the two, we'll focus specifically on drop-downs.

Drop-down boxes naturally attract visitors' attention, because they are a recognizable tool and because they represent something to do. However, even though visitors are attracted to them, they are a tricky thing to use. There are several reasons for this.

First of all, drop-downs hide the available options most of the time. Visitors have to click in the box before the options will display. This is inconvenient, as the options aren't readily available. This is especially a problem if the box isn't clearly labeled, because visitors won't even know what type of information they'll find if they do click in the box. Visitors are very good at ignoring anything they don't understand.

Also, drop-downs require a bit of mousing precision. A long list of choices can be especially problematic. Visitors often accidently select the wrong choice because it's difficult to hit the desired option precisely. This can be confusing, particularly if the visitor doesn't realize he or she made a mistake.

If there are only a few options in the list, the problem is somewhat lessened. However, if there aren't very many options, it shouldn't be a problem to list them individually on the page. This avoids the difficulties altogether.

Logorugs.net

On Logorugs.net, drop-down menus are used for the site's primary navigation. This creates an extra complication: Drop-down menus aren't a standard form of primary navigation. Any time your site doesn't stick with the common conventions, your site becomes less usable to visitors and you elevate the risk of confusing them. It helps somewhat that the site is very simple and uncluttered, but the problem still remains.

Additionally, the last two menus on this site aren't clear about which options are "clickable". It appears that the first option in the list can be clicked, but in reality, it's merely the name of the category and doesn't go anywhere.

Finally, the last menu has only one option. Never use a drop-down menu that contains only one choice.

With this site, it would be better to add an additional navigation bar with links to the four main categories. Each of these links could lead to a page containing the sub links. This menu should be present on every page of the site, so visitors can easily get to any category. On the main page, the main content area should be used to list the major categories and show the links under each category. This way, all the options would be instantly visible when visitors first enter the site. This would also be more helpful to visitors than the long paragraphs of copy that currently occupy center stage. It's better to use primary screen real estate to spotlight the company's products than to talk about the company.

It is occasionally appropriate to use drop-down menus for other functions when nothing else is available. However, you should first explore other options and see if there is a solution that will be more user-friendly.