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.

Menu Options Hover

One other way to reduce drop-down menu frustration is to allow for menu options themselves to work with a hover.  This, keeps users abreast of which menu options are available for click and keeps each one open and alive until another option is chosen.

Seamless Transitions

Transitions such as the fade in or wipe down are rarely used with drop-down menus but make for an interesting design twist.  If transition elements are used, it’s important to ensure there is no lag time for the transitions to load and occur.  Transition time should be instantaneous.  The Microsoft example below is an example of a poorly done transition.

Tool Tip Clutter

Tool tips in drown-down menus are often more confusing and visually distracting than helpful.  They create unnecessary clutter, especially when the menu displays many levels and buttons, as you can see below.  These should be elimin
ated altogether.

Conclusion

The drop-down menu maybe, controversial but there are many practices that can be used to make them more user-friendly.  Without the best practices, designers run the risk of distracting or even alienating visitors with poorly designed menus that create more problems than usable solutions for a site.  Take care to consider each idea presented here.  Then, use them to improve your own use of the drop-down menu.

From dreamtemplate.com