Projects/Usability/HIG/CheckBox: Difference between revisions

From KDE TechBase
< Projects‎ | Usability‎ | HIG
("one or more" seems more fitting than "one more")
No edit summary
Line 1: Line 1:
Check boxes are a widget to enable one or more options in a group.
__NOTOC__


=== Guidelines ===
== Purpose ==
* Use checkboxes for non-exclusive options. Mutually exclusive options should use a set of [[Projects/Usability/HIG/Radio_Buttons|radio buttons]].
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.). Check boxes are used to toggle an option on or off, or to select or deselect an item.
 
== Examples ==
to be done
 
== Guidelines ==
* 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 [http://techbase.kde.org/Projects/Usability/HIG/Combo_Box| combo box].
* Don't use a check box if the opposite is ambiguous.
* For more than 10 options, use a list.
* For more than 10 options, use a list.
* Checking a checkbox 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.
* Don't use the selection to perform commands or to dynamically display other controls and windows.
* Checkbox labels are in [[Projects/Usability/HIG/Capitalization|sentence style capitalization]]
* 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 enabled all child objects.
*  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 [[Projects/Usability/HIG/Capitalization|sentence style capitalization]]
 
== Code snippets ==
to be done

Revision as of 15:48, 28 May 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.). Check boxes are used to toggle an option on or off, or to select or deselect an item.

Examples

to be done

Guidelines

  • 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.
  • For more than 10 options, use a list.
  • Don't use the selection to perform commands or to dynamically display other controls and windows.
  • 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 enabled all child objects.
  • 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

Code snippets

to be done