84
Gaia UX Patterns & Building Blocks May 25 2012 Gaia UX Patterns & Building Blocks

Gaia UX - Mozilla · 5/25/2012  · Gaia UX Patterns & Building Blocks May 25 2012 Contacts Browser: Overview Characteristics • Enable • User selects an “Add” button. •

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UXPatterns &Building Blocks

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:Table of Contents

Buttons Scrolling

Contacts Browser Search

Contacts Quick Select Seek Bars

Dialogues Settings

Dialogues - Alerts Status Bar

Dialogues - Menus Switches

Dialogues - Popups System Indicators

Dialogues - Toasts System Nav

Drawer Tabs

Entry Sheet Text Input

Filters Toolbars

Forms Value Selectors

Headers

Multi Select

Progress & Activity

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:Key

Tap Press-and-Hold

SpreadPinch

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Buttons

Gaia UX Patterns & Building Blocks May 25 2012

Contacts Browser:Overview

Characteristics

• Have two components: visual target and hit target.• Later is always larger. Has minimum sizes.• Types:

• Icon + text• Icon only• Text only

Used for

• ...

States

• ...

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Contacts Browser

Gaia UX Patterns & Building Blocks May 25 2012

Contacts Browser:Overview

Characteristics

• Enable • User selects an “Add” button. • They are taken to a full screen list of all available

contacts, with options to filter-search the list. “Cancel” closes the Browser without making a select.

• Tapping a contact closes the Browser and adds the selected contact to the selected field.

Used for

• Selecting a contact to add to a correspondence (eg: Email, Message)

3:10

A

Add ContactCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Adam AdamsCompany name

Blake Adams

Miguel AdamsCompany name

Daryl Adams

B

Timothy Blake

Winston Blake

Karl BlakeCompany name

3:10

A

Add ContactCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Adam AdamsCompany name

Blake Adams

Miguel AdamsCompany name

Daryl Adams

Adam AdamsCompany name

Blake Adams

Miguel AdamsCompany name

3:10

Select ContactCancel

Search

A

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Adam AdamsCompany name

Blake Adams

Miguel AdamsCompany name

Daryl Adams

B

Timothy Blake

Winston Blake

Karl BlakeCompany name

All Favorites

3:10

Sa

Sam Foster

Sara MendesCompany name

Tim Saxon

Salud JuradoCompany name

Sarah Foster

Sara MendesCompany name

Search

Cancel

1

2

3:10

Sa

Sam Foster

Sara MendesCompany name

Tim Saxon

Salud JuradoCompany name

Sarah Foster

Sally Mendes

Tom Saxon

Salud Jurado

Sam Foster

Cancel

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Contacts Quick Select

Gaia UX Patterns & Building Blocks May 25 2012

Contact Quick Select:Examples

Characteristics

• The user highlights an entry field (eg: To), and the keyboard appears.

• As the user types, the system attempts to draw matches from the contacts.

• If one or matches are found, a small list appears, highlighting the matching contacts.

• To make a selection, the user can tap one of the rows, closing the list and adding that contact to the highlighted field. • Alternatively, if the user wishes to clear the list, they

can type Backspace until the field is clear, and there are therefore no more matches. The list then disappears.

Used for:

• Selecting a known contact quickly, without leaving the current view.

3:10

Send

To:

Subject:

Compose emailCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

3:10

Send

To:

Subject:

Compose emailCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sam [email protected]

Sara [email protected]

Tim [email protected]

Salud [email protected]

Sa

3:10

Send

To:

Subject:

Compose emailCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sam [email protected]

Sara [email protected]

Tim [email protected]

Salud [email protected]

Sa

3:10

Send

To:

Subject:

Compose emailCancel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sam Foster

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Dialogue:Alerts

Gaia UX Patterns & Building Blocks May 25 2012

Alerts:Overview

Characteristics

• Consist of• Title• Body (optional)• Dismissal button (eg: “Cancel”)• Confirmation button (eg: “Delete”)

Used for:

• ...

Alerts:Examples

Are you sure you want to delete this thread?

Cancel Delete

Clear Private Data?Browsing settings, including passwords

and cookies, will be deleteed.

Cancel Delete

3:10

Are you sure you want to delete this thread?

Cancel Delete

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Dialogue:Menus

Gaia UX Patterns & Building Blocks May 25 2012

Menus:Overview

Characteristics

• Menus are value selectors spawned from Toolbars or Forms selections.

• Vary in height, to a maximum of Keyboard component height.

• Optional header text.• Close by:

• Selecting one of items• Tap cancel button• Tap “OK” button, if available (label name TBD)

Used for:

• . . .

MenusExamples

Share

Email

Send Message

Set as Wallpaper

Assign to Contact

Cancel

Delete

Cancel

3:10

Save

Title:

Location:

Date:

Add eventCancel

All Day

From: To:

10:00 AM 11:00 AMRepeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

3:10

Save

Title:

Location:

Date:

Add eventCancel

All Day

From: To:

10:00 AM 11:00 AMRepeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

None

Every Day

Every Week

Every Month

