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

< Projects‎ | Usability‎ | HIG
Jump to: navigation, search
(How to use)
(How to use)
Line 12: Line 12:
 
* Don't use a check box if the opposite is ambiguous.
 
* Don't use a check box if the opposite is ambiguous.
 
* Don't use a check box for more than 10 options, use a (drop-down) list.
 
* Don't use a check box for more than 10 options, use a (drop-down) list.
 +
* For more than five options, use either a [[Projects/Usability/HIG/Combo_Box| check box list]] or the [[Projects/Usability/HIG/Combo_Box| dual-list pattern]].
 +
* 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| Plasma Active].
 +
* Do not add line breaks. If necessary place an additional label below the check box.
 +
* 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.
 +
* 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.
 +
 +
In discussion
 +
 
* Don't use the selection to perform commands or to dynamically display other controls and windows.
 
* Don't use the selection to perform commands or to dynamically display other controls and windows.
 
[[File:Checkbox4.png]]
 
[[File:Checkbox4.png]]
* 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.
 
* If certain controls in a configuration dialog are only relevant if a certain checkbox is checked (i.e. they are dependent controls), disable them instead of hiding them if that checkbox is unchecked.
 
  
 
=== Mixed state ===
 
=== Mixed state ===

Revision as of 13:44, 5 June 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.).

Examples

to be done

Guidelines

How to use

  • 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.
  • Don't use a check box if the opposite is ambiguous.
  • Don't use a check box for more than 10 options, use a (drop-down) list.
  • For more than five options, use either a check box list or the dual-list pattern.
  • 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 add line breaks. If necessary place an additional label below the check box.
  • 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.
  • 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.

In discussion

  • Don't use the selection to perform commands or to dynamically display other controls and windows.

HIG Checkbox4.png

Mixed 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.
  • Clicking a mixed state check box enables all child objects.

Appearance

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

Code snippets

to be done


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