Emergency alert

[chrimesdev]

What

The emergency alert banner exists within the frontend library but its currently not within the NHS digital service manual.

Example: https://github.com/nhsuk/nhsuk-frontend/issues/166

Why

The emergency alert is specific to the NHS website and requires to be connected to our banner API to function as expected. The emergency alert banner is rarely used, even on the NHS website we have found that it has been used twice in the last 10 years. To our knowledge, no previous user testing had been done before the rebrand.

During the rebrand of NHS Choices to the NHS website, we decided a quick win would be to tidy it up with CSS in its current format. Aligning the design to our early new design, using the colours from the NHS colour palette.

We don't think that the emergency alert component is useful to many services (other than the NHS website) and believe there is a high chance of the component being misused instead of the intended usage of announcing national emergencies.

How it looked previously:

How it looks now:

Research findings:

We did a survey on nhs.uk. Users were asked to select what stands out most to them on the page. Emergency banners should be the most prominent thing.

The heatmaps told us:

• The banner competes for attention with the h1 heading on desktop.
• The banner is given more attention on mobile.
• The h1 heading is an important part of the page, so we don’t see users selecting that as a problem

Accessibility testing:

Fully blind user, Leeds BID August 2018

• The user understood the banner and the meaning it was intended to convey.
• Consider placing this banner before header and menu for screen readers to highlight the importance.
• On VoiceOver, the ARIA label of Alert was being read out after the banner content. Inconsistent with JAWS, which reads it out before.

Other

Theres also a potential issue with the overuse of banners on the NHS website (also known as bannergate).

Example of bannergate:

Whos using it?

• The NHS website (www.nhs.uk)

If you are using the emergency alert banner please let us know with any findings.

[alexparsons07]

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

• Remove to prevent people misusing: could pose a risk if used incorrectly i.e with other banners.

• It can remain within the NHS website implementation and used with caution.

• Agreed by design working group to remove code from the frontend library and not pursue adding in to the service manual based on current evidence of usage.

• The Github issue to stay open for the community to update with their evidence of an emergency alert style component.

[theonlymojo]

We've now removed this component from the Frontend library but if you have a product or service that requires this component then please update this issue with evidence, screenshots or links.

We'll then review the contribution and evidence to determine if it fulfils the contribution criteria to be proposed or developed for the NHS digital service manual.

[bencullimore]

Now the emergency banner has been in place on the NHS website for 5 months solid with links to coronavirus information, in user testing, we're beginning to see a reduction to its effectiveness (alerting users to the pandemic, providing links to pages).

As a number of websites currently have similar COVID-19 banners in similar colours (bright yellow) and positions my assumption is that we're beginning to see banner blindness come into play (https://www.nngroup.com/articles/banner-blindness-original-eyetracking/)

The emergency banner (on the NHS website) now sits in a multiple banner world -

• cookie banner
• nav banner
• emergency banner
• breadcrumb banner

Which you could also hypothesise this would have a knock-on effect to its prominence, and create more banner blindness.

Observations from a remote usability lab testing users journies through the website (multiple start points) finding coronavirus content (5 May 2020, remote - 5 users)

Banner blindness! Colour and position = news ticker/ad/cookie consent. Wording doesn’t imply comprehensive information. Put an in-content link on the homepage (and elsewhere)

• Task 2: I’d use search to find information about self-solation. The banner does not appear to be my first port of call if I’m looking for a specific piece of information, it is very generic (user 5)
• (T2) [The banner] looks like an update (eg Sky News) (ie not in-depth information) (user 5)
• Banner blindness - missed yellow coronavirus banner (user 2)

I think it might be worth looking into the effectiveness of the banner (directing users to emergency content) over a period of time

[georginaplatt]

Update from NHSEI Digital First Primary Care team: -

Overlays (With Covid Information) - interrupting and blocking users

The problem Guidance was issued by PHE on the copy for covid information, but no guidance was given on how this should be implemented in digital journeys. Many Online Consultation user journeys begin with overlays which block users' journeys.

User testing (with moderate and low digital confidence users) shows how the use of overlays/pop-up’s causes problems for users, particularly in mobile where the warning message can occupy the whole screen and X to dismiss the screen can be very small (and therefore hard to read and hard to tap)..

This can result in some of the least confident digital users being blocked from entering a GP website and accessing online services completely.

These two examples (from different GP practice websites) show the users view upon landing on the site.

Here are two examples using NHS Design Manual recommended approach for urgent or emergency information (the yellow bar across the upper part of the page):

We’d like your help:

1. User research: have you tested journeys which involve overlays (covid or otherwise) and what was the impact on users journey or experience? NHS design system has an approach for urgent/emergency information which seems to address this: (https://service-manual.nhs.uk/design-system/components/warning-callout) - have you seen other approaches for emergency information that might address this overlay challenge?

[sarawilcox]

Latest alert on NHS website

[sarawilcox]

The NHS website team has used the emergency banner over recent months to give people a link to more info about NHS strikes. But we found that very few people clicked it (0.005% of site visitors during the time the banner was active). So the banner is no longer being used for strike info.

On the other hand, there’s a section in the body copy on the NHS website home page about strikes. Heading: NHS strikes in October. The link in that section is the most popular link on the homepage with a CTR of 0.03%. So that’s where we’re talking about strikes for the time being.