Alert component updates

[Richard592]

Hi, the Alert component uses non-standard colours which need adding to the component details somewhere, They are:

.panel-border-wide.alert-default {
border-color: #2b8cc4;
background-color: #dbeff9;
}
.panel-border-wide.alert-success {
border-color: #28a197;
background-color: #c6ece9;
}
.panel-border-wide.alert-error {
border-color: #c42b2b;
background-color: #f3dede;
}

Thanks.

[Sarraounia]

@Richard592 do you know if this was ever added to the design system? I want to add some new text to the Alert component to help content designers write content for alerts. If your suggestion hasn't been added yet, probably makes sense to put both these updates through together.

[Richard592]

@Sarraounia it looks like it hasn't been implemented, just judging by it still being unassigned. Happy for you to add additional criteria to this open issue. How it gets prioritised I don't know though. If you need it prioritising maybe include a nudge to Laurence Piercy as he is fielding GitHub contributions (I think).

[Sarraounia]

@Richard592 I've got my content ready now for the Alert page. I am on the design system working group so will liaise with Laurence and the team about this update.

What are your thoughts on how to communicate the non-standard colours? I have an idea but it's probably best if we have a quick chat about it. I can't tell who you are from your GitHub username so if you can write to me on Slack or send me an email, that would be great!

[Richard592]

Hi Ounie!! Turns out it is me that contributed to the Alert component on GitHub. I haven't been receiving any updates from gitHub, until two minutes ago. Laurence is still the best person to contact about it though. But happy to have a chat about it to see if i can help at all. Richard Chilver Senior Service Designer Migration and Borders Technology Home Office Data, Digital and Technology Sheffield Delivery Centre<https://collaboration.homeoffice.gov.uk/display/DH/Sheffield+Delivery+Centre> Vulcan House Steel 4-6 Millsands Sheffield S3 8NU HO Digital Data and Technology Strategy<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.gov.uk%2Fgovernment%2Fpublications%2Fhome-office-digital-data-and-technology-strategy-2024%2Fhome-office-digital-data-and-technology-strategy-2024&data=04%7C01%7CRichard.Chilver%40digital.homeoffice.gov.uk%7Ca08dfbb7e35e472f8afe08d9469c1b97%7C90a6982e16354aa087a6d5d63c7bc66e%7C0%7C0%7C637618458554297059%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=hInrXZfERg0DOYo69KO1nIwN8rhwOndHJeAKfXQYxs8%3D&reserved=0>

…

