Problem

Selections, either individual or multiple, must be made from a large, ordered dataset.

Select List

Solution

Any of the other patterns within this chapter, but especially the Vertical List and Grid items, may be expanded very simply by adding a checkbox, or other explicit and visible selection component.

For many selection methods, simply tapping or pressing the "OK/Enter" key on hover will serve to meet the needs of single selection. This pattern is used for multiple selections (more than one item may be checked) or when the selection may involve investigation and confirmation before committing to the selection.

Variations

There are two variations to the select list. Single select only allows one item to be selected, and then forbids subsequent selection, or deselects previous selections.

Multi-select allows checking more than one item in the set. The limit is set by the application, or the requesting application, and may include the entire set.

Many select lists allow switching between these modes. A valid case is for seamless switching -- when selecting a recipient, the user selects two or more. A single select was the use case but it became a multi-select function.

Interaction Details

The Select List pattern is likely to be implemented as a mode of another list. This mode may be entered contextually, due to a request from another application, or explicitly, via user action within the list view.

When an item is selected, the indicator will change immediately. When the selection method is made again, the indicator will change to the deselected state. If details are available for an item, such as viewing an image or selecting, the checkbox should have to be hit with some precision, and all other areas may result in viewing details.

Depending on the function, there may be a need for a "select all" function. Even if functions against all items could be performed alternatively (e.g. a "Delete all" function, separate from a "Select to Delete" function) it can be useful for alternative selection modes. The user may want to select most items, and shorten time by selecting all, then deselecting.

For all explicit selection methods, a "Done" function is required. This should be contextual, and carry a label associated with the larger task. "Delete selected items," "Send message to selected recipients," etc.

Especially for large data sets, it may be difficult for users to have made their selections. If the list is exited before commitment -- such as if the Back button is selected -- preserve the selection information. The exit may have been accidental, and when next carrying out the same task (e.g. adding recipients to that same draft message) present the last selections instead of an empty selection state.

Presentation Details

Selector items should be overlaid on the list items. Within a grid view, for example, the checkbox should be over the image itself.

A variation of the Location Within widget may be employed to indicate the number of selections. This is especially valuable when there is an easily-reached limit on the number of selections. This may also be used when the selection limit is high, and appear as it is approached.

To prevent errors, commitment of the selections should be prevented until at least one selection is made. This may be either by hiding or by "graying out" the relevant functions.

Antipatterns

Do not overthink the selector or indicator. Checkboxes work well. Radio buttons may seem to be the best choice for single select items, but the web form paradigm is not well understood by many users, especially novices, which are very common on mobile devices. Use checkboxes for all selections.

Don't let styling of the checkboxes get out of hand. The selected and unselected states should be not just differentiable, but identifiable without comparison.

Do not impose burdensome errors. If the user must be forbidden from making another selection, simply disallow. If a message is required, place it prominently, but away from the focus, and do not make it a dismissal-required modal dialog box.

Be sure the selection method is well-associated with the item being selected. Do not place checkboxes by floating meta-data, for example, but on the image itself.

Examples