Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 3: | Line 3: | ||
* Search results should be real-time with highlights of search substring | * Search results should be real-time with highlights of search substring | ||
* Search fields should be easily cleared (eg: with 'x') | * Search fields should be easily cleared (eg: with 'x') | ||
== Forms == | |||
* Keyboard behavior | |||
** Click on input field should show keyboard | |||
** Keyboard should have the ability to goto next field | |||
** Keyboard should have submit button on last field | |||
** If user focuses input field, contextual keyboard or input assistance control should be displayed. | |||
** If user blurs input field, keyboard or input assistance controls should hide. | |||
* Form input fields | |||
** Input type='text' fields should open keyboard | |||
** Input type='url' fields should open contextual url keyboard | |||
** Input type='email' fields should open contextual email keyboard | |||
** Input type='tel' fields should open contextual number keyboard | |||
* Form input assistance | |||
** Input type='date' fields should open date select input control | |||
** Input type='time' field should open time select input control | |||
** Input option select field should open option select input control | |||
== Text Display == | == Text Display == | ||
| Line 8: | Line 30: | ||
* Text should be gracefully truncated when too long to fit in given text area at whole words followed by "...". | * Text should be gracefully truncated when too long to fit in given text area at whole words followed by "...". | ||
eg: 'The quick brown fox jumped ...' | eg: 'The quick brown fox jumped ...' | ||
* Links should open in Browser | |||
* Email mailto: email@email.com links should open in Email | |||
* Phone numbers should open in Dialer | |||
== Lists == | == Lists == | ||
| Line 29: | Line 54: | ||
**** [month name] [year] | **** [month name] [year] | ||
*** Example Applications of pattern: Mail messages, SMS/MMS messages, Browser History | *** Example Applications of pattern: Mail messages, SMS/MMS messages, Browser History | ||
== Grids == | |||
== Pages == | |||
== | |||
Revision as of 23:25, 28 April 2012
Search
- Search fields should automatically automatically auto complete where possible.
- Search results should be real-time with highlights of search substring
- Search fields should be easily cleared (eg: with 'x')
Forms
- Keyboard behavior
- Click on input field should show keyboard
- Keyboard should have the ability to goto next field
- Keyboard should have submit button on last field
- If user focuses input field, contextual keyboard or input assistance control should be displayed.
- If user blurs input field, keyboard or input assistance controls should hide.
- Form input fields
- Input type='text' fields should open keyboard
- Input type='url' fields should open contextual url keyboard
- Input type='email' fields should open contextual email keyboard
- Input type='tel' fields should open contextual number keyboard
- Form input assistance
- Input type='date' fields should open date select input control
- Input type='time' field should open time select input control
- Input option select field should open option select input control
Text Display
- Text should gracefully wrap to next line at word boundaries.
- Text should be gracefully truncated when too long to fit in given text area at whole words followed by "...".
eg: 'The quick brown fox jumped ...'
- Links should open in Browser
- Email mailto: email@email.com links should open in Email
- Phone numbers should open in Dialer
Lists
Data Object Lists
Data objects can be defined as references to data within other applications. Some examples include contacts, calender events, photos and music.
- Object fields should gracefully truncate with wording that is implicit of additional objects that are present but not able to be displayed due to limited display area. eg: mail recipients: [Casey Yee][Josh Carpenter] and [x] others
- Object lists should be expandable to show all list objects or be navigable to a full list.
- Object lists may be editable
- Ability to add, remove or open object in application that is responsible for data object type.
Chronological Lists
- Relative date/time pattern
- Provides formatting of relative time periods. Relative time periods in this context indicate a duration from a given start date/time to the current system time or the given end date/time.
- Date/Time formatting pattern
- 3:30p or 15:30 (depending on 12/24h display)
- yesterday
- [2-5] days ago
- [1-4] weeks ago
- [month name] [date]
- [month name] [year]
- Example Applications of pattern: Mail messages, SMS/MMS messages, Browser History
- Date/Time formatting pattern
- Provides formatting of relative time periods. Relative time periods in this context indicate a duration from a given start date/time to the current system time or the given end date/time.
Grids
Pages
==