Difference between revisions of "Projects/Usability/HIG/Combo Box"

Revision as of 17:12, 1 August 2008

Combo boxes (also known as a dropdown box) offer the user a choice of two or more mutually exclusive options. Their disadvantage compared to related controls like radio buttons or lists is that the options are not visible without further interaction.

General Guidelines

• For 3 or fewer options, use a set of radio buttons.
• For 4 to 10 options, use a combo box instead of radio buttons.
• For more than 10 options, use a list.
• Label the combo box with a descriptive label to the left of the combo box.
• Use sentence style capitalization for the label and the options.
• If activating a choice affects the appearance or the enabled state of other controls, place them next to the combo box or below the combo box with a space indentation.

Controls that show the options without further user interaction are preferable, except for the following cases:

• the list of options may change over time,
• the contents are obvious from the label and the one selected item, for example Month and January
• the combo box is part of a related sequence of controls. For example, to set a reminder to ring 5 hours or minutes before or after an event.

Accessibility Guidelines

• Don't initiate an action when the user selects an item from a drop-down list.
• Don't forget to create a buddy relation so access keys are assigned.
• Make sure the items are easily accessible via keyboard by moving distinctive letters to the beginning of each option. For example, in a list of countries on continents, write Germany (Europe) instead of Europe/Germany.