TimeAndDatePickers

Differences between revisions 1 and 18 (spanning 17 versions)
Revision 1 as of 2013-07-04 17:35:29
Size: 2630
Editor: mpt
Comment: + Use cases; + What other platforms do
Revision 18 as of 2013-10-07 15:07:49
Size: 12833
Editor: mpt
Comment: + Unresolved issues
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
Ubuntu Touch should have a set of time and date picker controls. Ubuntu Touch should have six time and date pickers: '''[[#time|time]]''', '''[[#date|date]]''', '''[[#week|week]]''', '''[[#month|month]]''', and eventually, '''[[#datetime-local|local datetime]]''' and '''[[#datetime-zoned|zoned datetime]]'''. Each of these should vary in behavior depending on whether they have a '''minimum''', a '''maximum''', and/or a '''precision'''.

<<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 7: Line 9:
 {{attachment:phone-time-date-settings.png}}  * (Not for the initial release) Adding someone’s birthday to the address book, with or without a year.
Line 9: Line 11:
 * Adding someone’s birthday to the address book, with or without a year  * Fine-tuning the time and date of a Calendar event.
Line 11: Line 13:
 * 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.
Line 13: Line 15:
 * choosing a timer or countdown value in the Clock  * HTML time and/or date controls in Web pages.
