Confirmation pages

[bencullimore]

What

Let users know they’ve completed a transaction.

Why

GOV.UK Design system suggests: Confirmation pages reassure users that they have completed a transaction and helps them understand what to expect next. https://design-system.service.gov.uk/patterns/confirmation-pages/

• NHS eReferral Service use one on their patient booking service and from memory it helped users know that their booking was complete.

I'm sure other work on confirmation screens has been going on in the NHS - would be good to collate all examples here.

[thomashallam]

NHS e-Referral Service proposed design changes:

Pre-confirmation page:

Confirmation page:

Unmoderated remote usability testing was conducted with 194 e-RS users (of admin, clinical and managerial background from GP practices, providers and CCGs). The users had a mix of levels of experienc with the system and had not used these particular designs before. We saw very high completion rates across the tasks with users successfully navigating from pre-confirmation onto the completion page, before going on to then print a letter or email the booking.

[thomashallam]

These are the screenshots of the NHS Manage Your Referral service which is currently live.

Preconfirmation:

Confirmation:

The original designs for Manage Your Referral confirmation pages went through many stages of iteration during Alpha and Beta; changes were applied on 16/8/19 to reflect the new NHS.uk look and feel (i.e. no changes were made to the overall booking journey).

[thomashallam]

@bencullimore hope this helps let me know if you need further info

[Demotive]

Hi @bencullimore 👋

Not sure you'd class these as 'confirmation' pages, but here's an example of a 111 "where to get help" page - something the user would see after they've been through triage.

This would be a "go here" example.

(I should add this kind of service display is being rolled out gradually, so the live site will reflect this grab in a minority of cases right now)

[StephenHill-NHSBSA]

Attempted conversion of current 'Issue maternity exemption certificates' service (NHS BSA) into using the NHS.UK Design System:

N.B. This is very much a work in progress!

[GrilloPress]

Confirmation page pattern for NHS Identity

These were only tested lightly (5 users) (Feb-March 2019)

Content I am sure could be better. Particularly on the last one ;)

But this follows the format that was very successful for the opt-out service:

h1. You have done a thing

p. We've sent you an email to confirm / you need to be aware of a thing

h2 What happens next / What you need to do next / Further information

{{ content }}

What I think is really important here though is that the confirmation page is just a way of satisfying the let users know they have done a thing.

Theses pages all come with a confirmation or email to action later.

Confirmation pages are just a way of telling users a thing has been done and there are many ways and stages that can happen :)

[GrilloPress]

The national data opt-out service went through many an iteration. Too many to show here.

Data from about 19500ish users. From alpha to live.

In terms of headings we explored:

• In a blue box
• In a white box
• Just as a h1
• with a all variants with a green alert box to combine with the h1

We found that users skipped past information in a coloured box every damn time (lol). Not just confirmation page. Just everywhere.

We also saw that centre-aligning information can be a touch problematic for users with high screen magnification.

I would also add that on NHS monitors, with terrible white/grey balance, and a user with zoomed screen the confirmation heading in a white box is invisible.

The user sees no visual white box, and therefore doesn't scroll right to find the centre-aligned box (to combat this I abandoned white boxes, but you can also add a touch of border to it as well to defend against this too)

[davidhunter08]

Some confirmation pages include alert (panels)

[alexparsons07]

The Design Working Group discussed this issue on 21/10/19. Feedback as follows:

• Many NHS journeys aren't end to end, confirmation pages should list the things to do next.

Approved by design working group to be developed

[chrimesdev]

We recently used the confirmation page in the 'Get a self-isolation note' service. We went with the styling found in the prototype kit however we decided not to centre align the content in the white panel because it was difficult to read with more content.

[TJFDM]

SCRa redesign.
We have a few combination pages across the system, as users can complete different tasks, all follow the same pattern and there is an example here from the 'Birth Notification Application'.

