-
Notifications
You must be signed in to change notification settings - Fork 0
Book
– User needs
– How it works
- Calendar component
- Time selection component
- Check your booking
– Status
– Error messages
– Accessibility statement
– Research into this pattern
– Discuss this pattern
This pattern helps users to book an appointment/trip/test by using a calendar component and if needed, a time selection component.
The ‘Book’ pattern consists of a calendar component and a time picker if needed, followed by an optional ‘check your booking’ page. The ‘select a date’ page will contain a monthly calendar, with the first available date pre-selected. Unavailable dates will be disabled. When a date is selected, the user will be able to check the booking which will lead to a success page. When the booking is made the user will receive a confirmation email.
If the service requires the user to select a date and time, the time picker component will be placed below the calendar component.
The selected date and time will be pulled through onto the ‘check your booking’ page.
When using the calendar component, you should:
-
pre-select the first available date in the calendar on page load
-
disable/grey out any unavailable dates
-
use inset text to inform the user when the next available date is in a different month. For example, if today’s date is 1/10/20 but the next available appointment isn’t until 2/11/20 this inset would appear on page load. Inset text: “This is the next available [appointment/trip/test]”
-
use inset text to inform the user when they can select a date but not a time, say “You can select a date but you cannot select a time. We’ll be with you between ## and ##.”
-
use chevrons to allow the user to navigate between different months
-
if there are no available appointments, direct the user to a 'no available appointments' end-point
-
when there’s a month with no available appointments the month will still be shown.
When using the time selection component, you should:
-
default to the ‘Morning’ tab if there are both morning and afternoon times available
-
default to the ‘Afternoon’ tab if there are no morning times available
-
use Warning text when there are no Morning times available. Warning text: “There are no available morning #### on this date, please select an afternoon time slot or a different date”
-
use Warning text when there are no Afternoon times available. Warning text: “There are no available afternoon #### on this date, please select a morning time slot or a different date”
Axure mock-up - Time availability - warning text
When JavaScript is turned off, you should:
-
remove morning and afternoon tabs
-
remove dates from the calendar leaving only the month, year and chevrons
-
include date heading above each range of times, for example ’Thursday 21 January 2021’
Axure mock-up - Time selection - JavaScript disabled
JavaScript not enabled in a browser
This page can be toggled on and off and is dependent on the service and form. If the service does not want or need this page, the journey would either go from the calendar > submit > success page. If additional patterns such as pay or document upload etc are needed, the journey would be calendar > pay/document upload > submit > success page.
When a user has selected both a date and time, they will press continue which will take them to the ‘check your booking’ page. The date chosen by the user will be pulled through in the format ‘day date month year’ for example: ‘Thursday 15 October 2020’.
Below the date on the following line of the table shows the time selected by the user. In the format of: ‘time am/pm to time am/pm’ for example: ‘1pm to 4pm’. or simply 1pm.
Axure mock-up - Check your booking - date and time
When the user is only given the option to book a date and not a time, the ‘check your booking’ page will display the chosen date and an estimated time scale of when the appointment will be.
Services such as Pest Control don’t allow the user to select a time, instead it gives the user a rough time scale of when the appointment will take place. In these scenarios the date will be displayed in the same table format with the time displayed as: “Time: between ## am/pm and ## am/pm”. ‘Between’ is needed as there is not a specific time that the service can give the user, instead of 10am to 8pm which would cause the user to assume the appointment will last for that specific time period.
Axure mock-up - Check your booking - date only
Working progress
When the user has JavaScript enabled error messages will not be needed. Instead, the ‘continue/submit’ button will be disabled.
The disabled button will not enable until a user has:
- selected a date
and/or
- selected a time
Axure mock-up - Error messages - JavaScript enabled
When the user has JavaScript disabled error messages are needed as the disabled button does not work without JavaScript.
Select a date and time
Though unlikely, it is possible for a user to see the error message ‘You must select a date and time’. Users should not be able to deselect a date; therefore, a date should always be selected. However, if the user finds a way around this an error message is needed if the user tries to continue without selecting a date or time.
Axure mock-up - Error messages - select a date and time
Axure mock-up - Error messages - select a date
Select a time
When the user has selected a date but not a time and presses ‘continue’ the error message ‘You must select a time’ appears.
Axure mock-up - Error messages - select a time
Use an error message to identify when the user has not provided the information in the format you are expecting. To help the user, you should show an error message that allows them to fix the problem.
For error message styling follow GOV.UK Design System - Error message
This pattern has a rating of AA.
Please see our accessibility statement.
To make it AAA, we need to:
For the development of this pattern, we looked closely at:
Pause
Patterns
Add anotherAddress picker
Book
Check your answers (summary page)
Check your order
Conditionally revealing a related question on Radio buttons and Checkboxes
Document upload
Eligibility end-point
Emails
Error messages
Error pages
Name
Pay
Phone and email
Preferred method of contact
Street picker
Success page