Choosing between options
A great deal of an application's UI is devoted to helping the user make choices from a set of options. There are several elements in ACE which may be involved and each serves a different purpose.
To understand which element to use, consider:
- if the choice is persistent or temporary
- are the options mutually-exclusive
- are the options named or binary
- the number of options
- is an unselected state possible
Refer to Background for more details on these terms.
Examples
Binary choices
Binary choices are made with a checkbox or Icon Toggle. Note the checkbox allows longer, more descriptive labels.
Compatible choices
Compatible options are chosen with a set of checkboxes.
Mutually-exclusive choices
A choice between named, mutually-exclusive options can be made with radio buttons. In some cases a checkbox could be used as well, however radio buttons allow a full description of the choices and lets the user actively choose between the two. A checkbox can only positively select one state, the other state is implied by the absence of a selection - which does not feel as definite or reassuring.
While radio buttons can technically start without any option selected, there is no way to de-select once the user makes a first choice so the pattern should be avoided.
Toggles can also handle a choice between two options, with one option always selected. Toggles should be used when the choice is particularly important; Caution Toggles should be used for choices with some risk associated.
A choice between three or more named options can be made with radio buttons.
Temporary choices with immediate effect
A temporary, immediately-applied choice between named options can be made with Pressed Buttons.
For more details, refer to Pressed Buttons documentation.
A temporary choice can be changed using with Closeable Lozenges.
For more detail on reflecting and refining choices, refer to Lozenge documentation.
Background
Compatible vs mutually-exclusive
Compatible options can be combined. That is, more than one option can be selected at the same time. For example, several user groups may be included in an activity report.
Mutually-exclusive options can not be combined. The user must choose one of the available options. For example, a user's access can not be both enabled and disabled for a specific data room.
Binary or named states
A binary option is where one thing can be described as on or off; or a yes-or-no question. For example a simple light switch can be on or off.
If the choice is between different things, or different states with some nuance, then named states are required. If a switch controlled a light being red or green, named states would be required.
The number of options
The number of options dictates which elements can be used. Examples:
- A single checkbox can handle a binary state, but a single radio button cannot handle a binary state.
- A single checkbox can not separately describe two options, while radio buttons and Toggles can.
- A Toggle can only ever handle two options, while radio buttons can handle three or more.
Unselected
In some cases it is possible to deselect all options; or there may be an initially-unselected state.
- checkboxes can be unselected
- radio buttons can be in an unselected state (although once any choice has been made, it is not possible to return to the unselected state)
- it is not possible for Toggles to be in an unselected state, one of the options must always be selected
Persistent vs Temporary
Re-numbering documents and changing data room settings are persistent choices, as the changes are maintained until further interaction. Persistent choices usually result in some form of data being stored or changed.
Filtering the document index or sorting a table are temporary choices, as the resulting view is updated immediately but not permanently. Temporary choices rarely require data storage or changes. Most of the time temporary choices are made with controls that simply manipulate the current page.