TimeAndDatePickers
10810
Comment: + local datetime picker details; + zoned datetime picker details
|
11244
+ more images from the design process
|
Deletions are marked like this. | Additions are marked like this. |
Line 1: | Line 1: |
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'''. | 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'''. |
Line 112: | Line 112: |
== 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.) |
|
Line 152: | Line 156: |
=== Ideas from further brainstorming === {{attachment:p4.small.png}} === Visual design to narrow choices === {{attachment:draft-visuals.jpg}} |
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.
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.
- 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 |
yes |
seconds |
|||
date |
yes |
days |
|||
week |
yes |
weeks |
|||
month |
yes |
months |
|||
datetime-local |
yes |
seconds |
|||
datetime |
yes |
seconds |
year, month, date, hours, minutes, seconds, fraction, time zone offset |
Specification
Common elements
Time dial
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
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 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
The time picker should consist of a time dial and/or a seconds spinner.
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
The date picker should consist of three spinners: year, month, and/or date. The month spinner should list full month names (e.g. “September”). The date spinner should trailing-side-align dates, following them with leading-side-aligned weekdays (e.g. “Monday”) only if there is room for the longest possible one (e.g. in English, “30 Wednesday”).
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 29th) or the month (e.g. from a month that has 31 days to one that has fewer), 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
Month picker
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
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
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
Ideas from further brainstorming
Visual design to narrow choices
TimeAndDatePickers (last edited 2013-11-13 14:46:11 by faun)