Stop users in a journey to tell them important information

[GrilloPress]

What

Pattern in use by several services in the NHS, and many more outside, to interrupt a journey or transaction to tell users something important or helpful

Why

In use by:

• Choose if data from your health records can be used for research and planning
• NHS App
• NHS login
• NHS 111 Online

As well as non-NHS services like Passport, Verify etc.

Anything else

Increased the number of successful transactions for NHS 111 Online by 10%. Significantly improved conversation rate and comprehension for Choose if data from your health records can be used for research and planning, NHS App and NHS login

Examples:

NHS 111 online

NHS login

Choose if data from your health records can be used for research and planning

NHS App

[GrilloPress]

Stop users to tell them important information

Use this pattern to stop users in a journey to tell them important information before continuing

When to use this pattern

In a transactional journey when you need to tell them something important.

Use this pattern when:

• You need users to understand something so they are more successful using your service
• You have evidence that providing information before a journey or in a normal page does not work on it’s own

If you need users to understand two or three things. Try providing information just ahead of when a user needs it or use several pages in a row.

When not to use this pattern

Do not use this pattern:

• outside of transactional journeys
• when you need to include large amounts of content
• when you need a user to make a choice between two or more options. In these scenarios, use a radio button instead
• when you need a user to actively confirm something before an action takes place. For example, when deleting an account or cancelling an appointment
• alongside other content or data items which may mean the interruption is less visually distinct or easily missed

How to use this pattern

• Use a page that is visually distinct from other pages in a journey
• Use a clear heading that tells the user the most important thing they need to do
• Include a button with “Continue” or “I understand”

Research

The “Choose if data from your health records can be used for research and planning“ team found that:

• Users can mistake images and other graphical elements [for example, dots] for things they can click
• Users were more likely to stop and read content in an interruption card compared to a page styled like other pages
• Users did not always read anything other than the heading
• Not all users will slow down. There is no pattern that will work for all users

111 Online team found that users were more likely to complete a transaction when told that more questions meant a less serious diagnosis.

111 Online saw a 10% increase in completed journeys after using a page to interrupt users.

Outside of the NHS:

• The passport service found interrupting users’ flow with this pattern has increased understanding and retention of important information
• The department for Education found that most users will now stop and read the content.

[GrilloPress]

Other links

alphagov/govuk-design-system-backlog#27

[chrimesdev]

The recent 'Ask for a coronavirus test' service has this interruption page in the middle of a transactional journey. I need to find out what user testing has been done on this page.

[henocookie]

Whilst conducting usability testing on the sign up to be contacted for coronavirus vaccine studies service, which uses an experimental stop users in a journey to tell them important information pattern, one user made the following comment when asked why they quickly moved onto the next screen:

It's just giving me a flavour of what questions are coming

but appreciated that the design gave them a preview of the questions to come

[henocookie]

@GrilloPress I just wondered if there was a hypothesis for the example of this pattern in the NHS App, which uses a different blue to the NHS blue?

[GrilloPress]

Two reasons for a different blue.

The mechanism works by being different. With the NHS blue being used for the navbar and any other website etc. you’ve come from, using the same blue. So it’s a case of standing out and we don’t really do that by using the same blue or a very similar one.

The NHS App blue was an improvement on contrast as well. So the default NHS blue does not have enough contrast for smaller fonts in white.

So we tweaked it to have a much stronger contrast. We also used a blue that rendered on what we’d call nhs grade monitors. So things like an old monitor your GP receptionist would use, rather than just the latest iPhones etc.

Ultimately, whatever exact shade is chosen it must:

1. Be visually distinct from any other blue used. As the mechanism relies on it being very different
2. Be a good enough contrast with small white text
3. Work on a range of quality monitors and devices found in use in the NHS

[BrieWhyatt]

We recently tested a version of the interrupt card pattern that featured a small checkbox to give the users an opportunity to see less of the interrupt screen. This was due to feedback from the app that suggested users were inconvenienced by being interrupted too often if they were frequent users of the third party services within the app.

However, the recent research (23/08/2020) showed that changing the pattern was not necessary for now because:

1. No users checked the box without being prompted, they intuitively clicked continue as the fasted route to get past the page.
2. Most users could not articulate the purpose of the basic interrupt screen (no checkbox), suggesting that they don't understand what they would be opting to see less of.

[henocookie]

NHS login recently completed user research for the Prove Your Identity (PYI) user journey when users set up NHS login. Kirsty Ramsay-Hogan, a User Researcher on the team, shared that during usability testing with a participant using a colour contrast tool, they found:

a sudden interruption box with white text in a blue box (after consistently grey background) causes issues for those with personalised colour contrast tools and affects their ability to read what is on the screen. We should strive to keep our backgrounds as consistent as possible to avoid this occurring.

An example user journey where the interruption screen appears in an NHS login user journey is when a user's information is being checked and could take "up to 2 hours":

[GrilloPress]

We tested less arresting colours or different backgrounds and they didn't work for any user. The affect only works if it is quite different.

Did the User researcher say what issues it caused? Was it that the tool was configured personally and didn't give a good contrast or something else? Or did it cause pain or other issue?

The blue card was tested on 6 different common contrast modes and with numerous rounds in the digital accessibility centre.

The point of an interruption is to interrupt. So as such it should be quite different. Keeping it the same renders it useless as shown by user research.

It might be good to keep it as quite a rarely used thing. In fact, it should be last resort. And a thank you we're checking page might not be such an instance. Though the login team may have initially found it to be needed

[henocookie]

Kirsty Ramsay-Hogan shared notes that were taken from the user research session. It was one user so not a definite finding and worth doing more user testing around.

Some key user quotes and an observation from the user research session:

"ah ok this is the bad bit - the bit where I can't read it"

"That box. I'm not sure what colour it is, but the background and the text are blending in together quite a bit. It's quite glaring."

user has to magnify text to one word per screen to be able to read it

[GrilloPress]

Be great if they could send across the colour / set up. Might be something the team could tweak in either the colours or implementation

[henocookie]

Be great if they could send across the colour / set up. Might be something the team could tweak in either the colours or implementation

I have asked a Designer in the NHS login team if they are able to jump into this discussion 😄 Awaiting a response

[LydiaTeebay]

Hi, sorry for the delay!!! The pages that were tested that resulted in those comments are similar to that attached.

(prototype links: https://nhs-cid.herokuapp.com/service-access/v24/service-access-start?service=app6&serviceName=NHS%20app and https://nhs-cid.herokuapp.com/service-access/v24/service-access-complete?service=app6&serviceName=NHS%20app)
We are now going to suggest within NHS login that we avoid changing the background colour as this reverses the settings that users have selected themselves. Suggestion to go with a bold blue outline instead, if there is a user need.
We are losing the user need in a lot of places along the P9 journey because we have introduced new "steps pages" that have tested well:

(prototype links: https://nhs-cid.herokuapp.com/service-access/v24/service-access-steps_1 https://nhs-cid.herokuapp.com/service-access/v24/service-access-steps_2 https://nhs-cid.herokuapp.com/service-access/v24/service-access-steps_3 https://nhs-cid.herokuapp.com/service-access/v24/service-access-steps_complete)

[GrilloPress]

Step cards seem a more appropriate use case for instructions. It'd be great if you could visualise an example of one with the border. I assume it tracks what 111 ended up with