Important: This information is out of date; for up-to-date information on using these design patterns, as implemented in Firefox OS building blocks, go to our Firefox OS building blocks page.
Multi-select mode is used to let the user perform "bulk actions;" that is, to select a number of items and then act on all of them at once. This may be something like deleting six emails from the user's inbox or choosing two photos to email to a friend. Multi-select mode actually encompasses two similar but functionally different modes: multi-select mode, for choosing multiple items and performing actions on them; and edit mode, which lets the user change existing data in the list (such as editing data in a table) and then save or discard the changes.
Either way, this mode is always used on lists of items—either a vertical list (such as a list of email messages) or a grid (such as a grid of photos in a photo gallery app). See the Coding guide for details on how to implement this user interface pattern.
Characteristics
- It's important to note that this is a mode, not a context switch. Animation and visual design should give the user the impression that they're in a temporary mode within the original view, not in a new view.
- Multi-select mode may also be known as "edit mode" or "select mode" depending on the use case.
- The header text should indicate the action the user is preparing to take, such as "Select photos" or "Select messages." When an item is selected, the header should be changed to indicate how many messages have been selected.
- The view should exit multi select mode when the user either selects a button that performs an action (such as a "Delete" button) or taps a cancel button.
- If the user has taken action (such as deleting three message threads), a status bar should appear to confirm the action.
Visuals
Multi-select modeHere we see multi-select mode being used to present an interface that allows the user to choose text messages to delete. |
Edit mode |