stevenwise-hmcts
commented
5 years ago The date picker pattern has been adapted for use on the new SSCS1 paper form.
We tried using standard date fields to enable users to provide multiple dates. Users found the page very busy and somewhat overwhelming. They felt like there was a lot to fill in although the date fields were optional - they only had to fill them in if there were dates they couldn't attend a hearing.
The more visual calendar pattern felt more engaging and familiar to users. They were able to choose days the could not attend a hearing by filling in the dates on the calendar like a multiple-choice questionnaire.
Note days e.g. Mon, Tue, Wed couldn't be included on the calendars as the form as a lifespan of many years and so the days would not match the dates in future years if they day names were included.
Prototype https://track-your-appeal.herokuapp.com/prototype-beta-uc-001/submit-your-appeal/016-hearing-dates (user: Justice pw: R3form)
When to use this pattern If users are required to enter multiple dates.
In the SSCS Appeal a benefit service we saw in usability testing and Google Analytics for the live service that users could be entering as many as 25 dates for days they were unavailable to attend a hearing.
Using the standard date field pattern could be repetitive and laborious for users. It would be particularly frustrating for users who have physical issues with typing or who have conditions which mean they tire easily.
How it works A familiar visual calendar pattern displaying a month and days in that month.
The user is able to select individual single dates or select multiple consecutive dates to make up a date range. Dates that are not available cannot be selected and have a distinct visual style.
Below the calendar, a list of selected dates is displayed to help users keep track of dates they have selected, particularly when navigating away to different months. It also acts as a summary for the user to review before they proceed.
Dates can be deselected by clicking the selected date in the calendar or the remove link in the summary list.
There are some design features which haven't yet be implemented in code
The pattern has been tested and passed accessibility WCAG 2 guidelines at DAC (Digital Accessibility Centre). It has also be reviewed at GDS assessments.
There is a non-JS version of the pattern which uses the standard date fields and 'add another' patterns to build up a list of dates.
RESEARCH This has tested positively. Nearly all users understood the interaction of being able to click on a date for selection at the first instance, knowing that once highlighted it was selected, and to deselect the date you simply had to click on it again. They found this interaction intuitive and easy to use. A small number of users missed the page title and assumed they were providing dates that they could attend a hearing. Once they had the dates they can’t go replayed under the heading and reiterated in the copy they had no issues. We provide a version for users without JavaScript which has tested positively.
PB Sprint 17 | Online Submission Prototype | Iteration 5 | MRN Unhappy Paths / Grounds For Appeal
PB Sprint 24 | Online Submission Prototype | Iteration 8 | Appellants and Appointees | Grounds For Appeal | Submission confirmation and resulting journeys | Appointee sign up journey
PB Sprint 28 | Online Submission Prototype | Iteration 8 | Assisted Digital Appellants | South London Law Centre
PB Sprint 36 | Online Submission pilot review | Appellants with assistive technology in their own homes | Bristol
Sprint [] | Beta | MYA I Manage appeal with Hearing - Iteration #1 I PIP claimants and appellants | Sutherland Labs, London
Sprint [] | Beta | MYA I Manage appeal with Hearing - Iteration #2 I PIP claimants and appellants | Sutherland Labs, London