Common Controls
- Source PSD in Dropbox [Contains PSD of all controls in one file]
Used for:
- Presenting a list of actions related to the App content.
- Media Icons [Contains PSD of all media icons in one file]
Overlay Menus
Action Menu
Characteristics:
- Are opened from buttons within App content. These buttons are often inside Toolbars (eg: Browser's "Share" button).
- Contain 1 or more items.
- Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
- Title strings are optional.
- Are closed by:
- Selecting one of the actions.
- Pressing "Cancel" button (verbiage TBD)
Object Menu
Used for:
- Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg:
- Deleting a photo by selecting it's thumbnail, instead of having to open the full image.
- Flag an email by selecting it's preview, instead of having to open the full email.
- Call a Contact by selecting their name, instead of having to open their detailed information.
Characteristics:
- Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc)
- Menu appears after X seconds.
- Contain 1 or more items
- Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title.
- Title strings are not included (unlike Action Menus)
- Are closed by pressing "Cancel" button.
- Reuse the Action Menu interface.
- Future (v2):
- Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate.
- Selected object element will be highlighted (e.g.: darken surrounding content?)
- Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.
Banner
Used for:
- Relay information to the user. eg:
- Confirm a user action
- Alert to a system event
Characteristics:
- Most common used after Multi-Select edit, to confirm user action, and optional provide "Undo" input. eg:
- Deleting multiple photos from (Gallery)
- Deleting multiple emails (Email)
- Moving multiple emails (Email)
- Are positioned at the bottom of screen, covering underlying content.
- Appear for X seconds then automatically disappear.
- Can include an input, eg: "Undo" (optional)
- Can include an image (optional)
- Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
- Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).
Buttons
Used for:
- Buttons allow users to perform an action when tapped. The action is communicated using text and/or an icon.
Characteristics:
- Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target.
- States:
- Normal
- Pressed
- Disabled
- Types:
- Action buttons - used when there are only a few actions and a list is not required. The main action button uses a highlight colour.
- List buttons - used when displaying a list of actions or to trigger the display of a value selector
- Input field buttons - used to perform actions with input fields
- Special / custom buttons - used for specific actions including recording, dialing, and others.
Confirm
Used for:
- Prompts user to take action. eg:
- Confirm a deletion
- Respond to a system event (eg: restart device after a SIM card swap)
- Grant or deny a permission
Characteristics:
- Modal: occupies the screen and requires user input to clear.
- Consists: of
- Title
- Body (optional)
- Icon (optional)
- Input: Confirmation.
- Can customize label string
- Input: Cancel (optional).
- Can customize label string
Drawer
Filters
Used for:
- Secondary Navigation
- Filters can provide a second set of tabs, where tabs are already present.
- Data Filter
- Filters can be used to enable the user to view a single set of data in a different lens.
- eg: in Calendar, the filters they allow user to view time in different scales, from Day to Month).
Characteristics:
- Horizontal sequence of buttons.
- Only one button is Focused at a time.
- Best practice is to place filters within Toolbars, so they do not flow with the content.
- Left, Middle and Right buttons can be styled uniquely.
- Width: variable, depending on number of filters required within a single set (see Numbering). Should establish a maximum width, however.
- Numbering: minimum 2, maximum 5.
- Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.
Headers
Used for:
- Labeling the active view.
- Providing top-level navigation and inputs for the active view.
Characteristics:
- Horizontal full width bar that appears at top of screen in most apps
- Floats above content, with option to flow with content in some rare cases (eg: Browser).
- Heading text provides name of current view.
- Optional: heading text string can include text (eg: current unread email count)
- Present in most applications
Lists
Used for:
- Displaying an enumeration of a set of items
Characteristics:
- Varying heights (1—3 rows)
- Varying contents (from text only to image + text + button)
- Are composed of rows, and section headers
- Types:
- Action row (click anywhere to trigger input)
- Status indicator row
- Button row
- Link row
Progress & Activity Indicators
Used for:
- Providing user with visual feedback that a process is active.
Characteristics:
- May include an animated visual element, a text label, or some combination of the two. The progress and activity indicators may be used in modal windows or Inline, together with content or next to it.
Modal: They're used when the phone cannot be interrupted while loading data.
- Activity Bar: Used when an unknown amount of data is being downloaded.
- Progress Bar: Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
- Spinner: Used when data is being sent.
Non-Modal: Displays a looping animation, communicating to the user that the process is active.
- Activity Bar: Used when an unknown amount of data is being downloaded. Note that the activiy bas is background sensitive and there is an option for light screens and another for the dark ones.
- Progress Bar: Used when a known amount of data is being downloaded. When this process is paused for some reason the empty part of the bar will go from solid to the candy bar style so the user has feedback on the process that is taking place.
- Inline Spinner: Used when data is being sent.
Scrolling
Used for:
- Vertically slide text, images and/or video across the device's display.
Characteristics:
- Types:
- Scrollbar
- Index scrolling
Seek Bars
Used for:
- Scroll through content (i.e. a song or video)
Characteristics:
- Consists of track and knob (button w/ normal and pressed states)
- Optional images for left and right values
- Can be horizontal or vertical
Switches
Used for:
- Activates/Deactivates a given item. It's also used to select an element within a list.
Characteristics:
- Presents two mutually exclusive choices or states (used in table views only).
- Types:
- On/Off toggle
- Radio
- Checkbox
Tabs
Used for:
- Allows multiple instances to be contained within a single window. Tabs are used as a navigational widget for switching between sets of views.
Characteristics:
- Fill the full horizontal width.
- Number between 3—5.
- Positioned at bottom of screen.
- Can contain various elements (buttons, filters, indicators, etc).
- Versions:
- Text + icon
- Icon-only
States:
- Normal
- Pressed
- Active
- Disabled
Tool Bars
Used for:
- Contains actions, indicators, and navigation associated with the current view. eg:
- Delete selected items (button)
- Refresh content (button)
- Enter “Edit” mode (filter)
- View “Favorite” contacts only (filter)
Characteristics:
- 100% width. Fixed height.
- Does not scroll with content. Floats above.
- Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.
- Can contain various elements (buttons, filters, progress/activity indicators, etc).
Value Selector
Used for:
- Provides a way for the user to select one of more values, usually from a Form interface.
- Most commonly associated with forms (eg: Setting up a Calendar event).
Characteristics:
- Can include Title (optional)
- Types:
- Date
- Time
- Single-select list
- Multiple-select list
- Link to "Date Picker" CSS in Github
- Link to "Time Picker" CSS in Github
- Link to "Single/Multiple" CSS in Github
- Link to source PSD in Dropbox
