Book

Contents

– User needs
– How it works
– Status
– Error messages
– Accessibility statement
– Image examples
– 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 date picker, 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.

Date picker

When using the Date picker, 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.

Status

Working progress

Error messages

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:

Image examples

Image of pattern here..

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