TimeAndDatePickers

Differences between revisions 7 and 9 (spanning 2 versions)
Revision 7 as of 2013-08-21 11:31:43
Size: 7797
Editor: mpt
Comment: + Handling of default values, minimums, and maximums; + Time picker
Revision 9 as of 2013-08-21 12:33:16
Size: 8392
Editor: mpt
Comment: + anchors; realign components
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]]''', '''[[#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'''.
Line 8: Line 8:
 * (not for the initial release) 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 10: Line 12:
Line 11: Line 14:
Line 12: Line 16:

=== HTML time/date controls ===
Line 27: Line 29:
There should be six pickers: '''time''', '''date''', '''week''', '''month''', '''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'''.
Line 33: Line 33:
||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:time-dial.png}}|| ||<tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:time-dial.png}}||
Line 43: Line 43:
||<tablestyle="float:right;margin:0 0 1em 1em" style="border:none">{{attachment:spinner.png}}|| ||<tablestyle="float:left;margin:0 1em 1em 0" style="border:none">{{attachment:spinner.png}}||
Line 61: Line 61:
<<Anchor(time)>>
Line 75: Line 76:
||<tablestyle="clear:both" style="border:none">||

<<Anchor(date)>>
Line 81: Line 85:
||<tablestyle="clear:both" style="border:none">||

<<Anchor(week)>>
Line 85: Line 92:
||<tablestyle="clear:both" style="border:none">||

<<Anchor(month)>>
Line 89: Line 99:
=== Local date and time picker === ||<tablestyle="clear:both" style="border:none">||
Line 91: Line 101:
{{attachment:picker-time-date-local.png}} <<Anchor(datetime-local)>>
=== Local datetime picker ===
Line 93: Line 104:
=== Zoned date and time picker === {{attachment:picker-time-date-local-time.png}} {{attachment:picker-time-date-local-date.png}}
Line 95: Line 106:
{{attachment:picker-time-date-zoned.png}} ||<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">||

Ubuntu Touch should have six time and date pickers: time, date, week, month, 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

Common elements

Time dial

time-dial.png

A time dial normally consists of two nested dials, with the time displayed in the center. Spinning the inner dial should adjust the hours, the outer dial the minutes.

To emphasize this, if you tap the hours or minutes segment of the time, the hour or minute hand should flash respectively. If you tap “AM” it should toggle to “PM” and vice versa, as an alternative to spinning the hour dial 360 degrees.

Spinner

spinner.png

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

If you tap a value anywhere in a spinner, 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 the app asks for a minimum and a lesser maximum, the picker should signal an error and ignore both of them.

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 default value less than the minimum, or greater than the maximum, the picker should signal an error and set it to the minimum or maximum respectively.

Time picker

picker-time.png picker-time-with-seconds.png

The time picker should normally consist of a time dial.

Minimum/maximum:

  • If the minimum and maximum fall within the same hour, the hour dial should not be present.
  • If the minimum and maximum fall within the same minute, neither the hour nor minute dial should be present, but the time should still be displayed in place.

Precision:

  • If the precision is not a multiple of one minute, the dial should be accompanied by a seconds spinner.
  • If the precision is a multiple of one hour, the minute dial should not be present.

Date picker

picker-date.png

The date picker should normally consist of three spinners:

Week picker

picker-week.png

Month picker

picker-month.png

Local datetime picker

picker-time-date-local-time.png picker-time-date-local-date.png

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

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