Cascading Drop-Down Menus

by Luke Wroblewski February 7, 2005

A complex cascading menu system in a recent Web application design project had me revisit the pros and cons of “fly-out” menus. The benefits are probably most obvious. Cascading drop-down menus:

  • Use up little screen real estate
  • Don’t overwhelm users with too many exposed options
  • If implemented well, can be useful to speed up navigation for users who repeatedly interact with a particular application

Some disadvantages, however, come to light when cascading drop-down menus meet user goals. Most notable is the impact these menus have on casual users who are unlikely to invest too much time exploring a particular site or application.

  • Users follow a pattern: they decide what they are going to click on before they move the mouse. It isn’t until after they’ve decided where to click that they see what a cascading drop-down element has to say.
  • Once users realize there’s more information available to them (via cascading drop-downs), they stop and re-evaluate the screen: questioning a choice that seemed to be a good one earlier.
  • Very long menus make it impossible for users to see all their choices in one glance. As a result, it may be better to present such long lists of options as a regular list of hypertext links.
  • Putting menu choices in mutually exclusive drop-downs (viewable one at a time) eliminates the ability to make a choice in context (with an understanding of all possible choices).
  • Cascading menus demand that you repeatedly hit a small target -a target that will disappear if you miss it, or even if you take the wrong path to it. Users often have to slide their mouse through two precise ninety-degree turns just to reach the second level of a cascading menu.
  • Many web-based cascading menus are not well implemented online (via poor DHTML programming).

Observing and perhaps visualizing user behavior can help determine if cascading drop-downs are the right fit for a specific Web-based interface.