TimeAndDatePickers
Differences between revisions 1 and 5 (spanning 4 versions)
|
Size: 2630
Comment: + Use cases; + What other platforms do
|
Size: 4539
Comment: + "Applying the basic ideas to the use cases"
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 2: | Line 2: |
<<TableOfContents()>> |
|
| Line 5: | Line 7: |
| * Setting the device time and date [[TimeAndDate|in System Settings]] | * Setting the device time and date [[TimeAndDate|in System Settings]]. |
| Line 9: | Line 11: |
| * Adding someone’s birthday to the address book, with or without a year | * (not for the initial release) Adding someone’s birthday to the address book, with or without a year. |
| Line 11: | Line 13: |
| * fine-tuning the time and date of a Calendar event | * Fine-tuning the time and date of a Calendar event. |
| Line 13: | Line 15: |
| * choosing a timer or countdown value in the Clock | * The Clock app currently uses its own clock hands for setting a timer or countdown value. |
| Line 17: | Line 19: |
| HTML’s `<input>` element, and therefore the Ubuntu Phone browser, requires [[http://developers.whatwg.org/the-input-element.html#attr-input-type|several controls]] for entering particular parts of a date and/or time. | HTML’s `<input>` element, and therefore the Ubuntu Phone browser, requires controls for entering [[http://developers.whatwg.org/the-input-element.html#attr-input-type|particular parts of a date and/or time]]: |
| Line 19: | Line 21: |
| ||'''Control'''||'''`type=`'''||Nullable||Can have minimum||Can have maximum||Step precision|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#date-and-time-state-%28type=datetime%29|global date and time]]||`datetime`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state-%28type=datetime%29|yes]]||yes||yes||seconds|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#date-state-%28type=date%29|date]]||`date`||yes||yes||yes||days|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#month-state-%28type=month%29|month]]||`month`||yes||yes||yes||months|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#week-state-%28type=week%29|week]]||`week`|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#time-state-%28type=time%29|time]]||`time`|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#local-date-and-time-state-%28type=datetime-local%29|local date and time]]||`datetime-local`|| |
||'''Control'''||'''`type=`'''||'''Nullable'''||'''Can have min/max'''||'''Step precision'''||'''Potential components'''|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#date-and-time-state-%28type=datetime%29|global date and time]]||`datetime`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state-%28type=datetime%29|yes]]||yes||seconds||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-datetime|year, month, date, hours, minutes, seconds, fraction, time zone offset]]|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#local-date-and-time-state-%28type=datetime-local%29|local date and time]]||`datetime-local`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state-%28type=datetime-local%29|yes]]||yes||seconds||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-datetime-local|year, month, day, hours, minutes, seconds, fraction]]|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#date-state-%28type=date%29|date]]||`date`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state-%28type=date%29|yes]]||yes||days||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-date|year, month, day]]|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#month-state-%28type=month%29|month]]||`month`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state-%28type=month%29|yes]]||yes||months||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-month|year, month]]|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#week-state-%28type=week%29|week]]||`week`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state-%28type=week%29|yes]]||yes||weeks||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-week|year, week]]|| ||[[http://developers.whatwg.org/states-of-the-type-attribute.html#time-state-%28type=time%29|time]]||`time`||[[http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state-%28type=time%29|yes]]||yes||seconds||[[http://developers.whatwg.org/common-microsyntaxes.html#concept-time|hour, minutes, seconds, fraction]]|| |
| Line 27: | Line 29: |
| == What other platforms do == | <<Anchor(process)>> == Design process == === Competitor analysis === |
| Line 30: | Line 35: |
| * iOS [[http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW43|date picker]]: “A date picker can have up to four independent wheels, each of which displays values in a single category, such as month or hour … The overall size of a date picker is fixed at the same size as the iPhone keyboard.” | * [[http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW43|iOS date picker]]: “A date picker can have up to four independent wheels, each of which displays values in a single category, such as month or hour … The overall size of a date picker is fixed at the same size as the iPhone keyboard.” |
| Line 33: | Line 38: |
=== Design workshop === {{attachment:workshop-android-continued.jpg}} {{attachment:workshop-horizontal-barrel.jpg}} {{attachment:workshop-dual-escalators.jpg}} {{attachment:workshop-horizontal-swipe.jpg}} {{attachment:workshop-dials.jpg}} {{attachment:workshop-vertical-barrel.jpg}} === Applying the basic ideas to the use cases === {{attachment:p1.small.png}} {{attachment:p2.small.png}} |
Ubuntu Touch should have a set of time and date picker controls.
Contents
Use cases
Setting the device time and date in System Settings.
- (not for the initial release) Adding someone’s birthday to the address book, with or without a year.
- Fine-tuning the time and date of a Calendar event.
- The Clock app currently uses its own clock hands for setting a timer or countdown value.
Web use cases
HTML’s <input> element, and therefore the Ubuntu Phone browser, requires controls for entering particular parts of a date and/or time:
Control |
type= |
Nullable |
Can have min/max |
Step precision |
Potential components |
datetime |
yes |
seconds |
year, month, date, hours, minutes, seconds, fraction, time zone offset |
||
datetime-local |
yes |
seconds |
|||
date |
yes |
days |
|||
month |
yes |
months |
|||
week |
yes |
weeks |
|||
time |
yes |
seconds |
Design process
Competitor analysis
iOS date picker: “A date picker can have up to four independent wheels, each of which displays values in a single category, such as month or hour … The overall size of a date picker is fixed at the same size as the iPhone keyboard.”
Android date and time pickers: “Android provides these as ready-to-use dialogs.”
Windows: “Adding a DatePicker” and “Adding a TimePicker”
Design workshop
Applying the basic ideas to the use cases
TimeAndDatePickers (last edited 2013-11-13 14:46:11 by faun)