Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date picker #17

Open
govuk-design-system opened this issue Jan 12, 2018 · 10 comments

Comments

@govuk-design-system
Copy link
Collaborator

commented Jan 12, 2018

Also known as: calendar control

What

Help users select a date using a calendar. Useful when knowing the day of the week is important.

Why

Used on these services:

Anything else

@penx

This comment has been minimized.

Copy link

commented May 4, 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/

@dashouse

This comment has been minimized.

Copy link

commented May 4, 2018

@penx We have a prototype of an input to a calendar control that could be a good base for the range variant...
date-picker

@penx penx referenced this issue May 4, 2018

@timpaul timpaul added the component label May 21, 2018

This was referenced Jun 13, 2018
@tvararu

This comment has been minimized.

Copy link

commented Sep 24, 2018

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:

  • calendar.google.com (web app)
  • Calendar for iOS (native app)
  • Google Calendar for Android (native app)
  • icloud.com calendar (web app)
  • Outlook 365 calendar (web app)
@hannalaakso

This comment has been minimized.

Copy link
Member

commented Oct 1, 2018

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:

  • Session 1 and 2: 7 users that confident or expert level digital users
  • Session 3: 7 users with lower digital literacy skills
  • Session 4 and 5: 4 users with access needs

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:
date-picker-on-mobile

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.

@adamsilver

This comment has been minimized.

Copy link

commented Oct 25, 2018

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.
http://nostyle.herokuapp.com/examples/date-picker

@soupdragon99

This comment has been minimized.

Copy link

commented Feb 28, 2019

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:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

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.

@soupdragon99

This comment has been minimized.

Copy link

commented Feb 28, 2019

Calendar control

Overview

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:

image

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.

Calendar controls typically rely on JavaScript so should be treated as an enhancement. users should always be able to enter the date into a free-text field as well as use the control.

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:

  • a date of birth entry that mixed text boxes (day / year) with a dropdown (month)
  • a date of birth entry that offered a choice of three dropdowns or navigation through an overlaid calendar
  • an arrival/departure dates entry that offered a choice of two dropdowns (combined month/year and day) or navigation through an overlaid calendar.

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:

image

The grid is built as a table. Each day is an anchor element allowing tabbing. "May" is also an anchor element. When clicked, JavaScript changes the scroll position of the day cells.

Slot Picker Calendar selected:

image

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:

image

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/

Related patterns

+Dates
+Date of birth
+Time picker
+Date ranges
+Book an appointment

@charlottewild

This comment has been minimized.

Copy link

commented May 14, 2019

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.

Screenshot 2019-05-13 at 09 00 07

@adamsilver

This comment has been minimized.

Copy link

commented Jul 11, 2019

Service: Prison NOMIS
Department: HM Prison and Probation Service

image

@adamsilver

This comment has been minimized.

Copy link

commented Jul 11, 2019

Service: Moving People Safely
Department: HMPPS

image

@adamsilver adamsilver referenced this issue Jul 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.