Line 15: Line 17:
=== Web use cases === 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 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. ||'''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 19: Line 27:
||'''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`||
== Specification ==
Line 27: Line 29:
== What other platforms do == A time or date picker should take up exactly the same screen space as the on-screen keyboard. This lets you navigate past time/date fields in a Web page without the navigation buttons jumping around.

{{attachment:form-navigation.png}}

Whenever the elements of a particular picker are narrower and/or shorter than that space, they should be horizontally and/or vertically centered respectively.

{{attachment:centering.png}}

=== Common elements ===

==== Spinner ====

||<tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:spinner.png}}||

||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:spinner-target-area.gif}}||

If you flick or drag a spinner up or down, whichever value ends up in its center should become selected.

If you tap a value anywhere in a spinner, or tap in any empty area above the first value or below the last value, that value should immediately become selected, and the spinner should then spin to make it centered too.

Where a spinner contains units on a circular scale — seconds in a minute, minutes in an hour, hours in a day, weekdays, or months — the latest value should be immediately followed by the earliest. For example, December should be followed by January.

||<tablestyle="clear:both" style="border:none">||

==== Handling of default values, minimums, and maximums ====

If an app provides no default value for a picker, its initial value should be as close to the current date and/or time as is possible given any minimum or maximum.

If an app asks for a minimum and a lesser maximum, the picker should signal an error and ignore both of them.

Otherwise, if an app asks for a default value less than the minimum, or greater than the maximum, the picker should signal an error and set the initial value to the minimum or maximum respectively.

<<Anchor(time)>>
=== Time picker ===

||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:picker-time.png}}||<^ style="border:none">{{attachment:picker-time-with-seconds.png}}||

The time picker should consist of a spinner for the hour, a spinner for minutes, a spinner for seconds if required, and a spinner for AM/PM.

'''Minimum/maximum:'''
 * If the minimum and maximum fall within the same hour, the hour spinner should be present but insensitive.
 * If the minimum and maximum fall within the same minute, the hour and minute spinner should both be present but insensitive.

'''Precision:'''
 * If the precision is a multiple of one minute, the seconds spinner (if present) should be insensitive.
 * If the precision is a multiple of one hour, the minutes sipnner should be present but insensitive.

||<tablestyle="clear:both" style="border:none">||

<<Anchor(date)>>
=== Date picker ===

||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:picker-date.png}}||

The date picker should consist of three spinners: year, month, and date. The exact contents of the month and date spinners should depend on the available width (depending on screen size and orientation):
 1. ideally number and full name for month, number and full day for date (“08 August” “28 Wednesday”); otherwise
 1. number and full name for month, number and abbreviated day for date (“08 August” “28 Wed”); otherwise
 1. full name for month, number and abbreviated day for date (“August” “28 Wed”); otherwise
 1. full name for month, number for date (“August” “28”); otherwise
 1. abbreviated name for month, number for date (“Aug” “28”).

When the month or date spinner contains numbers and names, the numbers should be aligned on their trailing side while the names are aligned on their leading side.

If the currently selected date becomes impossible because either you or the app changes the year (from a leap to a non-leap year when the date is set to February 29) or the month (''e.g.'' from a month that has 31 days to one that has fewer when the date is set to 31), the date should reduce automatically, but should immediately return to its previous value if that becomes possible again before you next manually change the date.

'''Minimum/maximum:'''
 * If the minimum and maximum are within the same year, the year spinner should be present but insensitive.
 * If the minimum and maximum are within the same month, the month spinner should be present but insensitive.

||<tablestyle="clear:both" style="border:none">||

<<Anchor(week)>>
=== Week picker ===

||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:picker-week.png}}||

The contents of the week picker should be “W” immediately followed by the week number, aligned on their trailing side; and the date range covered by that week, aligned on its leading side.

The date range should consist of the start date, a space, an en dash (U+2013), another space, and the end date: for example, “Aug 26 – Sep 1”.

If the end date is in the same month as the start date, the month should be omitted: for example, “Sep 2 – 8”. Apart from that, every month should be formatted the same way, depending on the available width:
 1. ideally full name for month, a space, and the date number (“August 26”); otherwise
 1. abbreviated name for month, a space, and the date number (“Aug 26”).

||<tablestyle="clear:both" style="border:none">||

<<Anchor(month)>>
=== Month picker ===

||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:picker-month.png}}||

The month picker should consist of a month spinner, and, if minimum and maximum are not in the same year, a year spinner.

Because the most common use of a month picker will be to enter start or expiry months for payment cards, the month spinner should include both two-digit months (aligned on their trailing side) and full month names (aligned on their leading side).

||<tablestyle="clear:both" style="border:none">||

<<Anchor(datetime-local)>>
== Future work ==

Combo controls for date and time will eventually be needed for the Web browser. So far, however, Web sites are not using them. (Thanks to Simon Pieters at Opera for surveying the June 2013 [[http://webdevdata.org/|webdevdata.org]] dataset.)

=== Local datetime picker ===

||<^ tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:picker-time-date-local-time.png}}||<^ style="border:none">{{attachment:picker-time-date-local-date.png}}||

The local datetime picker should consist of a time dial and a set of three spinners. If there is not room to display these all at once (for example on a phone in portrait mode), the time dial should be displayed initially, with a calendar alongside. Tapping the calendar should shrink the time dial down to a thumbnail, and simultaneously expand the calendar into the set of spinners. The reverse should happen if you tap the time thumbnail while the date spinners are visible.

The time dial should behave [[#time|as described for the time picker]], and the date spinners should behave [[#date|as described for the date picker]].

||<tablestyle="clear:both" style="border:none">||

<<Anchor(datetime-zoned)>>
=== Zoned datetime picker ===

{{attachment:picker-time-date-zoned-time.png}} {{attachment:picker-time-date-zoned-date.png}} {{attachment:picker-time-date-zoned-zone.png}}

||<tablestyle="clear:both" style="border:none">||

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

=== Competitor analysis ===
Line 30: Line 154:
 * 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 157:

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

=== Ideas from further brainstorming ===

{{attachment:p4.small.png}}

=== Visual design to narrow choices ===

{{attachment:draft-visuals.jpg}}

== Unresolved issues ==

 * Should a calendar ever be used instead of the date spinners?

 * Could the picker be embedded in an app layout, instead of appearing as an overlay?

 * What should the control that uses the picker look like?

Ubuntu Touch should have six time and date pickers: time, date, week, month, and eventually, local datetime and zoned datetime. Each of these should vary in behavior depending on whether they have a minimum, a maximum, and/or a precision.

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’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

A time or date picker should take up exactly the same screen space as the on-screen keyboard. This lets you navigate past time/date fields in a Web page without the navigation buttons jumping around.

form-navigation.png

Whenever the elements of a particular picker are narrower and/or shorter than that space, they should be horizontally and/or vertically centered respectively.

centering.png

Common elements

Spinner

spinner.png

spinner-target-area.gif

If you flick or drag a spinner up or down, whichever value ends up in its center should become selected.

If you tap a value anywhere in a spinner, or tap in any empty area above the first value or below the last value, that value should immediately become selected, and the spinner should then spin to make it centered too.

Where a spinner contains units on a circular scale — seconds in a minute, minutes in an hour, hours in a day, weekdays, or months — the latest value should be immediately followed by the earliest. For example, December should be followed by January.

Handling of default values, minimums, and maximums

If an app provides no default value for a picker, its initial value should be as close to the current date and/or time as is possible given any minimum or maximum.

If an app asks for a minimum and a lesser maximum, the picker should signal an error and ignore both of them.

Otherwise, if an app asks for a default value less than the minimum, or greater than the maximum, the picker should signal an error and set the initial value to the minimum or maximum respectively.

Time picker

picker-time.png

picker-time-with-seconds.png

The time picker should consist of a spinner for the hour, a spinner for minutes, a spinner for seconds if required, and a spinner for AM/PM.

Minimum/maximum:

  • If the minimum and maximum fall within the same hour, the hour spinner should be present but insensitive.
  • If the minimum and maximum fall within the same minute, the hour and minute spinner should both be present but insensitive.

Precision:

  • If the precision is a multiple of one minute, the seconds spinner (if present) should be insensitive.
  • If the precision is a multiple of one hour, the minutes sipnner should be present but insensitive.

Date picker

picker-date.png

The date picker should consist of three spinners: year, month, and date. The exact contents of the month and date spinners should depend on the available width (depending on screen size and orientation):

  1. ideally number and full name for month, number and full day for date (“08 August” “28 Wednesday”); otherwise
  2. number and full name for month, number and abbreviated day for date (“08 August” “28 Wed”); otherwise
  3. full name for month, number and abbreviated day for date (“August” “28 Wed”); otherwise
  4. full name for month, number for date (“August” “28”); otherwise
  5. abbreviated name for month, number for date (“Aug” “28”).

When the month or date spinner contains numbers and names, the numbers should be aligned on their trailing side while the names are aligned on their leading side.

If the currently selected date becomes impossible because either you or the app changes the year (from a leap to a non-leap year when the date is set to February 29) or the month (e.g. from a month that has 31 days to one that has fewer when the date is set to 31), the date should reduce automatically, but should immediately return to its previous value if that becomes possible again before you next manually change the date.

Minimum/maximum:

  • If the minimum and maximum are within the same year, the year spinner should be present but insensitive.
  • If the minimum and maximum are within the same month, the month spinner should be present but insensitive.

Week picker

picker-week.png

The contents of the week picker should be “W” immediately followed by the week number, aligned on their trailing side; and the date range covered by that week, aligned on its leading side.

The date range should consist of the start date, a space, an en dash (U+2013), another space, and the end date: for example, “Aug 26 – Sep 1”.

If the end date is in the same month as the start date, the month should be omitted: for example, “Sep 2 – 8”. Apart from that, every month should be formatted the same way, depending on the available width:

  1. ideally full name for month, a space, and the date number (“August 26”); otherwise
  2. abbreviated name for month, a space, and the date number (“Aug 26”).

Month picker

picker-month.png

The month picker should consist of a month spinner, and, if minimum and maximum are not in the same year, a year spinner.

Because the most common use of a month picker will be to enter start or expiry months for payment cards, the month spinner should include both two-digit months (aligned on their trailing side) and full month names (aligned on their leading side).

Future work

Combo controls for date and time will eventually be needed for the Web browser. So far, however, Web sites are not using them. (Thanks to Simon Pieters at Opera for surveying the June 2013 webdevdata.org dataset.)

Local datetime picker

picker-time-date-local-time.png

picker-time-date-local-date.png

The local datetime picker should consist of a time dial and a set of three spinners. If there is not room to display these all at once (for example on a phone in portrait mode), the time dial should be displayed initially, with a calendar alongside. Tapping the calendar should shrink the time dial down to a thumbnail, and simultaneously expand the calendar into the set of spinners. The reverse should happen if you tap the time thumbnail while the date spinners are visible.

The time dial should behave as described for the time picker, and the date spinners should behave as described for the date picker.

Zoned datetime picker

picker-time-date-zoned-time.png picker-time-date-zoned-date.png picker-time-date-zoned-zone.png

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

Ideas from further brainstorming

p4.small.png

Visual design to narrow choices

Unresolved issues

  • Should a calendar ever be used instead of the date spinners?
  • Could the picker be embedded in an app layout, instead of appearing as an overlay?
  • What should the control that uses the picker look like?

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