Booking an appointment with a small time slot

[BrieWhyatt]

We have noticed a need adapt the way we offer appointments when the slots are very short in length and spread across multiple potential dates. This is because the short slots can result in long lists of potential appointments for users to scroll through. Plus, there has been an increasing need to offer advance appointments (e.g. on the NHS App, for flu clinics).

We are therefore suggesting an adaptation to the existing expander component. It follows this hypothesis:

IF we use an expandable component to show appointment time slots within each available date, THEN it will be easier for users to book an appointment BECAUSE users will select a date before seeing slots, and will therefore see fewer slots at once.

This works on the assumption that grouping appointments by date will allow a user to first select a date relevant to them, and then make a decision about a particular slot. This splits the appointment booking process into more distinct steps, theoretically making the decision making process for a user less arduous.

The initial need for this was to enable GP surgeries to make short appointment slots for flu clinics bookable up to 16 weeks in advance in the NHS App. We therefore had to mitigate the issues of long pages, too many slots to choose between across multiple dates and the potential for long load times.

The proposed design

Collapsed view:

Expanded view:

Why do we think this is an appropriate pattern for booking small time slots?

1. It reduces initial scrolling upon the return of appointment search results.
2. Reduction in load time as not every single available appointment would need to be loaded at once.
3. Allows users to see all available dates without using a calendar view (which are difficult to make accessible).
4. It splits appointment booking process into two distinct decisions: (1) What date is right for me? (2) What time is right for me? which reduces cognitive load.
5. Adding an available appointment count would set expectations about how much choice a user has.
6. The pattern would use an existing component.
7. Sets expectations for the length of the appointment.

What has actually been tested so far

Due to initial technical restraints on the NHS App team, we have tested this variation of the above proposed design:

Collapsed view:

Expanded view:

It was tested with 5 users in August 2020, with the following outcomes:

1. All users were able to open the expanders and select a flu appointment.
2. Users could switch dates effectively.
3. Users were comfortable that selecting a time slot was the action required to continue booking the appointment.

[henocookie]

Had a brief look at how some other websites show short time slots for people to book things. Apple (booking a repair) - dates are shown in a horizontal area, times for the selected date in a vertically scrolling list below. Boots (booking a vaccination) - similar to Apple, dates are shown in a horizontal area, but times are shown in 3 column grid below. Morrisons (booking a home delivery) - tomorrow, day after today and 2 days after today are shown as the x-axis labels in a table with times as the y-axis labels

[davidhunter08]

I stumbled upon some 'book an appointment' work by the NHS Alpha team, from a few years ago. Looks like it could be useful.

I'm presuming Mat Johnson (I can't find his GitHub handle) was involved?

[paulfourniercarey]

We vary the choices give users in the give blood app, to help users that struggled with a long list, swapping the long list above 10 with the expander...

[jiveturkeyJay]

Has this been tested for accessibility issues such as working with Javascript switched off? We've been trying to prototype something like this for NBS for a while, but had a lot of problems regarding accessibility, though it seems we've finally fixed them.

Without Javascript

[samanthasaw]

Component tested on Strategic screening as part of design brief: How might we improve the participant journey from receiving an invitation to booking an appointment?​

Link to latest prototype which includes this component: Version 2

Hypothesis: If we use expanders to allow users to select an appointment slot ​ Then users will complete the task quicker because they do not have to navigate between several screens to pick a slot and will prefer being able to compare slot availability on different days to pick a slot that suits them best​ We'll know this works when users can successfully interact with the expanders and can select an appointment slot​

​Research findings: We observed no issues with this component. All users we tested with successfully chose a slot.

[cazzzac]

Hi there, I'm trying to design a Book My Blood Test service for NHS Sussex. The solution proposed by @samanthasaw looks good so far from an NHS pattern perspective. However, the Apple and Boots examples seem closer to the standard pattern for other digital products (e.g. Booksy, the haircut booking service), and potentially more prevalent across the web.

Has anyone done some further work on this feature to get us to an agreed pattern?

I've started a super rough draft below replicating Booksy. But I'm also experimenting with the expander component in Figma as referenced by @samanthasaw.

[davidhunter08]

Hi there, I'm trying to design a Book My Blood Test service for NHS Sussex. The solution proposed by @samanthasaw looks good so far from an NHS pattern perspective. However, the Apple and Boots examples seem closer to the standard pattern for other digital products (e.g. Booksy, the haircut booking service), and potentially more prevalent across the web.

Has anyone done some further work on this feature to get us to an agreed pattern?

I've started a super rough draft below replicating Booksy. But I'm also experimenting with the expander component in Figma as referenced by @samanthasaw.

Hi @cazzzac I was wondering how this has progressed? A team on the NHS App are looking at something similar. I quickly tested the Boots and Booksy versions and found neither to be accessible.

[cazzzac]

Hi Dave,

We’ve put this side project on pause while dealing with another client project for December and January. We’ll most likely pick this up from the start of February, but will keep this thread updated if we come up with any changes.

Agree the Booksy version isn’t accessible, but we will most likely need some visual way of selecting appointments (even if text supported to make accessible. In the meantime, we’ve developed a stand-in component using NHS accordions https://www.figma.com/file/zubPK2mefYGZykiA3pmXfv/Mastek-PEP-Service?type=design&node-id=578%3A5576&mode=design&t=fT6PfbRsvgYp3aQV-1

Cheers,

Zac

On 11 Dec 2023, at 22:55, Dave Hunter @.***> wrote:

Hi there, I'm trying to design a Book My Blood Test service for NHS Sussex. The solution proposed by @samanthasaw https://github.com/samanthasaw looks good so far from an NHS pattern perspective. However, the Apple and Boots examples seem closer to the standard pattern for other digital products (e.g. Booksy, the haircut booking service), and potentially more prevalent across the web.

Has anyone done some further work on this feature to get us to an agreed pattern?

I've started a super rough draft below replicating Booksy. But I'm also experimenting with the expander component in Figma as referenced by @samanthasaw https://github.com/samanthasaw.

https://private-user-images.githubusercontent.com/65489997/254287370-ece6bcae-a84e-4f45-ace9-f40bf7e40df7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDIzMDYzMjMsIm5iZiI6MTcwMjMwNjAyMywicGF0aCI6Ii82NTQ4OTk5Ny8yNTQyODczNzAtZWNlNmJjYWUtYTg0ZS00ZjQ1LWFjZTktZjQwYmY3ZTQwZGY3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjExVDE0NDcwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMwNGU2NTBlM2QyNzNiYTJhODY5MmMyOTQxYTQ1MmM4M2EzZTA1MTE2ZDgyNWE2MjA1MmQ0N2I0NjQ0Y2VhOTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lcDwuONK_bRHgbmlrjrp9jylIyDAAw7MYbpNCL403ZM Hi @cazzzac https://github.com/cazzzac I was wondering how this has progressed? A team on the NHS App are looking at something similar. I quickly tested the Boots and Booksy versions https://github.com/nhsuk/nhsapp-frontend/issues/34 and found neither to be accessible.

— Reply to this email directly, view it on GitHub https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/270#issuecomment-1850241894, or unsubscribe https://github.com/notifications/unsubscribe-auth/APTUYTJCYTM7M2CSISZOCMDYI4NGLAVCNFSM4R63SOC2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBVGAZDIMJYHE2A. You are receiving this because you were mentioned.