Choosing a date — we want to know your use cases #2375
Replies: 3 comments 13 replies
-
|
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.
|
Beta Was this translation helpful? Give feedback.
-
|
HMRC Online Payments Service As part of researching future dated payments with users we have been testing a date picker. 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
|
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Makes sense, quite neat! Thanks again 👍 |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
|
Hi @AllenConquest-6p6 you can see it in our prototype here (UN:prototypes PW:P4yment5). Or in Pay-frontend github here and here. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Latest update on this for anyone who is interested: We ended up developing a calendar date picker for the public service of book a prison visit https://www.figma.com/design/qgKJI2rYX3kC8l2T9JRPKf/Calendar-Design?node-id=1604-483 This has just gone through an accessibility audit and passed with flying colours: "The date selection component is implemented very well, both visually and in terms of screen reader accessibility. Screen reader users are clearly informed about the date they are focusing on, the corresponding day of the week, and the number of available visit slots as they tab through the calendar. Upon selecting a date, focus automatically shifts to the available slots, allowing users to proceed directly to time booking without having to tab through all remaining dates. Additionally, after selecting a date, users are presented with an option to choose a different date via the ‘Choose a different date above’ link. This link takes users back to the top of the calendar datepicker, making it easier to change their date selection without needing to navigate backwards through all the dates. This design is very user-friendly, particularly for screen reader users, as it streamlines the process of selecting a date and time." |
Beta Was this translation helpful? Give feedback.
-
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:
What we're looking for
We're currently looking for:
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
Beta Was this translation helpful? Give feedback.
All reactions