Cancel

3:10

Save

Title:

Location:

Date:

Add eventCancel

All Day

From: To:

10:00 AM 11:00 AMRepeat: Alert:

Attendees:

Every Day None

Notes:

Monday, April 23

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Dialogue:Popups

Gaia UX Patterns & Building Blocks May 25 2012

Popups:Overview

Characteristics

• User presses-and-holds a selectable item (can be a list row, a phone number, a browser link, etc)

• Menu displaying one of more options pops up after X seconds.

• Menu positions itself immediately above or below the selected element (depending on the amount of available screen space)

• Optional: the selected element is visually highlighted in some way (e.g.: darken surrounding content, or draw border, etc)

• User can press anywhere else on screen to change the focus and close the popup.

Used for:

• . . .

Popups:Examples

Email

Send Message

Set as Wallpaper

Assign to Contact

Assign to Contact

3:10

NewInbox (2)

Edit Refresh

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

3:10

NewInbox (2)

Edit Refresh

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Flag

Mark as Unread

Move

Delete

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonCompany name

NewMessagesEdit

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonCompany name

NewMessagesEdit

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

Call

Send text message

Delete

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Dialgoues:Toasts

Gaia UX Patterns & Building Blocks May 25 2012

Toasts:Overview

Characteristics

• Typically appear after a multi-select edit. eg:• Deleting multiple photos from (Gallery)• Deleting multiple emails (Email)• Moving multiple emails (Email)

• Toasts are positioned at the bottom of—and layered on top of—their associated content view.

• Toasts should be non-intrusive, and never cover up other UI elements (eg: toolbar, tabs, etc).

Used for:

• Toasts confirm a user action, and optionally provide a follow up action (eg: Undo).

ToastsExamples

2 messages deleted Undo

Private data cleared

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Drawer

Gaia UX Patterns & Building Blocks May 25 2012

Drawer:Overview

Characteristics

• Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).

• Is also a great place to tuck secondary or power-user features, such as links to app Settings.

• Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).

• Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).

• Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.

• Traditionally visually depicted as being one layer below the primary interface, and sliding in from the side via animation.

• Width: variable, but must always leave sufficient room for the "Drawer" button on the primary interface to remain fully visible.

Used for:

• Providing access to top level navigation links that may be too numerous for a Tabs pattern, or user-generated, (eg: Tabs, user accounts etc).

3:10

Calendars

Work

Family

Soccer

3:10

Work

Inbox

Flagged

Drafts

Sent

Trash

12

Accounts

3:10

5by5 | The Critical Path # 38: Seeking Enlightenment

Talking Points Memo | Breaking News

5by5 | The Critical Path # 38: Seeking Enlightenment

3

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Entry Sheet

Gaia UX Patterns & Building Blocks May 25 2012

Entry Sheet:Overview

Characteristics

• Occupies the full screen• User should be given impression that they are on the

same page, and that the Entry Sheet is merely a temporary modal overlay. They have not navigated one level deeper in the hierarchy.• To reinforce this... • Valid animations could include slide in from top,

from bottom, cross fade, scale in, etc.• “Cancel” buttons are used instead of “Back”.

• Every element within the Entry Sheet must be related to adjusting the single setting; Settings Panels should not contain links to other pages or lists.

• Closing:• “Cancel”• Varies: “Done”, “Join”, “Send”, etc.

Used for:

• The user wants to edit a single setting that:• Contains a large number of possible values.

• eg: Text entry forms, long lists, • [or] Requires multipe inputs or selections

• eg: WiFi network connection process.

3:10

JoinJoin NetworkCancel

•••Password:

MyHomeNetworkSecure - WPA2

Show password

3:10

Title:

Location:

Date:

Add event

All Day

From: To:

10:00 AM 11:00 AMRepeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

DoneCancel

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Forms

Gaia UX Patterns & Building Blocks May 25 2012

Forms:Overview

Characteristics

• ...

Used for:

• ...

3:10

JoinJoin NetworkCancel

•••Password:

MyHomeNetworkSecure - WPA2

Show password

3:10

Save

Title:

Location:

Date:

Add eventCancel

All Day

From: To:

10:00 AM 11:00 AMRepeat: Alert:

Attendees:

None None

Notes:

Monday, April 23

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Filters

Gaia UX Patterns & Building Blocks May 25 2012

Filters:Overview

Characteristics

• Horiztonal 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.

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

Button states

• Normal• Focused• Disabled

Filters:Examples

All Favorites

All History Dialer Contacts Message

All

Day Week Month

3:10

Need to add mockups..

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Headers

Gaia UX Patterns & Building Blocks May 25 2012

Headers:Overview

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

Used for • ...

Headers:Examples

NewInbox (2)

NewMessagesEdit

Need to capture all headers...

Cancel Select photo

3:10

Need to add mockups..

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Multi Select

Gaia UX Patterns & Building Blocks May 25 2012

Multi Select:Overview

Characteristics

• Is entered by...• Is a “mode”, not a section. Animation and visual design should

give user the impression that they are in a temporary mode within the original view, not that there are in a differerent view.

