Projects/Usability/HIG/Combo Box: Difference between revisions

From KDE TechBase
< Projects‎ | Usability‎ | HIG
No edit summary
No edit summary
Line 9: Line 9:
* Use sentence style capitalization for the label and the options.
* 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.
* 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.
* 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''.


* 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.


Controls that show the options without further user interaction are preferable, except for the following cases:
Controls that show the options without further user interaction are preferable, except for the following cases:
Line 16: Line 20:
* the contents are obvious from the label and the one selected item, for example ''Month'' and ''January''
* 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.
* 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''.

Revision as of 16:38, 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.

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.
  • 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.


  • 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.

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.