Intro to UI Wireframing > 2. UI Controls > 2.3. Dropdown Menu (Combo Box)

2.3. Dropdown Menu (Combo Box)


The control with many names! A dropdown menu gives you a list of items to select from. It is versatile and familiar.

Whether you call it a Dropdown menu, Combo Box (or Combobox), Pull Down menu (or Pull-down menu), Picker, Select menu, or something else, you use them every day.

Technically, a dropdown menu is different from a combo box. A combo box is a combination of a dropdown menu and text input (confined to a set list of values). It is arguably more usable because you can type all or part of the value you want to select without having to scroll through the entire list of values. However, the dual nature of combo boxes is not obvious, so many users don't know that they can type into them.

When to Use Dropdown Menus

Dropdown menus are a great way to present a large number of options without taking up much space on the screen. They can also reduce errors, when compared to text input fields, because the input is constrained to the options available. Welie.com writes "The user may be familiar with the data but may not know the exact required syntax."

Some drawbacks of dropdown menus are that users can't see all the options at once and it can take time and dexterity to scroll. If you have a very long list, you can use a combo box or autocomplete text input field instead.

According to the U.S. Web Design Standards, the optimal number of items in a dropdown menu is between seven and 15. It suggests using radio buttons or checkboxes for shorter lists.

An exception is when the list is familiar so that users can expect to know the contents before opening it, such as days or months of the year, states/provinces, or countries. The GNOME Human Interface Guidelines use the following example: "if you have an option menu labelled 'Month:' with the item 'January' selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look."


How to Use Dropdown Menus

  • Order the items logically (e.g., sequential for dates/numbers, alphabetical for countries).
  • Display a meaningful default selection.1 (Note: Pre-selecting an item can be dangerous, however, since you can't verify whether the user chose it deliberately. When in doubt, default to no selection.)
  • Provide relevant choices. Longer lists require more time to scan, so don't add options you don't expect users to select.1
  • Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.2
  • Allow users to click anywhere on the control to open it, rather than only the arrow.
  • Use grouping or categorization when it makes sense (see categorized dropdown variation below). Group headings or separators should not be selectable, however. (In HTML, this can be achieved using the <optgroup> tag.)

Basic Usage

States

Variations

References

  1. macOS Human Interface Guidelines
  2. U.S. Web Design System


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.