Date & Time Selection
Contents
Introduction
We need an improved and consistent design for how date and time selection works across the OS.
Designers
Objectives
- Select a specific time of day (ex. for an appointment)
- Select a duration (ex. for a timer)
- 24 hour and AM/PM modes
- Select a specific date (ex. for a flight)
- Support both touch and precision pointing
Constraints
Relevant Art
iOS
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/Art/uidatepicker_intro_2x.png
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/Art/date_picker_7_2x.png
Android
http://developer.android.com/images/ui/pickers.png
https://camo.githubusercontent.com/3b24a2a13a82edc80f54919d224f82c0db70ebf5/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313037333630362f3836373834372f65316365333631632d663734342d313165322d383161342d3937393638313366616166332e706e67
Nokia N9
nokia-n9.jpg
Windows Phone
win-phone-time.png win-phone-date.png
GNOME 2
gtk-calendar.png
Extremely small target areas for changing month and year and selecting day. Optimized for selecting dates near the current date. Days from other months shown in same view with same styling despite month heading at the top.
Mobiscroll
Discussion
General observations:
- Selecting dates near the current date is most common.
- There are often issues with scroll-based widgets (particularly seen on mobile) - can be rather tricky to use.
- Generally times are used in 5 minute increments - would be good to prioritise this, with secondary functionality to fine tune to an exact time.
See mockup experiments for various ideas and discussion.
Tentative Design
https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/theming/widgets/date-and-time/date-and-time-pickers-wires.png
Comments