Choosing a date — we want to know your use cases

[christopherthomasdesign]

We want to find out if adding a 'date picker' component to the Design System is a good idea. If not, we'd also consider adding more guidance on how to build one in the 'Dates' pattern.

About this work

This proposed component will help users select a date using a calendar. 'Date pickers' are usually used to help users choose a date in the future, such as to make an appointment.

This work might also include improvements to:

• Dates
• Date input

What we're looking for

We're currently looking for:

• examples of date pickers in services: screenshots, prototypes, links to live services
• use cases: explanations of why a 'date picker' was used in a service instead of a 'date input', or something else
• research: how well 'date pickers' tested with users to complete different tasks

This will help us understand the scenarios where 'date pickers' are used. We'd also like to understand how much service teams and users would benefit from a standardised 'date picker' in the Design System.

Existing examples

Digital Scotland

[davidjohnson444]

Our service allows users to claim compensation for injuries and illness due to Armed Forces service. We ask for details of when people served, dates of incidents and hospital treatment, sometimes from many years ago. It can be difficult for users to remember exact details.

Research with our processing teams told us it's hugely helpful to have at least an approximate year when trying to track down evidence to request on a claim (hospital notes etc). However, users told us that the standard date pattern made them assume "I have to get this right or it'll error me". We therefore decided to validate to just a year, guide users to enter an approximate year if they were unsure and introduced a checkbox "This date is approximate" in place of "I do not know". Almost instantly this reassured our customer users in moderated testing and we received strong evidence the approach was having the desired effect over time, i.e. users telling us roughly when, for example they received treatment, whilst feeling reassured they were 'allowed' to not be exact.

As a result, I'm not sure 'choose a date' would have worked for us because it's so specific. I thought I'd share this in case others had similar considerations.

[jessdenney]

HMRC Online Payments Service

As part of researching future dated payments with users we have been testing a date picker.
Our thoughts were if its not a known date/event like a birthday it might help users plan for timing payments. For example, helping cash flow by timing it after payday, or even to help not schedule it on a weekend.

We've done 2 rounds of research so far, its shown to be quite well received and users reflected our thoughts- although one user noted that mon/sun can alternate as the first day of the week which can be confusing.

I did look at Digital Scotland to see what guidance/format they had gone with before but couldn't make it match very well. I also looked at examples on CJS and HMCTS

[christopherthomasdesign]

Thanks for sharing this!

@wyllb just to clarify, when you say it isn't available if the browsers not running JS, do you mean that just the calendar button and date picker don't show? So it falls back to just the standard date inputs?

[wyllb]

Yep, that's correct. It just falls back to the date input fields. The button and dialog are completely absent from the DOM in this case.

[christopherthomasdesign]

Makes sense, quite neat! Thanks again 👍

[AllenConquest-6p6]

@wyllb I'm building a UI for a HO project. I need a date picker, and yours seems perfect. Would it be possible to copy, and how could I get access to it? Thanks

[jessdenney]

Hi @AllenConquest-6p6 you can see it in our prototype here (UN:prototypes PW:P4yment5). Or in Pay-frontend github here and here.
Happy to chat on X-gov slack if I can help further

[pbrocketmoj]

MOJ Visit Someone in Prison

We're currently iterating a date/time picker that allows users (call centre agents) to select a date and see available time slots to book a prison visit on behalf of a visitor over the phone. It's quite a large 'date picker' as it also needs to display time slots and prisoner schedule alongside the dates.

Our initial design was accordion based with available time slots shown when the accordion was open. This tested really well, but after going live we got feedback that users would prefer to see dates in context as often people would be asking to visit e.g. 'next Tuesday'.

What we have been testing is a calendar style component, which is divided into 28 day blocks as this is the timeframe in which visits can be booked. There are several different states for a date which are shown on the calendar - a date could either be completely unavailable as there are no visits that day, there could be visits on that date but they are fully booked/unavailable for that prisoner, or there could be visits on a date that are able to be booked. The fourth state would be the 'selected' date, and once a user clicks beyond 28 days they see another state which is for future visits accompanied by the date they are available from.

We've been testing this with current users but have only got as far as Figma prototypes currently, we're looking at how to make this fully accessible but have not done any accessibility testing yet.

The other part of this is making something that allows visitors to book for themselves online, and there is a calendar component being used for this on the existing prison visit booking service (which I don't have access to) - we'll be replacing this, but as most users are on mobile we'll be looking at other ways of doing this that aren't calendar based as it doesn't scale down to a really small mobile size very well.

[pbrocketmoj]

To update on this, we did some more iterating and research on the calendar component to get to the following designs:

These tested well with users, minimising any reliance on colour to convey information. These haven't been developed yet as we've had other high priority tickets, and from testing most users are actually very happy with the accordion-style date picker.