MozillaWiki

Gaia/Design/Patterns: Difference between revisions

Page Discussion

Gaia/Design/Patterns (view source)

Revision as of 16:29, 12 June 2012

1,225 bytes added ,  12 June 2012
Undo revision 440356 by Joshcarpenter (talk)
No edit summary
(Undo revision 440356 by Joshcarpenter (talk))
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.  
= Patterns =


== Status & Team ==
== Status & Team ==
Line 9: Line 7:
----
----


==Buttons==
'''Characteristics:'''
* Have two components: visual target and hit target.
* Later is always larger. Has minimum sizes.
* Types:
** Icon + text
** Icon only
** Text only
==Contacts Browser==
'''Used for:'''
* Adding a contact to a correspondence (eg: Email, SMS)
'''Characteristics:'''
* Is an example of an [[#Dialogues:_Entry_Sheet|Entry Sheet]] dialogue.
* Opens when user selects “Add” button.
* Presents complete list of contacts.
* “Cancel” closes the Browser without making a select.
* Tapping a contact closes the Browser and adds the selected contact to the selected field.
* Uses index scrolling [ADD LINK]
[[Image:Gaia_BB_ContactsBrowser_1.png|Contacts Browser 1]]
==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]]




Line 27: Line 72:


[[Image:Gaia_BB_DialogueAlerts_1.png|Dialogue: Alerts 1]]
[[Image:Gaia_BB_DialogueAlerts_1.png|Dialogue: Alerts 1]]




Line 136: Line 180:


[[Image:Gaia_BB_Drawer.png|Drawer 1]]
[[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_Header_1.png|Header 1]]




Line 208: Line 294:




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


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


* ...
* Providing user with visual feedback that a process is active.


'''Characteristics:'''
'''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.png|Progress & Activity 1]]


 
==Scrolling==
==Value Selectors==


'''Used for:'''
'''Used for:'''
* 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.png|Value Selectors 1]]
[[Image:Gaia_BB_ValueSelectors_2.png|Value Selectors 2]]


 
* ...
 
= Building Blocks =
 
 
==Buttons==


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


* Have two components: visual target and hit target.
* Later is always larger. Has minimum sizes.
* Types:
* Types:
** Icon + text
** Scrollbar
** Icon only
** Index scrolling
** Text only


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




== Filters ==
==Seek Bars==


'''Used for:'''
'''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:'''
'''Characteristics:'''


* Horizontal sequence of buttons.
* Consists of track and knob (button w/ normal and pressed states)
* Only one button is Focused at a time.
* Optional images for left and right values
* Best practice is to place filters within Toolbars, so they do not flow with the content.
* Can be horizontal or vertical
* 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_SeekBars_1.jpg|Seek Bars 1]]






==Headers==
==Settings==


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


* Labeling the active view.
* ...
* Providing top-level navigation and inputs for the active view.


'''Characteristics:'''
'''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_Header_1.png|Header 1]]


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


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


* Providing user with visual feedback that a process is active.
* ...


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


* May include an animated visual element, a text label, or some combination of the two.
* Presents two mutually exclusive choices or states (used in table views only).
* Types:
* Types:
** Progress
** On/Off toggle
*** Displays a loading animation that goes from 0 to 100 percent, communicating the current process status.
** Radio
** Activity
** Checkbox
*** 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_Switches_1.jpg|Switches 1]]




Line 368: Line 417:
[[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]]
[[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]]


 
==Value Selectors==
 
==Scrolling==


'''Used for:'''
'''Used for:'''
 
* ...
* 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:'''
'''Characteristics:'''


* Types:
* Types:
** Scrollbar
** Date
** Index scrolling
** Time
** Single-select list
** Multiple-select list


[[Image:Gaia_BB_Scrolling_1.jpg|Scrolling 1]]
[[Image:Gaia_BB_ValueSelectors_1.png|Value Selectors 1]]
 
[[Image:Gaia_BB_ValueSelectors_2.png|Value Selectors 2]]
 
 
==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]]
 
 
 
==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]]
Joshcarpenter
816

edits

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