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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(updated combo box)
Line 1: Line 1:
__NOTOC__
+
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.
  
Combo boxes 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.
 
  
* Use combo boxes instead of radio buttons for more than four mutually exclusive options.  
+
* For 3 or fewer options, use a set of [[Projects/Usability/HIG/Radio_Buttons|radio buttons]].
* Don't use them for less than three options or more than 10 choices. In the latter case, use lists instead.
+
* For 4 to 10 options, use a combo box instead of radio buttons.
* In general, controls that show the options without further user interaction are preferable, except for the following cases:
+
* For more than 10 options, use a list.
** the list of options may change over time,
+
* Label the combo box with a descriptive label to the left of the combo box.
** the contents are obvious from the label and the one selected item, for example ''Month'' and ''January''
+
* Use sentence style capitalization for the label and the options.
** 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.
+
* 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.
* Provide a descriptive label to the left (in left-to-right scripts), in some cases above the combo box. Don't forget to create a buddy relation so access keys are assigned.
+
 
 +
In general, 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 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''.
 
* 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''.
* 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 radio button or in the next row (indented).
 

Revision as of 17:11, 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.


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

In general, 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.

KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal