Dropdowns

Dropdowns are used when you want users to make a single selection from several options (see Figure 12). They are a space-saving alternative to radio buttons; however, users can only see one option until they open the dropdown. Making a selection also requires two clicks (as opposed to one click with radio buttons). If space allows, avoid scrolling dropdowns as this requires even more effort to view all options.

Figure 12. Dropdown example

Usability problems

Dropdown overkill

Although dropdowns may be a bit more interesting to develop, sometimes a simple text field is more efficient. In the article, Should I Use a Dropdown? Sarah Miller and Carolyn Jarrett point out that sometimes it is easier for the user to simply enter text than select from a dropdown (see Resources). How best to enter dates is an often-discussed topic in usability circles. The fastest and easiest method is to allow users to simply enter numbers in clearly labeled fields for month, day, and year. A more tedious approach is to have users select the month, day, and year from three dropdowns. The advantage of the latter method is that users cannot enter invalid data.

Navigation dropdowns

In Microsoft Windows, industry practice has been to use dropdowns for selection. Avoid introducing new behavior for dropdowns on the Web by using them for navigation. If you've used dropdowns for navigation because you can't fit all the navigation options in your graphical user interface (GUI), you probably need to re-think your site structure so there are fewer top-level navigation options. Do not use a dropdown to duplicate your GUI navigation. This tactic just clutters the page and offers little to no added value. If you must use dropdowns for navigation, do not script them so that making a selection automatically takes users to a new page. This unfamiliar behavior can be jolting to unsuspecting users. Make it clear that the dropdown is a navigation widget by pairing it with a Go! button (see Figure 13).

Figure 13. Dropdown example

No default

Dropdowns are designed to show a default option, and additional options when the dropdown is opened. Do not waste the value of the default option by leaving it blank or using it arbitrarily. The default option should be the one most likely to be selected. If there's no logical default option, default to a null value such as "Select One" that prompts users to make a selection (see Figure 14).

Figure 14. Consumer Reports dropdown with default

No logical order

Finally, interview users to learn how they would expect dropdown options to be listed. The most logical order might be sequential, alphabetical, from most-common to least-common, or some other organization scheme. When deciding on the order, keep in mind that advanced users may use keyboard short cuts to jump down the list. For example, in an alphabetical list of the United States, users can enter "M" for Michigan. The dropdown will jump to and select Maine. The user can then continue to click "M" until Michigan is selected.