MUTUALLY EXCLUSIVE OPTIONS

Allows the user to choose from a set of mutually exclusive options that do not trigger any action.

Tags

Options, exclusive, check box, toggle buttons, list box, radio buttons, drop-down list, drop-down combination box, combo box

Status

Description

There are many applications for mutually-exclusive options. Depending on the situation different controls are used. The approach is somewhat different if the user is expected to be able to add a value to the list of available values. In this case the only viable control is a drop-down combination box.

Check boxes are used to show or change a setting. Its two states, set and unset, are shown by the presence or absence of a checkmark in the labelled box.

Figure 6-10 A typical group of check boxes

Radio buttons are used in groups to select from a mutually exclusive set of options. Only one radio button within a group may be set at any one time.

Figure 6-13 A typical group of radio buttons

Toggle buttons look similar to regular Buttons, but are used to show or change a state rather than initiate an action. A toggle button's two states, set and unset, are shown by its appearing "pushed in" or "popped out" respectively.

Figure 6-15 A typical group of toggle buttons

A list allows the user to inspect, manipulate(?) or select from a list of predefined items. Lists may have one or more columns, and contain text, graphics, simple controls, or a combination of all three.

Figure 6-19 A simple two column list

Drop-down lists are used to select from a predefined mutually exclusive set of options. They can be useful when there is insufficient space in a window to use a group of radio buttons or a single-selection list, with which they are functionally equivalent.

Figure 6-17 A drop-down list showing current selection (top) and the list of available choices when clicked on (bottom)

Drop-down combination boxes combine a text entry field and a drop-down list of pre-defined values. Selecting one of the pre-defined values sets the entry field to that value.

Figure 6-18 A drop-down combination box before and after its drop-down list is displayed

When to Use

Use a drop-down combination box when it is important that the user be able to enter a new value that is not already amongst the list of pre-defined choices. Otherwise use a list, drop-down list or radio button group as described below.

When having exactly two mutually exclusive options it is recommended to use a checkbox, a toggle button or two radio buttons (one for each state).

• Only use a checkbox if the two options are obvious to the user. Otherwise using two radio buttons are preferred as it makes the options clearer.
• Only use toggle buttons in groups, so they are not mistaken for regular buttons. Make the group behave like either a group of check boxes or a group of radio buttons, as required.

When having 2 - 8 mutually exclusive values it is recommended to use radio buttons.

When having 5 - 10 mutually exclusive values it is recommended to use a drop down list or a list. You should normally use a list instead of drop-down lists, as this control present all the available options at once without any further interaction. However, drop-down lists may be preferable where:

• there is little available space
• the list of options may change over time
• the contents of the hidden part of the menu are obvious from its label and the one selected item. For example, if you have an option menu labelled "Month:" with the item "January" selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look.

Drop-down lists can also be useful on toolbars, to replace a group of several mutually-exclusive toggle buttons. (relevant here?)

When having more than 10 mutually exclusive values it is recommended to use a list.

Do not use:

• to initiate an action when the user selects an option item (except in an instant-apply property or preference window).
• to affect the values of any other controls when the user selects an option item. It may sensitize, insensitize, hide or show other controls, however.
• groups of toggle buttons in dialogs unless space constraints force you to do so, or you need to provide consistency with a toolbar in your application. Check boxes or radio buttons are usually preferable, as they allow more descriptive labels and are less easily-confused with other types of control.
• a single radio button on its own. To represent a single setting, use a check box or two radio buttons, one for each state.
• 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.
• submenus on a drop-down list.

Current Usage

User Guide

Keyboard Navigation

Related Guidelines

A group of toggle buttons appears much like a toolbar, see Toolbar Guideline.

Specification

• Label lists, drop-down lists, drop-down combination boxes and groups of radio buttons, toggle buttons and check boxes respectively, with a label or descriptive heading above or to the left using sentence capitalization. =
• Use sentence capitalization for list items, drop-down list items, drop-down combination box list items, radio button labels and check box labels.
• Use header capitalization for toggle button labels, for example No Wallpaper, Embossed Logo.
• If your toggle button can display text, an icon, or both, choose which to display at runtime according to the user's setting in the GNOME Menus and Toolbars preference dialog.
• Use the same text or graphical label for a toggle button whether it is set or unset.
• 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.

• Always label column headers when used. If the column is too narrow for a sensible label, provide a tooltip for the column instead. Apart from its obvious use, this will help ensure that assistive technologies can describe the use of the column to visually impaired users.
• Use a frame around the group of radio buttons, check boxes or toggle buttons if necessary, but remember that blank space often works just as well and results in a less visually-cluttered dialog.
• Try to align groups of radio buttons or 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.
• Try to align groups of toggle buttons horizontally rather than vertically. This is how toggle buttons normally appear on a toolbar, so the user will be more familiar with this arrangement.
• Do not leave any space between toggle buttons in a group, otherwise they may look unrelated or may be mistaken for regular buttons.
• Make the list control large enough that it can show at least four items at a time without scrolling. For lists of ten or more items, increase this minimum size as appropriate.
• If the list appears in a dialog or utility window, consider making the window and the list within it resizable so that the user can choose how many list items are visible at a time without scrolling. Each time the user opens this dialog, set its dimensions to those that the user last resized it to.
• In most situations, column headers take up unnecessary space, and the extra label adds visual clutter. Only use column headers when:
• the list has more than one column, or
• the list has only one column, but the user may wish to re-order the list. (This is rarely useful with single column lists).
• In a group of radio buttons use a default value to make sure one button is always set.
• Provide an access key in the label that allows the user to set the radio button directly from the keyboard.
• Provide an access key in all check box and toggle button labels that allows the user to set or unset the check box and toggle button respectively directly from the keyboard.
• Provide an access key in the label that allows the user to give focus directly to the list, the drop-down list or drop-down combination box.
• Assign an access key to every drop-down list item. Ensure each access key is unique within the enclosing window or dialog, not just within the menu.

Comment: Is this a good idea? It seems more useful to navigate by typing the initial characters of the preferred item.

• Do not assign shortcut keys to drop-down list items by default. The user may assign their own shortcut keys in the usual way if they wish, however.
• If toggling a radio button affects the sensitivity of other controls, place the radio button immediately to the left of the controls that it affects. This helps to indicate that the controls are dependent on the state of the radio button.
• 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.
• If used in an instant-apply property or preference window, update the setting represented by the selected option immediately if possible. If this isn't possible due to e.g. the contents of the drop down combination box entry field being invalid while the user is still typing into it, update the related setting when the drop-down combination box loses focus instead.
• If the user types a value into the drop-down combination box that is not already in the drop-down list, add it to the list when the drop-down combination box loses focus so they can select it next time.
• Interpret user input into a drop-down combination box in a case-insensitive way. For example, if the user types blue, Blue and BLUE into the same drop-down combination box on different occasions, only store one of these in the combo's dropdown list, unless your application makes a distinction between the different forms (which is usually a bad idea).

Source Code

Terminology

See Also

Related Patterns

Competitive Approaches

Feedback

Usability Results and Feedback

Discussion

Change Log