Guidelines

• Do not initiate an action when the user clicks a check box. However, if used in an instant-apply property or preference window, update the setting represented by the check box immediately.

• Clicking a check box should not affect the values of any other controls. It may sensitize, insensitize, hide or show other controls, however.

• If toggling a check box affects the sensitivity of other controls, place the check box immediately above or to the left of the controls that it affects. This helps to indicate that the controls are dependent on the state of the check box.

• Use sentence capitalization for check box labels, for example Use custom font.

• A check box should express a positive and useful state or action. For example, a checked check box

  Warn me whenever a disk is nearly full

  is more obviously useful than an unchecked check box

  Ignore disk-full warnings

  . Don’t implement a check box with a label beginning with

  Don’t

  ,

  Do not

  ,

  Hide

  , or similar; instead, reverse its function so that the label can be positive. And avoid beginning check box labels with words like

  Enable

  or

  Use

  ; instead, reword them to express their usefulness.

• Label check boxes to clearly indicate the effects of both their checked and unchecked states, for example, Show icons in menus. Where this proves difficult, consider using two radio buttons instead so both states can be given labels. For example:

  Figure 6.11. Ambiguous check box (top), radio buttons work better in this case (bottom)

  The single check box in this example is ambiguous, as it is not clear where the "progress indicator" will go if the box is unchecked. Two radio buttons are better in this case, as they make the options clear.

• Provide an access key in all check box labels that allows the user to set or unset the check box directly from the keyboard.

• If the check box represents a setting in a multiple selection that is set for some objects in the selection and unset for others, show the check box in its mixed state. For example:

  Figure 6.12. Check boxes (right) showing properties for a multiple selection of files in Nautilus (left)

  In this example, both selected files are hidden (since their filenames start with "."), and the emblems on their icons show that neither file is writable, but one is readable. The Readable check box is therefore shown in its mixed state. At time of writing, the exact visual appearance of a mixed state check box in gtk was undecided.At time of writing, the exact visual appearance of a mixed state check box in gtk was undecided.

  When a check box is in its mixed state:

  • clicking the box once should check the box, applying that setting (when confirmed) to all the selected objects

  • clicking the box a second time should uncheck the box, removing that setting (when confirmed) to all the selected objects

  • clicking the box a third time should return the box to its mixed state, restoring each selected object's original value for that setting (when confirmed)

• Label a group of check boxes with a descriptive heading above or to the left of the group.

• Use a frame around the group if necessary, but remember that blank space often works just as well and results in a less visually-cluttered dialog.

• Do not place more than about eight check boxes under the same group heading. If you need more than eight, try to use blank space, heading labels or frames to divide them into smaller groups. Otherwise, consider using a check box list instead— but you probably also need to think about how to simplify your user interface.

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