TimeAndDatePickers

Differences between revisions 1 and 6 (spanning 5 versions)
Revision 1 as of 2013-07-04 17:35:29
Size: 2630
Editor: mpt
Comment: + Use cases; + What other platforms do
Revision 6 as of 2013-08-21 10:57:42
Size: 5054
Editor: mpt
Comment: + outline, and reorders HTML elements to match
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]].
 * (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.
 * HTML time and/or date controls in Web pages.
Line 7: Line 13:
 {{attachment:phone-time-date-settings.png}} === HTML time/date controls ===
Line 9: Line 15:
 * Adding someone’s birthday to the address book, with or without a year 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]]. These are not heavily used yet, but will become more widely used as browsers implement them.
Line 11: Line 17:
 * fine-tuning the time and date of a Calendar event ||'''Control'''||'''`type=`'''||'''Nullable'''||'''Can have min/max'''||'''Step precision'''||'''Potential components'''||
||[[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]]||
||[[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#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#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#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-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]]||
Line 13: Line 25:
 * choosing a timer or countdown value in the Clock == Specification ==
Line 15: Line 27:
=== Web use cases === There should be six pickers: time, date, week, month, local date and time, and zoned date and time. Each of these can vary in appearance depending on
Line 17: Line 29:
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. === Common elements ===
Line 19: Line 31:
||'''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`||
==== Time dial ====
Line 27: Line 33:
== What other platforms do == ==== Spinner ====

=== Time picker ===

=== Date picker ===

=== Week picker ===

=== Month picker ===

=== Local date and time picker ===

=== Zoned date and time picker ===

<<Anchor(process)>>
== Design process ==

=== Competitor analysis ===
Line 30: Line 53:
 * 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 56:

=== 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.

  • (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.
  • HTML time and/or date controls in Web pages.

HTML time/date controls

HTML’s <input> element, and therefore the Ubuntu Phone browser, requires controls for entering particular parts of a date and/or time. These are not heavily used yet, but will become more widely used as browsers implement them.

Control

type=

Nullable

Can have min/max

Step precision

Potential components

time

time

yes

yes

seconds

hour, minutes, seconds, fraction

date

date

yes

yes

days

year, month, day

week

week

yes

yes

weeks

year, week

month

month

yes

yes

months

year, month

local date and time

datetime-local

yes

yes

seconds

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

global date and time

datetime

yes

yes

seconds

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

Specification

There should be six pickers: time, date, week, month, local date and time, and zoned date and time. Each of these can vary in appearance depending on

Common elements

Time dial

Spinner

Time picker

Date picker

Week picker

Month picker

Local date and time picker

Zoned date and time picker

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)