TimeAndDatePickers

Differences between revisions 1 and 5 (spanning 4 versions)
Revision 1 as of 2013-07-04 17:35:29
Size: 2630
Editor: mpt
Comment: + Use cases; + What other platforms do
Revision 5 as of 2013-07-18 15:09:49
Size: 4539
Editor: mpt
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.

Use cases

  • Setting the device time and date in System Settings.

    phone-time-date-settings.png

  • (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

global date and time

datetime

yes

yes

seconds

year, month, date, hours, minutes, seconds, fraction, time zone offset

local date and time

datetime-local

yes

yes

seconds

year, month, day, hours, minutes, seconds, fraction

date

date

yes

yes

days

year, month, day

month

month

yes

yes

months

year, month

week

week

yes

yes

weeks

year, week

time

time

yes

yes

seconds

hour, minutes, seconds, fraction

Design process

Competitor analysis

Design workshop

workshop-android-continued.jpg workshop-horizontal-barrel.jpg workshop-dual-escalators.jpg workshop-horizontal-swipe.jpg workshop-dials.jpg workshop-vertical-barrel.jpg

Applying the basic ideas to the use cases

p1.small.png p2.small.png

TimeAndDatePickers (last edited 2013-11-13 14:46:11 by katie-t)