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.
Patterns are methods of interaction with your app. Unlike the building blocks, which describe particular user interface elements, patterns are ways those building blocks are presented.
Drawer
|
|
Details
Coding guide
|
Drawers provide access to top-level navigation options that may be too numerous for a tabs or toolbar interface. Drawers can also be used to access user-generated content such as browser tabs, accounts in an email or messaging client, and so forth. Drawers slide out from the edge of the screen at the user's request (pushing the underlying content aside), then slide back out of the way when no longer needed. See the Coding guide for details on implementing drawers in your apps.
Characteristics
- Drawers provide access to top-level navigation links that are usually user-configurable. For example, these are used for accessing accounts in the Email and Calendar apps, and for the list of open tabs in the Browser app.
- Drawers can also be used to provide access to secondary or "power-user" features.
- Drawers should be positioned on the left side of the screen.
- To open a drawer, the user taps the standard "drawer" button. The drawer then slides in from the left side of the display, pushing aside the content below.
- The drawer is closed when the user either taps the "drawer" button again, or anywhere on the visible area of the underlying primary interface. The drawer then slides off the screen to the left, pulling the primary content back into its usual position behind it.
- Drawers are usually depicted as being one layer behind the primary interface.
- Drawers are of variable width; however, enough room must be left for the drawer button on the primary interface to remain fully visible.
|
Entry sheet
|
|
Details
Coding guide
|
An entry sheet is used to edit a single setting or option in your app that either contains a large number of possible values (such as a text entry form or a long list of choices) or requires multiple inputs or selections, such as configuring and connecting to a WiFi network.
Characteristics
- Occupies the entire screen.
- The user should be given the impression that they're on the same page as whatever user interface element that caused the entry sheet to open; the entry sheet should be perceived as a temporary modal overlay. The user hasn't navigated deeper into a hierarchy of interface pages. To reinforce this impression:
- Valid animations when opening an entry sheet include things like sliding in from the top or bottom, a cross-fade, scaling in, and the like.
- "Cancel" buttons should be used instead of "Back" buttons.
- Every element in the entry sheet must be related to adjusting a single setting, and there should not be links to other pages, lists, or dialog boxes.
- The user will typically have two options to close an entry sheet: a Cancel button, and a button that accepts the user's data (this may be labeled "Done", "Send", "Join", or the like—it should be a verb describing what action will occur when the sheet is closed).
|
Multi select (Edit mode or Select mode)
|
|
Details
Coding guide
|
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.
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.
|
Search
|
|
Details
Coding guide
|
Characteristics
- When the user taps on the search input box, the virtual keyboard is activated.
- The user can tap on the icon at the right end of the search box to clear the input box but keep the virtual keyboard active.
- When using the search bar to filter lists of items, it's typically displayed at the top of the list, and should scroll with the list's items.
|