Drop-down list
The Design Need:
While filling out a form the user needs to make a mutually exclusive selection from a list which contains too many options to show simultaneously.
Design Examples:
Design Solution:
Place all options in a list that is shown on demand by the user. If users need to make a selection from the available options, they can open the list to do so.
A variation on a drop-down list is a list box that shows a subset of the available options in a scrollable list.
When you use a drop-down list you should take into account these design best practices:
- Do not use drop-down lists with scroll-bars if the user needs to select multiple items. Since users do not have an overview of the selections made, they can easily get confused
- Use clear affordance for the drop-down list. Make sure the user notices that there is a dropdown list underneath the primary action button
- Use a good default value (http://www.userplus.org/web/design-patterns/form-design-default-value/) to help users in their selection
- Arrange the elements alphabetically, unless there is a more logical way to arrange them.
When to use:
When users need to make a mutually exclusive selection from a long list of items. If the user needs to select multiple items from a large set of items it is better to use a multi-select box.
Why use this solution (rationale):
Using drop-down lists can simplify the look and feel of a form. But bear in mind that drop-down lists hide the options from the user. Furthermore, making a selection from a large (scrollable) list requires the user to look at all the available options. If users are very familiar with the data that needs to be entered (e.g. birthday) it might be more efficient to allow them to enter the data themselves.
More info elsewhere:
- “Drop-down menus: use sparingly” on www.useit.com
- Drop-down button design pattern on http://quince.infragistics.com
- Pull-down button design pattern on www,welie.com
- Drop-down buttons on Microsoft Developer Network (www.msdn.com)