User research shows us that interaction with this page is important - the one thing that they came to do was create a new NHS number for the baby - so they have been given this information at the same time as receiving confirmation that the process that they've just been through has worked.
My favourite comment was on our FGM service though (which literally says 'FGM indicator added') where the user said 'Well that's boring isn't it!' :D however, it served it's purpose and the user understood this.

[samanthasaw]

On some NHS App services we are using ‘What happens next’ content. We have evidenced with the Order a repeat prescription and Nominate a pharmacy services that there is a need to not only tell users what they’ve just done, but what’s going to happen next.

We would recommend adapting this confirmation page entry to this description:

What

Use a confirmation page to:
• Let users know they’ve completed a transaction
• Help users understand what to do next

Examples of NHS App confirmation pages

Order a repeat prescription:

Nominate a pharmacy:

Book an appointment:

Research findings:

We had been using the ‘success’ component to indicate a transaction had been completed. But we’ve observed issues with this design:

July 2018:
Some users were confused at the end of the journey as they did not notice anything change on the screen and so were unaware whether their action was complete.

“I’m not realising I am at the end because it is all the same.”

July 2019:
Some struggled to understand that they had been successful in placing the right prescription order or what happened next.

October 2019:
Some confusion about whether the appointment had been booked.

November 2019:
Success page still lacks information, leaving users unsure about next steps.

[baracoffice]

IMO (not supported by specific research but by UR on various services, my own habits and observations) the big blue panel with confirmatory working becomes an expected part of the journey, and provides users with a sense of relief. If you have completed a few gov transactions you come to expect it. It makes sense to continue that pattern in the NHS to help it become a standard pattern in the public sector.
There are various instances where there are additional steps needed in Gov pages, I'll try and find/add if I can.

[sarawilcox]

The GOV.UK pattern centres the text but I think in NHS examples we tend to left align. Unless anyone knows of a good reason to centre it?

[tishsmith]

NHS Wayfinder has gone through a few iterations of a 'confirmation' message screen and was influenced by similar designs to eRS/manage your referral. It is currently live with multiple third party providers within the secondary healthcare journey where patients can reschedule or cancel their upcoming appointments. It has gone through multiple rounds of user testing and was initially rolled out in summer 2022 and hasn't changed since. Wayfinder has since used this pattern further in more recent designs (as we know it has tested really well with patients, giving them peace of mind that their journey has been confirmed) - therefore it has now been used in examples where patients submit a questionnaire.

[sarawilcox]

We're looking to publish a panel component and confirmation pattern in the design system shortly. If you've used the GOV component or pattern, please share your findings here.

Here's a PR for adding the panel component to the frontend: nhsuk/nhsuk-frontend#1012.

And a PR for adding the panel component and confirmation page pattern above.

[paulmsmith]

The GOV.UK pattern centres the text but I think in NHS examples we tend to left align. Unless anyone knows of a good reason to centre it?

The centred text was originally based around a very concise affirmative headline content and structured data beneath (such as the reference number) but over time I've seen it used with left aligned text for longer headlines. There was/is debate about how that is possibly counter to the intent of pattern.

[michaelNetCompany]

We use this design in GP registration

[StephenHill-NHSBSA]

Appreciate the confirmation panel on the GOV.UK Design System is green (and the PR looks to follow suit), but as can be seen above there are multiple different options that people have used. Here in the NHS BSA we have used blue for a number of years and feedback in general is very positive i.e. provides re-assurance etc...

[anandamaryon1]

Appreciate the confirmation panel on the GOV.UK Design System is green (and the PR looks to follow suit), but as can be seen above there are multiple different options that people have used. Here in the NHS BSA we have used blue for a number of years and feedback in general is very positive i.e. provides re-assurance etc...

Hi @StephenHill-NHSBSA, the team that opened the PR tested with green only but also found it effective and reassuring. It was chosen because it follows Gov, so is potentially more familiar to users, green is often used as a success colour including in on tags, and the design system uses a lot of blue already, so green is likely to stand out better.

I'm sure it can work with either colour, but we're going to go with green for the slight edge given by the points I mention above.