Web Designer Blog

The drop down menu has somehow over the years become quite a complicated design element.  This is mostly due to the controversy surrounding its use.  In the opinion of some designers, these menus are simply not worth it.  They’re complicated and clumsy for the user and thus don’t live up to high usability standards.  Because the goal of most designers is to create the best user-friendly experience possible, drop-down menus end up tossed aside in favor of less frustrating options.

However, when done correctly, drop-down menus can be a workable way to organize cluttered layouts and can give a site a decent amount of flexibility and charm.  The key is to follow a few practices well-known for effectiveness and style.

In this post, we’ll explore these drop-down menus best practices and hopefully diminish some of the controversy surrounding this viable design element.

Two-Tiered Frustration

Perhaps the number one source of complaint concerning drop-down menus is the frustration that often results from using two-tiered menus. The main complaint is that they’re extremely difficult to navigate because of the fundamental complexity of the design.

When the user sets out to select an option, he must pinpoint exactly the right area on the menu or risk clicking an unwanted menu item.  After only a few unsuccessful attempts users usually get so frustrated that they simply give up on the site altogether.  The best advice is to avoid the two-tiered structure whenever possible.

Wait to Deactivate

This practice addresses the issue in hover drop-downs where the menu disappears the minute a user removes the arrow from the menu panel.  At that point, the user must start the menu’s search process all over again by hovering over the menu once more.

Designing around this involves coding allowing users to keep the menu open with a hover and to deactivate it with a click on some other part of the screen.  See, for example, the site below.
Read on »