Date & Time Selection

Introduction

We need an improved and consistent design for how date and time selection works across the OS.

Designers

AllanDay

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

http://demo.mobiscroll.com/

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

See Also

Design/OS/DateTimeSelection (last edited 2015-11-23 11:53:03 by AllanDay)