Projects/Usability/HIG/CheckBox: Difference between revisions
No edit summary |
|||
| Line 3: | Line 3: | ||
== 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 (on (vs. off), apply (vs. don't apply), show (vs. hide). etc.). | ||
== Example == | |||
== Guidelines == | == Guidelines == | ||
=== | === Is this the right control === | ||
* 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]] | *: [[File:HIG_Checkbox1.png]] | ||
* For more than five options, use either a [[Projects/Usability/HIG/ | * 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 | * Do not use the selection to perform commands. Consider using a [[../Buttons|push button]] instead. | ||
*: [[File: | *: [[File:HIG_Checkbox4.png]] | ||
=== 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. | * 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. | ||
*: [[File:HIG_Checkbox3.png]] | *: [[File: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. | * 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. | * Users must not be able to set a mixed state directly. | ||
| Line 24: | Line 22: | ||
=== Appearance === | === Appearance === | ||
* 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 use sliding switches in Desktop applications. They only offer good user interaction on touch screens, so they should only be used in applications for [http://community.kde.org/Plasma/Active Plasma Active]. | * 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 [http://community.kde.org/Plasma/Active Plasma Active]. | ||
* 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. | ||
| Line 30: | Line 31: | ||
* Check box labels are in [[Projects/Usability/HIG/Capitalization|sentence style capitalization]]. | * Check box labels are in [[Projects/Usability/HIG/Capitalization|sentence style capitalization]]. | ||
* For layout directions, see [[Projects/Usability/HIG/Form_Label_Alignment#Checkboxes| label alignment: check boxes]]. | * For layout directions, see [[Projects/Usability/HIG/Form_Label_Alignment#Checkboxes| label alignment: check boxes]]. | ||
* Label every check box. | |||
* Label every check box | |||
* Do not use ending punctuation (neither dot nor colon). | * Do not use ending punctuation (neither dot nor colon). | ||
== Implementation == | == Implementation == | ||
[http://qt-project.org/doc/qt-4.8/qcheckbox.html QCheckBox] | [http://qt-project.org/doc/qt-4.8/qcheckbox.html QCheckBox] | ||
Revision as of 09:06, 29 July 2013
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.).
Example
Guidelines
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.
- 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.
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.
- 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.
Appearance
- 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.
- 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.
- Do not separate check box and label. Clicking on both the box and the label should toggle the option.
- 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.
- Check box labels are in sentence style capitalization.
- For layout directions, see label alignment: check boxes.
- Label every check box.
- Do not use ending punctuation (neither dot nor colon).