• Can be called “Edit” or “Select” mode, depending on the use case.

• Header text should indicate action being taken (eg: “Select photos”). Once an item has been selected, text should update to “X selected”, where X = quantity of selected items.

• Closes once the user:• ...completes one of the available actions (eg: “Delete”).• ...or taps “Cancel” button.

• Closing resturns user to the previous view.• If user has taken action (eg: delete 3 message threads), a Toast

should appear, confirming the action.

Used for • Enables user to perform “bulk actions”, such as deleting 6

emails from a roll of 20, or selecting 3 photos to email to a friend.

• Is used on lists of items (eg: vertical list of emails in Inbox, or grid of photos in Gallery)

States • Normal• Focused• Disabled

3:10

NewInbox (2)

Edit Refresh

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

3:10

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

Edit

Flag Mark Move Delete

Cancel

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Yesterday

Yesterday

11:30 am

3:10

2 selected

Flag Mark Move Delete

Cancel

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

3:10

2 selected

Flag Mark Move Delete

Cancel

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

3:10

NewInbox (2)

Edit Refresh

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Ray MooreRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Judy BancroftRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

2 messages deleted Undo

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonCompany name

NewMessagesEdit

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonExcerpt from message eiusmod temporar...

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

Delete

EditCancel

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonExcerpt from message eiusmod temporar...

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

1 selectedCancel

Delete

3:10

Are you sure you want to delete this thread?

Cancel Delete

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonExcerpt from message eiusmod temporar...

Sarah ChristiansonExcerpt from message eiusmod temporar...

NewMessagesEdit

11:30 am

11:15 am

11:30 am

11:30 am

11:30 am

11:30 am

1 thread deleted Undo

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Tabs

Gaia UX Patterns & Building Blocks May 25 2012

Tabs:Overview

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

Used for

• Contains actions and/or navigation associated with the currently-visible view. eg: • Delete selected items (button)• Refresh content (button)• Enter “Edit” mode (filter)• View “Favorite” contacts only (filter)

• Can also contain progress or activity indicators (this is less common, though).

States • Normal• Focused• Disabled

Tabs:Examples

Dialer History Contacts

Dialer History Contacts Share Camera

3:10

Today

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mark AdamsExcerpt from message eiusmod tempor in..

Darryl CharlestonExcerpt from message eiusmod temporar...

Miguel DomExcerpt from message eiusmod tempor in...

Daryl AdamsExcerpt from message eiusmod tempor in...

Yesterday

Timothy BlakeExcerpt from message eiusmod temporar...

Winston CharlesExcerpt from message eiusmod temporar...

Karl SaxonCompany name

NewMessagesEdit

11:30 am

11:15 am

10:21 am

11:30 am

11:30 am

11:30 am

11:30 am

Gaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Toolbars

Gaia UX Patterns & Building Blocks May 25 2012

Toolbars:Overview

Characteristics

• 100% wide Horiztonal element.• Fixed height, consistent system-wide.• Does not scroll with content. Floats above.• Contents inside toolbar do not scroll.• Positioned at bottom of screen.• Can contain various elements (buttons, filters, indicators,

etc).

Used for • Contains actions and/or navigation associated with the

currently-visible view. eg: • Delete selected items (button)• Refresh content (button)• Enter “Edit” mode (filter)• View “Favorite” contacts only (filter)

• Can also contain progress or activity indicators (this is less common, though).

Toolbars:Examples

Delete

All Favorites

Flag Mark Move Delete

Day Week MonthToday

Select

3:10

NewInbox (2)

Edit Refresh

John RossRe: Subject of the messageLorem ipsum dolor sit amet, consect...

2:00 pm

Blake AdamsRe: Subject of the messageLorem ipsum dolor sit amet, consect...

1:00 pm

Sarah Foster Re: Subject of the messageLorem ipsum dolor sit amet, consect...

11:30 am

Tom DixonRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

Sam JonesRe: Subject of the messageLorem ipsum dolor sit amet, consect...

Yesterday

TEMPGaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Common Assets Palette

TEMPGaia UX Patterns & Building Blocks May 25 2012

Gaia UX Patterns & Building Blocks:

Higher FidelityLayouts

3:10

Mark Aaberg

David Abbott

Mary Abelar

Christian Adderson

Lee Aistrop

Clifford Aich

Camille Aimes

A

Favorites

Vivien Babine

Margaret Gormely

Jakub Kania

Russel Marks

Emmett Picante

Search

Dialer History Contacts

3:10

CancelContacts

3:10

Dialer History Contacts

3:10

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

..?123 ,

M

Adam Clark

Adam Johnson

Gary Macadams

CancelAda

Gaia UX Patterns & Building Blocks

File name Gaia_Patterns_20120525_V1.0

Author Josh Carpener, [email protected]

Location Dropbox: OWD_Moz_share > Mozilla > 1 Patterns and Building Blocks > _SpecsMozilla Wiki: https://wiki.mozilla.org/Gaia/Design/Patterns

New Wireframes All

New Wireframes —

New Wireframes —