Mobile Design Pattern: Multi-selection List
This design pattern is part of the Mobile Design Patterns series.
A list whose purpose is to clearly emphasize (and enable) selection of multiple items in any order.
- Can be extremely useful in high productivity scenarios such as deletion or management of email.
- Will require scrolling if the list is long.
- Can require many clicks on indirect manipulation devices as activation of each control will require two clicks (one to focus, and one to activate).
- When the user is required to provide multiple parameters or data choices ex. Choose several email recipients, choose several Tags to filter a list.
- A list of choices is provided with a check box or tick box appended to each item.
- Unless the user is returning to a previously edited multi-selection list, all items begin unchecked.
- Under certain contexts, the selection is part of a larger task. In this case, a task-specific control is provided to enable the user to indicate completion. Ex. In the image above, the list is triggered as part of an ‘image-tagging’ task. The OK command is therefore provided to enable the user to complete the selection of tags and appends these to the (previously) chosen image.
• On indirect manipulation devices, the user navigates up and down the list using the Up and Down keys. Similar to radio buttons, the user must first focus the control, then click to activate it. • Selections are indicated by clicking the Center and/or Left softkey. Once an item has been selected, a tick is added to that list item’s tick box. • The user is free to tick and un-tick as many items as needed.
Direct manipulation and web
- On touch devices, the user simply taps a tick box to mark the selection. Once an item has been selected, a tick is added to that list item’s check box.
- The user is free to tick and un-tick as many items as needed.
- Tick boxes are now a very well recognized control. Where possible, do not reinvent the wheel (or in this case the box)—especially if the technology or platform you are designing for includes a native tick box component.
- When styling tick boxes, ensure there is clear contrast between the active and inactive state.
Figure: This S60 application uses a custom tick box component. The tick has been replaced with a check mark and the overall style of the component differs from the standard S60 offering.