________________________________ From: Sarraounia Christianson ***@***.***> Sent: 31 March 2022 09:52 To: UKHomeOffice/design-system ***@***.***> Cc: Richard Chilver ***@***.***>; Mention ***@***.***> Subject: Re: [UKHomeOffice/design-system] Alert component (Issue #313) @Richard592<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FRichard592&data=04%7C01%7Crichard.chilver%40digital.homeoffice.gov.uk%7C6427f63626bc4fd1774c08da12f3bfa7%7C90a6982e16354aa087a6d5d63c7bc66e%7C0%7C0%7C637843135356822470%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=fYqZU4DoSyOxPdZZoGVOlIVUa5rX2eKpRaqmwSWSdDc%3D&reserved=0> I've got my content ready now for the Alert page. I am on the design system working group so will liaise with Laurence and the team about this update. What are your thoughts on how to communicate the non-standard colours? I have an idea but it's probably best if we have a quick chat about it. I can't tell who you are from your GitHub username so if you can write to me on Slack or send me an email, that would be great! — Reply to this email directly, view it on GitHub<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FUKHomeOffice%2Fdesign-system%2Fissues%2F313%23issuecomment-1084284180&data=04%7C01%7Crichard.chilver%40digital.homeoffice.gov.uk%7C6427f63626bc4fd1774c08da12f3bfa7%7C90a6982e16354aa087a6d5d63c7bc66e%7C0%7C0%7C637843135356822470%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=SwnGjOeLvTBsVcMDdjwojEplHm0TVi9gxQ5gCm%2FItgw%3D&reserved=0>, or unsubscribe<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAUHLGQHGBTLOBS5GVDZZKWTVCVRTXANCNFSM5IEHB7TA&data=04%7C01%7Crichard.chilver%40digital.homeoffice.gov.uk%7C6427f63626bc4fd1774c08da12f3bfa7%7C90a6982e16354aa087a6d5d63c7bc66e%7C0%7C0%7C637843135356822470%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=jb9%2BYpKlBHBbmR50YPq%2Bh13Llw0zWBpbczaP8hTxsII%3D&reserved=0>. You are receiving this because you were mentioned.Message ID: ***@***.***> Please ensure that any communication with the Home Office is via an official account ending with digital.homeoffice.gov.uk, homeoffice.gov.uk or homeoffice.gsi.gov.uk. This email and any files transmitted with it are private and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please return it to the address it came from telling them it is not for you and then delete it from your system. Communications via the digital.homeoffice.gov.uk domain may be automatically logged, monitored and/or recorded for legal purposes. This email message has been swept for computer viruses.

[anandamaryon-gov]

Just to loop into this issue to mention that the current colours used on the alert backgrounds don't allow enough contrast when using links within alerts. So if the colours are being looked at, this would be good to consider.

[Sarraounia]

Thanks @anandamaryon-gov there's going to be a workshop soon around colours in the design system soon so we can look at this then.

[Sarraounia]

I have drafted some content to add to the current Alerts component about how to write for it, and would like feedback from others across the Home Office.

PLEASE ADD ANY COMMENTS BY 13 MAY 2022.

##Writing for this component

Try to keep alerts to one or two lines of text and not necessarily in full sentences, given the lack of space. If the text does not end in a link and is a full sentence, include a full stop.

Tell users what to do next. If you can, give them a link that will take them directly to further support or the next action.

Only use bold for headings.

If the alert is about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can.

###Multiple alerts

Avoid using lots of alerts next to each other and put all the information in one alert where possible.

Some journeys may need multiple alerts on a single screen. If, for example, the journey has one successful and one error alert, they should be in priority order.

###Alert placement

Although alerts are usually put at the top of the screen, this is not always the case. Where you put the alert should suit the needs of your service.

[Richard592]

Hi Ounie,

In the part about dynamic content, is it worth expanding on that to include personalisation? Not sure what the content policy is on that and whether we will ever know users actual name. I'm thinking about it from the 'you' 'we' 'your' perspective as well.

Being picky here, but would changing 'various' to 'multiple' make the line under the Multiple alerts heading easier to interpret?

Maybe the last two points could go under a 'Positioning' header so they don't feel like they belong to the multiple alerts content. I know there's overlap there but might be clearer to have a positioning section as well as I know from experience that has not been clear in the past.

[Sarraounia]

Thanks for your comments @Richard592. Good point about the dynamic content. It is good practice to use names. We've done this in other services so have updated the guidance above. Didn't include anything about addressing users ('you' 'we' etc) as that's already covered in the GOV.UK style guide and we want people to follow that in the first instance.

The content was 2i'ed and that was a suggestion I got to use both 'various' and 'multiple.' I don't feel strongly about it either way. Did you find it difficult to understand as it currently is?

Have updated the content now to include a new header for 'Alert placement.' They do overlap a bit, especially the point about the priority order. Think that fits better in 'Multiple alerts' heading. What do you think?

[Richard592]

They're all good updates to it. The additional 'alert placement' helps clarify things, even if there's an overlap.
I did struggle with the 'various' and 'multiple' being interchangeable, but that's probably just my poor grasp of the English language. My interpretation is that 'various' means different types of alerts that are a specific list that isn't shown here, so where do I find that out? Whereas 'multiple' is directly stating more than one of any type. But I'm not going to die on a hill for a change or anything!

[Sarraounia]

Oh I see what you mean! It's really helpful feedback and exactly the challenge my content brain needs on a Friday afternoon. I've given it another stab now - hopefully it's a bit clearer..

[OscarJacksonHO]

Hi everyone,

Off the back of a product alignment workshop, I’ve found that there might be some improvements we could make on our current approach to alerts.

I thought I’d put some thoughts together before digging into this too much to get the conversation going.

Please share any thoughts.

Potential areas for improvement:

• making the purpose of different alerts more intuitive and distinct
• renaming ‘alerts’
• removing the ‘alert indicating an error’

Making the purpose of different alerts more intuitive and distinct

What

1. Explore adding some icons to the alerts, especially the ‘alert notifying of a successful outcome’. Perhaps, something like what ONS have done with theirs: ONS panels

2. Define the use of each component and think about splitting the guidance out so that we can provide something more comprehensive and distinct for each variant.

3. Remove headings from the examples for ‘standard alerts’ to discourage their use (maintain this as an option)

Why

1. Currently our ‘alerts’ are only distinguishable from each other by their colour. Personally, I think the colour of some of these doesn’t give the user a recognisable hint as to their purpose. Icon use can also have accessibility benefits: Making Content Usable for People with Cognitive and Learning Disabilities (w3.org)

2. We don’t have much guidance on what for/when to use alerts. Currently, the purpose of our ‘standard alert’ is to ‘alert users to important information’. This is very broad and leaves the user to decide what ‘important information’ is, which is likely to result in inconsistency.

3. If the information displayed in standard panels is about the page, it should be under the h1 and, otherwise, the information should be related enough to the page content to sit directly under another meaningful heading that’s already on the page.

Renaming ‘alerts’

What
Rename the ‘alerts’.

Some options could be:

• panel (information panel, success panel etc.)
• blockquote? (I don’t particularly like this one)

Welcoming thoughts on this, so feel free to reply with any other suggestions

Why
I don’t think that the name ‘alert’ truly speaks to the purpose of these components. This implies danger which isn’t always the consequence of missing the information.

The current names (e.g. alert indicating an error) are also not frontloaded and are longer than they could be.

Removing the ‘alert indicating an error’

What
Remove the ‘alert indicating an error’.
Explore adding a ‘warning panel’. For example, to house the “this action cannot be undone” text on a deletion page.

Why
I think this variant has a few flaws:

• it’s too similar to the components that make up the recover from validation errors GOV pattern
• if a user is unable to complete a task we should either use the above pattern or a there is a problem with the service page

[benjest85]

@OscarJacksonHO We should get our heads together on this as I've just looked at the Alert component.

[benjest85]

After discussing, we agreed that for "What"

1. Explore the value of adding these. The ONS example just includes one icon for success and no others so would need to look at what other icons would need adding, if any.
2. Agree this needs doing. It's worth trying to explore where these alerts are used, the context and use cases. Aim would be to try and make the use of these more explicit rather than generic "we need to tell the user something"
3. Tied to number 2

In addition to Oscar exploring the points above. I will look at the colour as part of the colour palette work I plan to do. Agree that colours like the "turquoise" in the success alert feel "off brand".

Renaming alerts also feels tied to the research above. I agree that this name doesn't suit the intention.