March 2, 2007

The Downer of Dropdowns

My heart sinks whenever a client asks for dropdown menus. It's no fun to have to explain why a seemingly reasonable request—one that would save precious space and evidently speed navigation—is a bad idea. Having searched in vain for a comprehensive article on the subject to send to my clients, I decided to write it myself.

What We're Talking About

First, some terminology. By "dropdowns" I mean navigational menus that contain a hidden list of choices, typically revealed on mouseover. These menus may open downward, sideways ("flyouts"), or both, and are almost invariably created with some combination of HTML, CSS, and Javascript. Note that I'm not referring to the HTML form element used to offer a selection of options—say, a list of states—from a dropdown list. These aren't commonly used for navigation (nor should they be) and are otherwise quite different from dropdowns.

Second, a disclaimer. Not all dropdowns are equally bad. Some are plain bad, some are extremely bad, and some are "run for the hills screaming" bad. For the purposes of this article, I will respect the mercy rule and ignore the last group.

Okay, now that we know what we're talking about, let's get started.

In sum, the issues with dropdowns impact three overlapping areas of user experience and site performance: usability, accessibility, and search engine optimization. I will consider these each in turn.

1. Usability Issues

Broken Expectations

Users Decide First, Move Second, a study conducted by the leading usability group User Interface Engineering, revealed that users typically decide where to click before moving their cursor; they scan the page, access their options, and go. Since the information in dropdown menus is hidden from view, it can't help users in this process. Instead dropdowns force users to reassess their choices while their cursor remains hovered a link or group of links. As the UIE study showed, people have greater success finding what they're looking for on sites that don't include dropdowns:

Theoretically, these elements [dropdown menus] should conserve space without decreasing the usability of the site…. In watching users hunt for content, we've found just the opposite. Sites without these design elements did a better job of getting users to the content they sought and to valuable content they didn't previously know existed.

Too many choices

Additional choices don't make for a better user experience. In fact too many choices, particularly too many irrelevant choices, can be overwhelming. As Jeffrey Zeldman has noted: "[Dropdown menus] almost always create an inferior user experience versus drilling down through clearly labeled, intelligently organized categories."

Awkward movements

Even experienced web users with perfect motor skills can have difficulty keeping their cursor on the "active path" of dropdown menus. This problem is exacerbated when dropdowns include multiple "flyout" levels, but even the simplest menus—the kind that open down and include a single tier of choices—require a fair amount of dexterity and mouse control. Too often, dropdown menus can seem like elements more appropriate to a computer game than a website.

2. Accessibility Issues

Javascript dependence

Nearly all dropdown menus require Javascript, and many are entirely Javascript-dependant in that nothing whatsoever appears when users turn off Javascript in their browsers, or use devices with limited, or zero, Javascript support (e.g., screenreaders, handheld devices, text-only browsers).

In fairness, several of the better menus do display first-level links in the absence of Javascript. This includes two of the more popular "accessible" dropdown menus: Suckerfish Dropdowns and the Ultimate Drop Down Menu. I write accessible in quotes because these menus are not accessible, despite their authors' claims[1]. In the absence of Javascript, neither menu displays second-level links[2], and so unless a site includes redundant sub-navigation, non-Javascript users have no way of reaching second-level pages.

Difficulty for those with limited mobility

Not all web users have perfect motor skills. For those with arthritis, Parkinsons, and other mobility limitations, dropdown menus can be difficult or impossible to use.

Screen magnification problems

Screen magnification software enlarges a specific portion of the screen at a time, making it possible for visually-impaired people with some functional vision to use a graphic browser. Unfortunately, dropdown menus pose serious problems for these users. Russ Weakly: "When the screen is magnified extensively, dropdown items can sometimes disappear off screen. In some cases, it is impossible to navigate to the dropdown items, as moving the visible screen area deactivates the dropdown."

3. Search Engine Optimization Issues

Since nearly all dropdown menus rely on Javascript, and since links in Javascript are unreadable by search engines, the absence of Javascript can prevent an entire site from being crawled. When search is king, this is like being banished from the kingdom.

For what it's worth, several of the better dropdowns do present first-level links for indexing. Also, at least one approach, MenuMachine 2 (a GoLive extension, of all things), displays a link to a site map page based on the dropdown menu links, thus providing an alternate method for both search engine crawling and site navigation.

The Good News, Such as it is: Easy Menus

I've found but one fully accessible and search-engine-friendly approach to dropdowns: Easy Menus. Although these menus utilize Javascript, they degrade gracefully in its absence, presenting the user with a nested list of navigational choices. It ain't pretty, but it works.

Of course, Easy Menus suffer the same usability problems as all dropdown menus, and so I would hold off the celebration. Nonetheless, for those who remain committed to using dropdowns, or have no choice in the matter, Easy Menus seem the best available option.

• [1] The two leading accessibility guidelines—the W3C's Web Content Accessibility Guidelines and U.S. Federal Government's Section 508 Standards—are unequivocal on this point. Section 508: "When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology." Developers can—and should—make these sites accessible by adding redundant HTML-based navigation, but the menus themselves don't provide these links.
• [2] Suckerfish menus fail in this way in Internet Explorer only.

Published in Accessibility, SEO, Scripting, Usability