Gaia UX - Mozilla 5/25/2012 آ  Gaia UX Patterns & Building Blocks May 25 2012 Contacts Browser: Overview

  • View
    1

  • Download
    0

Embed Size (px)

Text of Gaia UX - Mozilla 5/25/2012 آ  Gaia UX Patterns & Building Blocks May 25 2012 Contacts Browser:...

  • Gaia UX Patterns & Building Blocks May 25 2012

    Gaia UX Patterns & 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 Adams Company name

    Blake Adams

    Miguel Adams Company name

    Daryl Adams

    B

    Timothy Blake

    Winston Blake

    Karl Blake Company 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 Adams Company name

    Blake Adams

    Miguel Adams Company name

    Daryl Adams

    Adam Adams Company name

    Blake Adams

    Miguel Adams Company 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 Adams Company name

    Blake Adams

    Miguel Adams Company name

    Daryl Adams

    B

    Timothy Blake

    Winston Blake

    Karl Blake Company name

    All Favorites

  • 3:10

    Sa

    Sam Foster

    Sara Mendes Company name

    Tim Saxon

    Salud Jurado Company name

    Sarah Foster

    Sara Mendes Company name

    Search

    Cancel

    1

    2

    http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado

  • 3:10

    Sa

    Sam Foster

    Sara Mendes Company name

    Tim Saxon

    Salud Jurado Company name

    Sarah Foster

    Sally Mendes

    Tom Saxon

    Salud Jurado

    Sam Foster

    Cancel

    http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado

  • 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 Foster samfoster@email.com

    Sara Mendes saramendes@email.com

    Tim Saxon samuelchen@email.com

    Salud Jurado saludjurado@email.com

    Sa

    http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado

  • 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 samfoster@email.com

    Sara Mendes saramendes@email.com

    Tim Saxon samuelchen@email.com

    Salud Jurado saludjurado@email.com

    Sa

    http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado http://en.wikipedia.org/wiki/Roc%C3%ADo_Jurado

  • 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:

    • . . .

  • Menus Examples

    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 AM Repeat: 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 AM Repeat: 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 AM Repeat: Alert:

    Attendees:

    Every Day None

    Notes:

    Monday, April 23

  • Gaia UX Patterns & Building