Book

Contents

– 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

---

User needs

This pattern helps users to book an appointment/trip/test by using a calendar component and if needed, a time selection component.

How it works

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 e-mail.

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.

Axure mock-up - Book

Calendar component

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 for ##### but you can not 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 an end point

• when there’s a month with no available appointments the month will still be shown.

Time selection component

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 afternoon #### on this date, please select a morning time slot or a different date”

Time selection - warning text

Time selection JavaScript disabled

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

Check your booking

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

Status

Working progress

Error messages

JavaScript enabled

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 message - JavaScript enabled

JavaScript disabled

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 message - select a date and time

Axure mock-up - Error message - 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 message - select a time

Use a validation message to identify when the user has failed to provide the information in the format you are expecting. To help the user, you should show the user an error message that allows them to fix the problem.

For styling follow GOV.UK

Accessibility statement

This pattern has a rating of AA.

Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.

Improvements

To make it AAA, we need to:

Research into this pattern

For the development of this pattern, we looked closely at:

• GOV.UK
• GOV.UK DVLA booking calendar
• https://www.specsavers.co.uk

Discuss this pattern

Pause