Gaia/Design/Patterns: Difference between revisions

From MozillaWiki
< Gaia‎ | Design
Jump to navigation Jump to search
mNo edit summary
m (Fixed minor formatting issues)
 
(33 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Design Patterns are core sets of interactions that are used repeatedly throughout the UX.  
Design Patterns are core sets of interactions that are used repeatedly throughout the UX.  


== Design Specs ==
* [https://wiki.mozilla.org/images/e/e7/Gaia_Patterns_20120525_V1.0.pdf Gaia_Patterns_20120525_V1.0.pdf] (Josh Carpenter, May 25 2012)
** Version 1.0 of doc. Draft content, annotations needed, many sections not started.
== Status & Team ==
* See: [https://docs.google.com/spreadsheet/ccc?key=0AiBigu584YY7dGlNSlY0QzhJb3M5anRBa1gxalV0Y3c#gid=0 B2G - Milestone 3 Plan]
----
==Buttons==
'''Characteristics:'''
* Have two components: visual target and hit target.
* Later is always larger. Has minimum sizes.
* Types:
** Icon + text
** Icon only
** Text only


 
== Drawer ==
==Contacts Browser==


'''Used for:'''
'''Used for:'''


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


'''Characteristics:'''
'''Characteristics:'''


* Is an example of an [[#Dialogues:_Entry_Sheet|Entry Sheet]] dialogue.
* Provides access to top level navigation links that are usually user-configurable (eg: accounts in Email and Calendar, or tabs in Browser).
* Opens when user selects “Add” button.  
* Is also a great place to tuck secondary or power-user features, such as links to app Settings.
* Presents complete list of contacts.
* Position: Should be positioned on left side of screen, but can be positioned on right in rare circumstances (eg: Browser).
* “Cancel” closes the Browser without making a select.  
* Open: should be opened via standard "Drawer" button, but other buttons can be used in rare circumstances (eg: numeric tabs button in Browser).
* Tapping a contact closes the Browser and adds the selected contact to the selected field.
* Close: can be closed by tapping viewable area of the primary interface. And in future versions by swiping horizontally from bezel.
* Uses index scrolling [ADD LINK]
* 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.


[[Image:Gaia_BB_ContactsBrowser_1.png|Contacts Browser 1]]
{|
|[[Image:Gaia_BB_Drawer.png|thumb|left|650px|Drawer 1]]
|}


 
== Entry Sheet ==
==Contacts Quick Select==
 
'''Used for:'''
 
* Selecting a known contact quickly, without leaving the current view.
 
'''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.
 
[[Image:Gaia_BB_ContactsQuickSelect_1.png|Contacts Quick Select 1]]
 
 
== Dialogues: Alerts ==
 
'''Used for:'''
 
* Alerting users to important events, notifications, etc.
 
'''Characteristics:'''
 
* Modal: occupies the screen and requires user input to clear.
* Consist of
** Title
** Body (optional)
** Dismissal button (eg: “Cancel”)
** Confirmation button (eg: “Delete”)
 
[[Image:Gaia_BB_DialogueAlerts_1.png|Dialogue: Alerts 1]]
 
 
== Dialogues: Entry Sheet ==


'''Used for:'''
'''Used for:'''
Line 97: Line 41:
** “Cancel”
** “Cancel”
** Varies: “Done”, “Join”, “Send”, etc.
** Varies: “Done”, “Join”, “Send”, etc.
{|
|[[Image:Gaia_BB_DialogueEntrySheets.png|thumb|left|650px|Dialogue: Entry Sheet 1]]
|}


[[Image:Gaia_BB_DialogueEntrySheets.png|Dialogue: Entry Sheet 1]]
{|
 
|[[Image:Gaia_BB_ContactsBrowser_1.png|thumb|left|650px|Contacts Browser 1]]
 
|}
 
== Dialogues: Menus ==
 
'''Used for:'''
 
* Selecting from one or more actions
* Inputing or selecting from a set of values (see: Value Selectors)
 
'''Characteristics:'''
 
* Menus are spawned from Toolbars or Forms selections.
* Vary in height, to a maximum of Keyboard component height.
* Present 1 or more items.
* Optional Title
* Close by:
** Selecting one of items
** Tap cancel button
** Tap “OK” button, if available (label name TBD)
* Value Selectors are examples of Menus, but not all Menus are Value Selectors.
 
[[Image:Gaia_BB_DialogueMenus_1.png|Dialogue: Menus 1]]
[[Image:Gaia_BB_DialogueMenus_2.png|Dialogue: Menus 2]]
 
 
 
== Dialogues: Popups ==
 
'''Used for:'''
 
* Enabling optional shortcuts to contextual actions that might otherwise require stepping one level deeper into the hierarchy. For example, deleting a photo via it's thumbnail, instead of having to open the full image.
 
'''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.
* Priority 1:
** Reused the Menu pattern interface to present the options.
* Priority 2:
** Menu positions itself immediately above or below the parent object (depending on the amount of available screen space)
** The parent object element is visually highlighted (e.g.: darken surrounding content, or draw border, etc)
** User can press anywhere else on screen to change the focus and close the popup.
 
[[Image:Gaia_BB_DialoguePopup_1.png|Dialogue: Popup 1]]
[[Image:Gaia_BB_DialoguePopup_2.png|Dialogue: Popup 2]]
[[Image:Gaia_BB_DialoguePopup_3.png|Dialogue: Popup 3]]
 
== Dialogues: Toasts ==
 
'''Used for:'''
 
* Toasts confirm a user action, and optionally provide a follow up action (eg: Undo).

 
'''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).
* Optionally provide opportunity to take related secondary action via button (eg: Undo).
 
[[Image:Gaia_BB_DialogueToasts.png|Dialogue: Toast 1]]
 
 
 
== Drawer ==
 
'''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).
 
'''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.
 
[[Image:Gaia_BB_Drawer.png|Drawer 1]]
 
 
 
== 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.
 
[[Image:Gaia_BB_Filters.png|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
 
[[Image:Gaia_BB_Headers_1.jpg|Headers 1]]




== Input Areas ==
== Input Areas ==


'''Used for:'''
{|
 
|[[Image:gaia_bb-inputareas-10.png|thumb|left|650px|Input Areas]]
* ...
|}
 
'''Characteristics:'''
 
* ...
 
 
==Lists==
 
'''Used for:'''
 
* ...
 
'''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
 
[[Image:Gaia_BB_Lists_1.jpg|Lists 1]]
 


==Multi-Select==
==Multi-Select==
Line 285: Line 81:
* Disabled
* Disabled


{|
|[[Image:Gaia_BB_MultiSelect_1.png|thumb|left|650px|MultiSelect 1]]
|}


==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.
[[Image:Gaia_BB_Progress&Activity_1.jpg|Progress & Activity 1]]


 
== Search ==
==Scrolling==


'''Used for:'''
'''Used for:'''


* ...
* An app can determine which content types are shown in the search results, whether they be within the app itself or online. Search can also be used to filter long lists, such as contacts (shown below).


'''Characteristics:'''
'''Characteristics:'''


* Types:
* The virtual keyboard is activated when the user taps on the search input box.
** Scrollbar
* Tapping on the (x) icon to the right of the search term clears the input box but retains the virtual keyboard
** Index scrolling
* When using search to filter lists, the search input box is typically at the top of the list and scrolls with the list items.
 
[[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]]
 
 
==Seek Bars==
 
'''Used for:'''
 
* ...
 
'''Characteristics:'''
 
* Consists of track and knob (button w/ normal and pressed states)
* Optional images for left and right values
* Can be horizontal or vertical
 
[[Image:Gaia_BB_SeekBars_1.jpg|Seek Bars 1]]
 


{|
|[[Image:Gaia_search1.png|thumb|left|650px|Search in Contacts app]]
|}


==Settings==
==Settings==


'''Used for:'''
(in progress)
 
* ...
 
'''Characteristics:'''
 
* ...
 
 
==Switches==
 
'''Used for:'''
 
* ...
 
'''Characteristics:'''
 
* Presents two mutually exclusive choices or states (used in table views only).
* Types:
** On/Off toggle
** Radio
** Checkbox
 
[[Image:Gaia_BB_Switches_1.jpg|Switches 1]]
 
 
 
==Tabs==
 
'''Used for:'''
 
* ...
 
'''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
* Focused
* Disabled
 
[[Image:Gaia_BB_Tabs_1.jpg|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).
 
[[Image:Gaia_BB_Toolbars_1.jpg|Toolbars 1]]
 
 
==Value Selectors==
 
'''Used for:'''
* Provides a way for the user to select a single value from a list.
 
'''Characteristics:'''


* Uses the [[#Dialogues:_Menus|Menu]] dialogue interface
==System Overlays==
* Types:
** Date
** Time
** Multi-Item


[[Image:Gaia_BB_ValueSelectors_1.png|Value Selectors 1]]
(in progress)

Latest revision as of 23:40, 24 January 2013

Design Patterns are core sets of interactions that are used repeatedly throughout the UX.


Drawer

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

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.
Drawer 1

Entry Sheet

Used for:

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

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.
Dialogue: Entry Sheet 1
Contacts Browser 1


Input Areas

Input Areas

Multi-Select

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)

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.

States

  • Normal
  • Focused
  • Disabled
MultiSelect 1


Search

Used for:

  • An app can determine which content types are shown in the search results, whether they be within the app itself or online. Search can also be used to filter long lists, such as contacts (shown below).

Characteristics:

  • The virtual keyboard is activated when the user taps on the search input box.
  • Tapping on the (x) icon to the right of the search term clears the input box but retains the virtual keyboard
  • When using search to filter lists, the search input box is typically at the top of the list and scrolls with the list items.
Search in Contacts app

Settings

(in progress)

System Overlays

(in progress)

Retrieved from "https://wiki.mozilla.org/index.php?title=Gaia/Design/Patterns&oldid=505248"