Designing Drop-Down Menus: Examples and Best Practices | Design Showcase | Smashing Magazine

Description

Designing Drop-Down Menus: Examples and Best Practices

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

Yes, that’s right: drop-down navigation menus can be user-friendly . Just yesterday Jacob Nielsen the results of his recent drop-down menus study , in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

These panels appear temporarily and disappear on their own when users move the pointer to another top-level option or to a “regular” part of the screen. You can find more information about Nielsen’s study in his article Mega Drop-Down Navigation Menus Work Well .

Huge vertical drop-down panel from foodnetwork.com ; notice a close button (the “x” in the upper right corner) .

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.

You will often see many trends in which drop-down menus are used. Here are a few of the most common ones.

Organize Pages in a Section

Most commonly, drop-down menus are used to pull all of the pages in a certain category together in one organized element. This ...

Original URL

http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/