Alert panel

[beccagorton182]

What

An alert (panel) that advises a user that they need to check something on a page, or that the transaction or journey has been completed successfully.

Why

GOV.UK have a variant of this that they call 'Panel'. It is a block colour that informs a user that a transaction is completed.
https://design-system.service.gov.uk/components/panel/
There are other services using alert panels in this way
e-Referral service use this currently to inform users that they need to check or confirm details before they proceed. Other variants include informing the user that the transaction was successful, or that an action was successful.

There are other NHS services that might need this for their transactional journeys.

User research findings
We have run many rounds of research with a 'Check and Review' page as part of the booking a referral journey. Users have understood the alert panel and their place in the transactional journey.
Recent rounds of testing has included this for booking an appointment journey, and users have understood their place in the journey, and know what to do next due to the alert panel.

This particular panel [name could be changed?] with this use case hasn't appeared in the service manual but other variants of panels have.

Anything else

Research of appointment booking journey and current alerts both in our style guide and in situ

[davidhunter08]

Alert component in the GOV.UK Design system backlog

[Demotive]

111 online has a similar small suite of "callouts" to do similar things:

An aside, to gain attention:

As a directive:

As a strong focal point:

[devansXD]

@davidhunter08 GOV also have these alert styles on multiple services alphagov/govuk-design-system-backlog#2

[danjohnstonUX]

May be the wrong place so I'm happy to move elsewhere if required but we recently implemented a type of alert banner on the SCRa redesign.

What
The "Hot Ribbon" (as dubbed by one of our stakeholders) appears on a patient's overview page within SCRa when there is a piece of important information regarding their health/treatment that the user should be aware of. Examples at:

• http://scra-redesign.herokuapp.com/ra-flag_v4/patient-overview-flag-added
• http://scra-redesign.herokuapp.com/cpis-v3/patient-overview-simple
• http://scra-redesign.herokuapp.com/fgm-v2/patient-overview-simple

Why
Users need a way to understand that there is important information regarding a patient when they land on that patient's overview page after performing a search for that patient. The information is important enough that the user should be aware of the information within it, but not so important that it should detract from whatever the user has visited that patient's overview page for.

Our users understood that the warm yellow colour indicated the presence of important information and that the ribbon led them to where this information was stored. The ribbon is clickable and takes the user to the relevant section within the redesigned SCRa.

On top of this, where the users were involved in a journey that would create such an alert, such as adding a Reasonable Adjustment or an FGM flag, the ribbon served to confirm to that user they had been successful in the creation of the relevant information.

Anything else

We have tested a few variations of the ribbon, as well as pages containing multiple ribbons and have received positive feedback regarding their presence. We'll continue to test this addition with other relevant additions to the redesigned SCRa as and when they surface.

[devansXD]

Hi @danjohnstonUX this is the perfect place for what youv'e done ;) were also in process of testing alerts on screening, having iterated on the eRS versions to provide a clear contrast against the page tint.

[danjohnstonUX]

Added a question regarding focus states on our alert panels (as they're clickable) here #193 (comment)

[davidhunter08]

Some early thinking for an alert component:

https://nhsuk-design-system-testing.herokuapp.com/alert

Code available on GitHub:

HTML: https://github.com/nhsuk/design-system-testing/tree/master/app/views/includes/alert-variants
Sass: https://github.com/nhsuk/design-system-testing/blob/master/app/assets/sass/components/_alert.scss

[davidhunter08]

Interesting insight: https://twitter.com/adambsilver/status/1280511436561801219?s=20

[kevinkuszyk]

Hello folks,

As this issue is open I'm assuming this isn't fully implemented in the design system yet. Do you have an ETA for it to be finalised?

Thanks!

[SiRose]

I came to check this card as I'd seen mention of the GOV.UK notification banner component on Slack.

I'm pleased to see that our NHS Digital equivalent doesn't carry a title.

My hypothesis is that a title in this component is:

• likely to be missed, as users focus on the message in the content
• superfluous, as the title can factored into the content
• problematic for accessibility, if it's an H2 that might come before the page's H1

[davidhunter08]

Hello folks,

As this issue is open I'm assuming this isn't fully implemented in the design system yet. Do you have an ETA for it to be finalised?

Thanks!

Hi @kevinkuszyk,

Sorry we missed this comment! There is currently no ETA for it to be finalised. We're planning to run a backlog prioritisation exercise soon. Hopefully this will give us a better idea of when it will happen.

Cheers!

[davidhunter08]

The GOV.UK Design System recently added a 'Notification banner' component.

Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.

[carolinefinucane864]

This thread seems to be about 2 slightly different things - 1/ calling out important information, and 2/ time-sensitive alerts asking you to take action

Both important, but I'm personally interested in the latter - an alert tailored to your situation, asking you to take action asap (eg, a deadline coming up, take action now; or we've noticed you haven't done your training yet - do this now)

David Hunter -your contributions were really helpful, I'll nick those component ideas for our alpha :) (alerting vaccinators in a point of care system to things they personally need to do asap - e.g. check in an order, order more stock, complete training)

[beccagorton1]

We have used an alert panel in both our public facing and administrative side of our service. We use the alert panel to let our public facing users know that their application/registration has been received by the organisation they are applying to.

For administrative users, we have used the alert panel to let users know that they have performed an action that might alter their records, or when they have completed an action.

We have used the design used by the covid-19 vaccinations booking service as this looks different to the other cards used on our service as it should stand out as an alert.