Gaia/Design/BuildingBlocks: Difference between revisions

Jump to navigation Jump to search

Gaia/Design/BuildingBlocks (view source)

Revision as of 07:35, 19 June 2012

3,716 bytes added ,  19 June 2012
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
== Status & Team ==
==Buttons==
* 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.
* Have two components: visual target and hit target.
Line 11: Line 10:
** Text only
** Text only


[[Image:Gaia_BB_Buttons_1.jpg|Buttons 1]]




==Dialogues==
== Dialogue: Prompt ==


* Dialogues
'''Used for:'''
* Alerts
* Popups
* Toasts
** A small popup that appears briefly on screen after user completes an  action (eg: delete 3 items). Text confirms the user's action.
** Optional: provides opporunitity to take related secondary action via button (eg: Undo).


[[Image:Gaia_BB_Dialogues_1.jpg|Dialogues 1]]
* Alerting users to important events, notifications, etc.


'''Characteristics:'''


==Filters==
* Modal: occupies the screen and requires user input to clear.
* Consist of
** Title
** Body (optional)
** Dismissal button (eg: “Cancel”)
** Confirmation button (eg: “Delete”)


* Have two valid potential uses:
[[Image:Gaia_BB_DialogueAlerts_1.png|Dialogue: Alerts 1]]
** Can provide a second set of tabs, where tabs are already present.
** Generally  are meant to provide the user with ability to view single set of data  in a different lens (eg: used in Calendar, they allow user to view time  in different scales, from Day to Month).
* Can appear in toolbars (as in Calendar) or in


[[Image:Gaia_BB_Filters_1.jpg|Filters 1]]




==Grids==
== Dialogue: Action Menu ==
 
'''Used for:'''
 
* Presenting a list of items, usually actions or links (eg: Edit, Delete, etc).
 
'''Characteristics:'''
 
* Menus are spawned from buttons, often positioned within Toolbars.
* Present 1 or more items.
* Vary in height, to a maximum of Keyboard component height.
* Titles are optional.
* Are closed by:
** Selecting one of the items
** Pressing "Cancel" button (wording may be different)
** Pressing “OK” button, if available (label may be different)
 
[[Image:Gaia_BB_DialogueMenus_1.png|Dialogue: Menus 1]]
 
 
 
== Dialogue: Object Menu ==
 
'''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]]
 
 
 
== Dialogue: Banner ==
 
'''Used for:'''
 
* Banners 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]]
[[Image:Gaia_BB_DialogueToasts_2.png|Dialogue: Toast 2]]
 
 
 
== 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]]


[[Image:Gaia_BB_Grid_1.jpg|Grids 1]]




==Headers==
==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
* Horizontal full width bar that appears at top of screen in most apps
Line 49: Line 135:
* Present in most applications
* Present in most applications


[[Image:Gaia_BB_Headers_1.jpg|Headers 1]]
[[Image:Gaia_BB_Header_1.png|Header 1]]
 




==Lists==
==Lists==
'''Used for:'''
* ...
'''Characteristics:'''


* Varying heights (1—3 rows)
* Varying heights (1—3 rows)
Line 58: Line 151:
* Are composed of rows, and section headers
* Are composed of rows, and section headers
* Types:
* Types:
* Action row
** Action row (click anywhere to trigger input)
** Click anywhere to trigger input
** Status indicator row
* Status indicator row
** Button row
* Button row
** Link row
* Link row


[[Image:Gaia_BB_Lists_1.jpg|Lists 1]]
[[Image:Gaia_BB_Lists_1.jpg|Lists 1]]




==Progress & Activity Indicators==
==Progress & Activity Indicators==


* Provides user with visual feedback when an extended operation is active.
'''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:
* Types:
** Progress
** Progress
*** Animate from 0 to 100%, to communicate
*** Displays a loading animation that goes from 0 to 100 percent, communicating the current process status.
*** Activity
** Activity
*** Displays a looping animation, communicating to the user that the process is active.
 
[[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1]]


[[Image:Gaia_BB_Progress&Activity_1.jpg|Progress & Activity 1]]




==Scrolling==
==Scrolling==


* Scrollbar
'''Used for:'''
* Index scrolling
 
* ...
 
'''Characteristics:'''
 
* Types:
** Scrollbar
** Index scrolling


[[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]]
[[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]]




==Seek Bars==
==Seek Bars==
'''Used for:'''
* ...
'''Characteristics:'''


* Consists of track and knob (button w/ normal and pressed states)
* Consists of track and knob (button w/ normal and pressed states)
Line 93: Line 208:


[[Image:Gaia_BB_SeekBars_1.jpg|Seek Bars 1]]
[[Image:Gaia_BB_SeekBars_1.jpg|Seek Bars 1]]




==Switches==
==Switches==


* A switch presents two mutually exclusive choices or states (used in table views only).
'''Used for:'''
 
* ...
 
'''Characteristics:'''
 
* Presents two mutually exclusive choices or states (used in table views only).
* Types:
* Types:
** On/Off toggle
** On/Off toggle
Line 106: Line 228:




==System Indicators==


* Volume level
==Tabs==
** Appears briefly on screen as user changes volume. Non-modal.
 
* Charging active
'''Used for:'''
** Appears on screen as user charges a powered-down device. Communicates that device is charging, and current power level.


[[Image:Gaia_BB_SysIndicators_1.jpg|System Indicators 1]]
* ...


'''Characteristics:'''


==Tabs==
* 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


* Fill the full horizontal width
'''States:'''
* Number between 3—5
* Gravitate to bottom of page
* Normal
* Versions:  
* Focused
** Text only
* Disabled
** Text+icon
** Icon only
* Used in:
** Dialer
** Music


[[Image:Gaia_BB_Tabs_1.jpg|Tabs 1]]
[[Image:Gaia_BB_Tabs_1.jpg|Tabs 1]]




==Text Input==


* Provide the user a means to input text.
==Tool Bars==


[[Image:Gaia_BB_TextInputs_1.jpg|Text Inputs 1]]
'''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:'''


==Tool Bars==
* 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).


* Horiztonal full width bar that appears at bottom of screen
[[Image:Gaia_BB_Toolbars_1.png|Toolbars 1]]
* Floats above page content.
[[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]]
* Contains multiple inputs and/or indicators
* See:
** Browser
** Email


[[Image:Gaia_BB_Toolbars_1.jpg|Toolbars 1]]




==Value Selectors==
==Value Selectors==


* Provides a way for the user to select a single value from a list.
'''Used for:'''
* Date & Time
* Multi-item
* Provides a way for the user to select one of more values.
* Most commonly associated with forms, but also used elsewhere.
* Interface conventions are flexible, and new Types can be added to the list below.
 
'''Characteristics:'''
 
* Types:
** Date
** Time
** Single-select list
** Multiple-select list


[[Image:Gaia_BB_ValueSelectors_1.jpg|Value Selectors 1]]
[[Image:Gaia_BB_ValueSelectors_1.png|Value Selectors 1]]
[[Image:Gaia_BB_ValueSelectors_2.png|Value Selectors 2]]
Joshcarpenter
816

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/442765"

Navigation menu