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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Guidelines)
 
(6 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
== Purpose ==
 
== Purpose ==
A ''drop-down list'' is a GUI control which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value. A drop-down list works similar to a list box but hides the complete list until the user initiate the drop down. The disadvantage of drop-down lists compared to related controls like radio buttons or lists is that the options are not visible without further interaction.  
+
A ''combo box'' is a combination of a drop-down list and an edit control, thus allowing users to enter a value that isn't in the list. It behaves like a drop-down list and allows the user to choose from a list of existing items but adds the option to type a value directly into the control. Newly typed items are usually added to the list and can be selected next time. Combo boxes are typically applied to provide auto-complete or auto-type functionality in a convenient way to the user.
  
A ''combo box'' is a combination of a drop-down list and an edit control, thus allowing users to enter a value that isn't in the list. It behaves like a drop-down list and allows the user to choose from a list of existing items but adds the option to type a value directly into the control. Newly typed items are usually added to the list and can be selected next time. Combo boxes are typically applied to provide autocomplete or autotype functionality in a convenient way to the user.
+
The list provides auto-complete feature for the whole string, independently of the "editable" property. Given the items of "bike", "boat", and "car": 
 +
*If one types "b", the list selects "bike".
 +
*If one (rapidly) types "bo", it selects "boat".
 +
*If one types "c", it selects "car".
 +
The input field of the combo box ("editable" is true) marks the completed part of the item as selected, making it easy to change the completion.  
  
 
== Guidelines ==
 
== Guidelines ==
  
* Use a drop-down list for single selection of one out of many items.
+
=== Is this the right control ===
* Use a combo box for drop-down lists that can be extended by the user.
+
* Use a combo box for single selection of one out of many items of lists that can be extended by the user. Prefer a simple [[Projects/Usability/HIG/DropDown| drop-down list]] in case of read-only interaction.
* For only a few options, consider to use a set of [[Projects/Usability/HIG/Radio_Buttons|radio buttons]].
+
* Consider to replace the combo box by a [[Projects/Usability/HIG/ListView| list view]] with a connected [[Projects/Usability/HIG/edits| edit control]].
* For a single selection out of a large number of items (n>20), use a [[Projects/Usability/HIG/ListView| list view]].
+
 
* Prefer controls that show the options without further user interaction, except for the following cases:
+
=== Behavior ===
** 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.
+
* Drop-down lists and combo boxes can be distinguished visually (normally by the raised or lowered bevel). Do not override the common processing, e.g. by using a combo box and making it read only in order to simulate a simple drop-down list.
+
* Label the combo box with a descriptive label to the left of the combo box (cf. [[Projects/Usability/HIG/Form_Label_Alignment| Alignment]]).  
+
* Create a buddy relation so access keys are assigned.
+
 
* Show a maximum of eight items at once (maxVisibleItems=8).
 
* Show a maximum of eight items at once (maxVisibleItems=8).
* When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from a drop-down list.
+
* When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from the list.
* Do not have blank list items; use meta-options, e.g. (None) instead
+
 
* Do not add controls to the drop-down (e.g. check boxes for each item).
 
* Do not add controls to the drop-down (e.g. check boxes for each item).
 
* Place options that represent general options (e.g. all, none) at the beginning of the list.
 
* Place options that represent general options (e.g. all, none) at the beginning of the list.
 
* Sort list items in a logical order. Make sure sorting fits translation.
 
* Sort list items in a logical order. Make sure sorting fits translation.
* Use sentence style capitalization for the label and the options.
+
* 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".
* 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.
+
* Do not have blank list items; use meta-options, e.g. (None) instead
* 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''.
+
 
 +
=== Appearance ===
 +
* Combo boxes are distinguished visually from drop-down lists (normally by the raised or lowered bevel). Do not override the common processing, e.g. by using a combo box and making it read only in order to simulate a simple drop-down list.
 +
* If activating a choice affects the appearance or the enabled state of other controls, place them next to the combo box.
 +
* If certain controls in a configuration dialog are only relevant if a certain item is selected (i.e. they are dependent controls), disable them instead of hiding.
 +
* Label the combo box with a descriptive caption to the left (cf. [[Projects/Usability/HIG/Alignment| alignment]]).
 +
* Create a buddy relation so access keys are assigned.
 +
* Do not use ending punctuation (neither dot nor colon) for caption.
 +
* Use [[Projects/Usability/HIG/Capitalization|sentence style capitalization]] for items.
 +
 
 +
== Implementation ==
 +
[http://api.kde.org/4.10-api/kdelibs-apidocs/kdeui/html/classKComboBox.html KComboBox]
  
== Code snippets ==
+
[[Category:Usability]][[Category:Behavior]][[Category:Editing_and_Manipulation]][[Category:Selection]]

Latest revision as of 13:46, 2 August 2013


[edit] Purpose

A combo box is a combination of a drop-down list and an edit control, thus allowing users to enter a value that isn't in the list. It behaves like a drop-down list and allows the user to choose from a list of existing items but adds the option to type a value directly into the control. Newly typed items are usually added to the list and can be selected next time. Combo boxes are typically applied to provide auto-complete or auto-type functionality in a convenient way to the user.

The list provides auto-complete feature for the whole string, independently of the "editable" property. Given the items of "bike", "boat", and "car":

  • If one types "b", the list selects "bike".
  • If one (rapidly) types "bo", it selects "boat".
  • If one types "c", it selects "car".

The input field of the combo box ("editable" is true) marks the completed part of the item as selected, making it easy to change the completion.

[edit] Guidelines

[edit] Is this the right control

  • Use a combo box for single selection of one out of many items of lists that can be extended by the user. Prefer a simple drop-down list in case of read-only interaction.
  • Consider to replace the combo box by a list view with a connected edit control.

[edit] Behavior

  • Show a maximum of eight items at once (maxVisibleItems=8).
  • When possible apply changes immediately but do not initiate an action (like print, send, delete) when the user selects an item from the list.
  • Do not add controls to the drop-down (e.g. check boxes for each item).
  • Place options that represent general options (e.g. all, none) at the beginning of the list.
  • Sort list items in a logical order. Make sure sorting fits translation.
  • 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".
  • Do not have blank list items; use meta-options, e.g. (None) instead

[edit] Appearance

  • Combo boxes are distinguished visually from drop-down lists (normally by the raised or lowered bevel). Do not override the common processing, e.g. by using a combo box and making it read only in order to simulate a simple drop-down list.
  • If activating a choice affects the appearance or the enabled state of other controls, place them next to the combo box.
  • If certain controls in a configuration dialog are only relevant if a certain item is selected (i.e. they are dependent controls), disable them instead of hiding.
  • Label the combo box with a descriptive caption to the left (cf. alignment).
  • Create a buddy relation so access keys are assigned.
  • Do not use ending punctuation (neither dot nor colon) for caption.
  • Use sentence style capitalization for items.

[edit] Implementation

KComboBox


This page was last modified on 2 August 2013, at 13:46. This page has been accessed 5,054 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal