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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(Purpose)
 
(11 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
== Purpose ==
 
== Purpose ==
A ''check box'' is a control that permits the user to make multiple selections from a number of options. Check boxes are used to toggle an option on or off, or to select or deselect an item. Users make a decision between two clearly opposite choices (on (vs. off), apply (vs. don't apply), show (vs. hide). etc.).
+
A ''check box'' is a control that permits the user to make multiple selections from a number of options. Check boxes are used to toggle an option on or off, or to select or deselect an item. Users make a decision between two clearly opposite choices, e.g. 'on vs. off', 'apply vs. don't apply', 'show vs. hide'.
 +
 
 
== Example ==
 
== Example ==
 
== Guidelines ==
 
== Guidelines ==
Line 8: Line 9:
 
* Use check boxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of [[Projects/Usability/HIG/Radio_Buttons| radio buttons]] or a [[Projects/Usability/HIG/Combo_Box| combo box]].
 
* Use check boxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of [[Projects/Usability/HIG/Radio_Buttons| radio buttons]] or a [[Projects/Usability/HIG/Combo_Box| combo box]].
 
* Do not use a check box if the opposite is ambiguous.
 
* Do not use a check box if the opposite is ambiguous.
*: [[File:HIG_Checkbox1.png]]
+
*: [[Image:Ambiguous_Opposite_Bad.png]]
 +
*: ↑ BAD: User has to guess what the opposite of "Landscape" is.
 +
*: [[Image:Ambiguous_Opposite_Good.png]]
 +
*: ↑ GOOD: Using two radio buttons instead of a check box removes the need to guess.
 
* For more than five options, use either a [[Projects/Usability/HIG/ListView| list view]] or the [[Projects/Usability/HIG/SOU_Workspace/Two_Lists | dual-list pattern]] in case of multiple selections.
 
* For more than five options, use either a [[Projects/Usability/HIG/ListView| list view]] or the [[Projects/Usability/HIG/SOU_Workspace/Two_Lists | dual-list pattern]] in case of multiple selections.
 
* Do not use the selection to perform commands. Consider using a [[../Buttons|push button]] instead.
 
* Do not use the selection to perform commands. Consider using a [[../Buttons|push button]] instead.
Line 22: Line 26:
  
 
=== Appearance ===
 
=== Appearance ===
 +
* The text of a check box is on the right of its tick rectangle, which can make it difficult to avoid blank areas on the left side of the form. To keep the layout of the form balanced you can use one of the following approaches:
 +
** Group check boxes together in the widget column and add a label describing the group in the label column.
 +
**: [[Image:Grouped_checkboxes.png|frame|center|Grouped checkboxes]]
 +
** Make the check boxes span the two columns, but keep them at the bottom of the form. <font color="blue">Remark: This interferes with other layout guidelines</font>
 +
**: [[Image:Two_column_checkboxes.png|frame|center|Checkboxes spanning two columns]]
 +
** If all else fails, add a label describing the checkbox on the left side of the checkbox, then set the text of the checkbox to "Enabled", "On", or similar.
 +
**: [[Image:Checkbox_separate_label.png|frame|center|Using a separate title label for the checkbox.]]
 +
* When options are subordinate to a check box (e.g. Audio level can only be set if the Activate Audio option is selected), this relation should be visualized by indenting the sub-options. There are two options to do so:
 +
** When you are using a left-aligned check box, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
 +
**: [[Image:Suboption_spacer.png|frame|center|Aligning sub-options with a horizontal spacer of SizeType "Minimum".]]
 +
** When you are using a check box that is placed right to its label, indent the sub-options in the same vertical axis as the check box.
 +
**:  [[Image:Suboption_right.png|frame|center|Aligning sub-options with the same vertical axis as the checkbox itself.]]
 +
 +
* If activating a choice affects the appearance or the enabled state of other controls, place them next to the check box (group).
 +
* Align check boxes vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
 
* If certain controls in a configuration dialog are only relevant if a certain check box is checked (i.e. they are dependent controls), disable them instead of hiding them if that check box is unchecked.
 
* If certain controls in a configuration dialog are only relevant if a certain check box is checked (i.e. they are dependent controls), disable them instead of hiding them if that check box is unchecked.
* Do not add line breaks. If necessary place an additional label below the check box.
+
 
*: [[File:HIG_Checkbox2.png]]
+
 
* Do not separate check box and label. Clicking on both the box and the label should toggle the option.
 
* Do not separate check box and label. Clicking on both the box and the label should toggle the option.
 
*: [[File:HIG_Checkbox5.png]]
 
*: [[File:HIG_Checkbox5.png]]
* Align groups of check boxes vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
+
* Do not add line breaks. If necessary place an additional label below the check box.
* Check box labels are in [[Projects/Usability/HIG/Capitalization|sentence style capitalization]].
+
*: [[File:HIG_Checkbox2.png]]
* For layout directions, see [[Projects/Usability/HIG/Form_Label_Alignment#Checkboxes| label alignment: check boxes]].
+
* Label a group of check box with a descriptive caption to the top left of the group (cf. [[Projects/Usability/HIG/Alignment| Alignment]]).
* Label every check box.
+
* Create a buddy relation so access keys are assigned.
* Do not use ending punctuation (neither dot nor colon).
+
* Use [[Projects/Usability/HIG/Capitalization|sentence style capitalization]] for check box items.
 +
* Do not use ending punctuation (neither dot nor colon) for group label.
  
 
== Implementation ==
 
== Implementation ==
[http://qt-project.org/doc/qt-4.8/qcheckbox.html QCheckBox]
+
{{qt|QCheckBox}}
 +
 
 +
[[Category:Usability]]
 +
[[Category:Behavior|Check Box]]
 +
[[Category:Editing_and_Manipulation]]
 +
[[Category:Selection]]

Latest revision as of 10:28, 15 January 2014


[edit] Purpose

A check box is a control that permits the user to make multiple selections from a number of options. Check boxes are used to toggle an option on or off, or to select or deselect an item. Users make a decision between two clearly opposite choices, e.g. 'on vs. off', 'apply vs. don't apply', 'show vs. hide'.

[edit] Example

[edit] Guidelines

[edit] Is this the right control

  • Use check boxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.
  • Do not use a check box if the opposite is ambiguous.
    Ambiguous Opposite Bad.png
    ↑ BAD: User has to guess what the opposite of "Landscape" is.
    Ambiguous Opposite Good.png
    ↑ GOOD: Using two radio buttons instead of a check box removes the need to guess.
  • For more than five options, use either a list view or the dual-list pattern in case of multiple selections.
  • Do not use the selection to perform commands. Consider using a push button instead.
    HIG Checkbox4.png

[edit] Behavior

  • Checking a check box should always "enable" an option or change the state of an option to "on". Checking a negative or disabling option is a double negative and causes confusion and errors.
    HIG Checkbox3.png
  • Use the mixed state only to indicate that an option is set for some, but not all, child objects. Mixed state must not be used to represent a third state.
  • Users must not be able to set a mixed state directly.
  • Clicking a mixed state check box enables all child objects.
  • Do not use sliding switches in Desktop applications. They only offer good user interaction on touch screens, so they should only be used in applications for Plasma Active.

[edit] Appearance

  • The text of a check box is on the right of its tick rectangle, which can make it difficult to avoid blank areas on the left side of the form. To keep the layout of the form balanced you can use one of the following approaches:
    • Group check boxes together in the widget column and add a label describing the group in the label column.
      Grouped checkboxes
    • Make the check boxes span the two columns, but keep them at the bottom of the form. Remark: This interferes with other layout guidelines
      Checkboxes spanning two columns
    • If all else fails, add a label describing the checkbox on the left side of the checkbox, then set the text of the checkbox to "Enabled", "On", or similar.
      Using a separate title label for the checkbox.
  • When options are subordinate to a check box (e.g. Audio level can only be set if the Activate Audio option is selected), this relation should be visualized by indenting the sub-options. There are two options to do so:
    • When you are using a left-aligned check box, indent the sub-options by using a horizontal spacer of SizeType "Minimum".
      Aligning sub-options with a horizontal spacer of SizeType "Minimum".
    • When you are using a check box that is placed right to its label, indent the sub-options in the same vertical axis as the check box.
      Aligning sub-options with the same vertical axis as the checkbox itself.
  • If activating a choice affects the appearance or the enabled state of other controls, place them next to the check box (group).
  • Align check boxes vertically rather than horizontally, as this makes them easier to scan visually. Use horizontal or rectangular alignments only if they greatly improve the layout of the window.
  • If certain controls in a configuration dialog are only relevant if a certain check box is checked (i.e. they are dependent controls), disable them instead of hiding them if that check box is unchecked.
  • Do not separate check box and label. Clicking on both the box and the label should toggle the option.
    HIG Checkbox5.png
  • Do not add line breaks. If necessary place an additional label below the check box.
    HIG Checkbox2.png
  • Label a group of check box with a descriptive caption to the top left of the group (cf. Alignment).
  • Create a buddy relation so access keys are assigned.
  • Use sentence style capitalization for check box items.
  • Do not use ending punctuation (neither dot nor colon) for group label.

[edit] Implementation

QCheckBox


This page was last modified on 15 January 2014, at 10:28. This page has been accessed 6,989 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