Gaia/Design/BuildingBlocks

Common Controls

• Source PSD (contains all controls in one file)

Dialogue: Common Controls 121005

Action Menu

Used for:

• Presenting a list of actions related to the App content.

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)

• Link to CSS Work in Progress
• Link to source PSD [1]

Dialogue: Action Menus

Dialogue: Action Menus

Dialogue: Action Menus

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).

• Link to CSS [2]
• Link to source PSD [3]

Dialogue: Banner

Dialogue: Banner

Dialogue: Banner

Buttons

Characteristics:

• Have two components: visual target and hit target.
• Later is always larger. Has minimum sizes.
• Types:
  • Icon + text
  • Icon only
  • Text only
• States:
  • normal
  • Active (pressed)

• Link to CSS [4]
• Link to source PSD [5]

Dialogue: Buttons

Drawer

• Link to CSS Work in Progress

Dialogue: Banner

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.

• Link to CSS Work in Progress
• Link to source PSD [6]

Filters 1

Filters 1

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

• Link to "Headers" CSS [7]
• Link to "Edit Mode" CSS [8]
• Link to Source PSD [9]

Header 1

Header 1

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

• Link to CSS Work in Progress
• Link to Source PSD [10]

Lists 1

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.

• Link to CSS Work in Progress
• Link to source PSD [11]

Dialogue: Object Menu

Dialogue: Object Menu

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.
• Types:
  • Progress
    • Displays a loading animation that goes from 0 to 100 percent, communicating the current process status.
  • Activity
    • Displays a looping animation, communicating to the user that the process is active.

• Link to CSS Work in Progress
• Link to Source PSD [12]

Progress & Activity 1

Progress & Activity 1

Prompt

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

• Link to CSS [13]

Dialogue: Prompt

Dialogue: Prompt

Dialogue: Prompt

Dialogue: Prompt

Scrolling

Used for:

• Vertically slide text, images and/or video across the device's display.

Characteristics:

• Types:
  • Scrollbar
  • Index scrolling

• Link to CSS Work in Progress

Scrolling 1

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

• Link to CSS Work in Progress
• Link to Source PSD [14]

Seek Bars 1

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

• Link to CSS [15]
• Link to source PSD [16]

Switches 1

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

• Link to CSS : Work in Progress
• Link to source PSD [17]

Tabs 1

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).

• Link to CSS Work in Progress

Toolbars 1

Toolbars 1

Toolbars 2

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 CSS / Date - Time Picker Work in Progress
• Link to CSS / Single-Multiple [18]

Value Selector	Value Selector	Value Selector
Value Selector	Value Selector

Input Areas

• Link to CSS [19]
• Link to Source PSD [20]

Dialogue: Banner