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.

Time picker

When using the Time picker, you should:

• pre-select the ‘Morning’ tab if there are both morning and afternoon times available

• pre-select the ‘Afternoon’ tab if there are no morning times available

• use Warning text when there are no Morning times available. Inset text: “There are no available morning #### on this date, please select a morning time slot or a different date”

• use Warning text when there are no Afternoon times available. Inset text: “use Warning text when there are no Morning times available”

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 and submit to the success page. If additional patterns such as pay or document upload etc are needed, the journey would be calendar to pay/document upload etc to submit to 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, is the time selected by the user. In the format of: ‘timeam/pm to timeam/pm’ for example: ‘1pm to 4pm’. or simply 1pm.

Axure example:

When the user is only given the option to book a date and not a time, the ‘check your booking’ page will look like this, displaying the chosen date and an estimated time scale of when the appointment will be.

For services such as Pest Control that don’t allow the user to select a time but 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 ## and ##”. ‘Between’ is needed as there is not a specific time that the service can give the user, instead of #am to #pm which would cause the user to assume the appointment will last for that specific time period.

Axure example:

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.

When the disabled ‘continue’ button is used

The disabled button will not enable until a user has:

• selected a date

• selected a time

Axure mock-up:

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.

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

Axure mockup select a date and time: Axure mockup 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:

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