Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Date picker #17
Also known as: calendar control
Help users select a date using a calendar. Useful when knowing the day of the week is important.
Used on these services:
created this issue from a note
in GOV.UK Design System Community Backlog
Jan 12, 2018
Please consider how a user could be asked to select a range of dates, e.g. a start date and end date.
This would be useful when a user is searching for events that occur within a certain period.
Perhaps of interest is Airbnb's extensive work on their date picker component - http://airbnb.io/react-dates/
Regarding the use-case for a full-screen calendar visualisation (as opposed to a small focused date picker), for future research, the following products could provide inspiration for how to implement this pattern in an accessible/user-friendly/familiar way:
Some findings from lab testing a date picker prototype:
The GOV.UK Design System team embedded the Backpack date picker, with a couple of small tweaks, into a prototype that went through lab testing in autumn/winter 2017 (as part of a wider piece of work). See the prototype (patterns/components).
We chose it as it was being billed as an accessible open source date picker. We hoped to generate some insights into how users interact with date pickers and if the Backpack one tested well, also consider using it as the basis for one for the Design System.
We tested it with 17 users in total:
The following devices were used during the research: Desktop (Windows), laptop (Windows), iPhone, Android, iPad, JAWS, Voiceover (iPhone and iPad), Zoomtext 10, physical magnifier
The date picker worked well for users with higher digital skills. These users had previous experience of interacting with similar components. An example of this was when buying flight or rail tickets online.
The results from testing with users with lower digital skills were also broadly positive, with users saying they found the date picker "useful" and "something you expect these days". One users did not realise they were on the wrong year when attempting to find a date. One mobile user tried to use the browser "Back" button to close the date picker:
Screen reader users found the picker a more positive experience compared to similar components they had encountered elsewhere.
One screen reader user stated they liked the month dropdown.
One screen reader user said that it would be easy to miss the date picker had it opened while the user had zoomed in elsewhere on the page with ZoomText.
Several users with access needs stated that they would have preferred to type in the date: “being able to just enter a date in DD/MM/YY is more intuitive” and “I did not like combo boxes for selecting a date. Not good for people without vision”
One screen reader assumed that the arrows for controlling months were used for changing days.
One screen reader user tried to swipe left and right on the calendar.
One screen reader user stated that the hint for the date picker ("For example, 14/03/2017") suggested that a manual entry of dates is required.
I've done some work on date pickers which might be useful. In browsers that support the native date input (most mobile browsers) they get that, in browsers that lack support, users get a custom date picker with accessibility measures built in.
Dropbox Paper audit
On 28 February 2019 the Design System team reviewed a Dropbox Paper document discussing the Calendar Control pattern.
The aim was to reduce the number of places containing guidance and code by:
Below is a record of the outcomes of that review.
If you need to, you can see the original Dropbox Paper content in the internet archive.
Help users pick a date in the near future or past, or where the day of the week or week of the month is important.
Here’s an example from GOV.UK Pay:
When to use this pattern
Use a calendar control if knowing the day will help your users pick the right date. A common example is for booking an appointment.
When not to use this pattern
Don’t use calendar controls for well-know dates like a user’s date-of-birth, or where the day of the week is not important.
How it works
Users select dates from a visual representation of the month and can skip through months and years. This allows them to easily see what day of the week and week of the month a particular date is in, which is particularly useful for tasks like appointment booking.
Pop-up or embedded calendar controls
Most calendar controls are pop-up ones, like the GOV.UK Pay example above. However, if you need to represent other information, like date availability, it helps to use a larger embedded calendar control.
Research on this pattern
Calendar controls and Arabic speakers
Mashael Al-Saleh investigated Arabic speakers Understanding the Usability of Calendars on Transactional Interfaces (.pdf, 2013). This small eye-tracking study considered:
All three options were problematic: about half the participants got stuck on each type of date entry. Note: the paper refers to choosing between 'Georgian' and 'Hijri' calendars for date of birth - something to be aware of for Arabic speakers. (The recommendations in the paper are rather sweeping considering the range of the experiment - be cautious about them).
Prison Visit Booking (PVB)
In PVB we have users are required to pick up to three possible visiting slots within the next 28 days. A day can contain multiple slots. The user must first select a day to see the slots.
Slot Picker Calendar in it's initial state:
Slot Picker Calendar selected:
Light blue (10 May) is a hover state. Blue (7 May) is selected state. The blue corner marker (29 April) is a day with a chosen slot (this may not always be relevant.
Slot Picker Calendar scrolled:
This shows the result of activating the "May" link.
This calendar has tested well with users. It's a conventional calendar which gives the user familiarity.
The Slot Picker UI components have been extracted to a separate repo and a working example can be seen at http://ministryofjustice.github.io/moj_slotpicker/
Looking at different approaches to date selection / date picker, and flexibility of choosing a pre-defined day range and specifically where different days carry different costs or services. Been looking at how TfL do this for ULEZs. Example below. Be interested to see anyone else's approach to this recently.