Explore use of icons or other visual indicators for notification banners

[christopherthomasdesign]

What

Do design exploration to explore feasibility of using icons or other indicators (e.g. content) in notification banners.

Why

Several working group members suggested using icons because colour is the only visual difference between the notification banner variants. Whilst not a WCAG fail, it could make it harder for users who can't perceive colour easily to see the difference between the banners.

Whether we use icons or not, the accessibility review highlighted that we should try and apply some consistency to how different types of banner are announced to screen readers.

Who needs to know about this

Charlotte, Chris

Further detail

• Especially worth looking into how this looks on smaller screens (around 320px) – icons could take up a lot of space here and make banners unnecessarily tall
• We may decide just to use content. Like how all error summaries say 'there is a problem' for the h2. Challenge might be whether we can come up with something generic enough to work across different use cases. If we use icons as well as this content, worth considering whether it should be visible or visually hidden.

Done when

• Mock up some example pages with different notification banners with icons (particularly to test how they look on smaller screens)
• Share mockups with the team for discussion
• Decide if using icons is a sensible approach
• Create content guidance/patterns to make sure that notification banners of the same kind are read out in a consistent way by screen readers

[CharlotteDowns]

Joe Horton from the Home Office gave some further context as to why they removed icons from their old design system on UK Government Digital slack.

Amongst many other factors, the key decision to remove them from our new design system (design.homeoffice.gov.uk) was that we found they lacked consistency and were not being adopted across our internal services as we expected them to be. Happy to talk more about the decision and what we’re are doing now to fix those problems 👋

[CharlotteDowns]

Show and tell playback

The icon development and research was presented at the Design System show and tell on Tuesday 01 September.

Icon and content design are both being considered as ways to ensure the component does not rely on colour alone to be understood.

Icon review

Icons have been reviewed and retired across departments for quite some time. The main reasons for doing so:

• inconsistent use and design.
• screen space required on mobile view (particularly with longer notification messages).
• users can take different meaning from the same icon.
• the inclusion/exclusion of icons has had little to no effect on the use of the components tested with.

Actions

To move forward with using content as a secondary indicator there are the following actions:

• Explore types of notifications across interfaces and services.
• Chat with a content designer to see if there is a word than can be used across all notifications of a specific type.
• Chat with a content designer to see how we can help users make their language consistent across notifications if we cannot find a term or word to use more globally.
• Find more information about the exclusion of icons in the move to GOV.UK Design System from GOV.UK Elements.

[CharlotteDowns]

From the Alerts discussion and other resources, I have compiled a list of use cases.

The use cases have been categorized according to the assumed confidence of adoption and ease of use. This is still very much a work in progress document so any feedback would be greatly appreciated.

We have come to a decision that we will look at the use of content over icons for the prototypes that we will be sharing with the GDS accessibility clinic on 10th September. If the clinic raises any issues about a content approach we will look again at using icons in this context. For now, we will not be taking the use of icons further.

[CharlotteDowns]

Notification banner and icon summary

We visited the use of icons as part of the development of the Notification banner.

Aim

To enable Notification banners of the same kind to be read out in a consistent way by screen readers.

Decision

We made the decision to use a piece of content e.g. 'Important' within the h2 component notification-banner-title. Labeling the component makes it clear to all users what type of notification information is going to be held within the main part of the banner. The approach was tested at the accessibility clinic with assistive technologies.

In our examples, we use 'Important', 'Success', and 'Error' to label each of the three colour choices for the component. Depending on the use case for the banner, this label can be changed. We suggest using and styling these labels consistently for the same type of banner across your service to meet WCAG 2.1 Level AA.

Examples

[adamsilver]

@CharlotteDowns will the error summary be updated to use the error banner?

[CharlotteDowns]

@adamsilver we are leaving the Error Summary component as it is for the moment in terms of design. We want to be more confident about the distinction between the use cases of the 'red' Notification Banner component and the Error Summary component before we make any further changes. This distinction we won't be able to fully understand until we release the Notification Banner component and observe how it is used.

We have another issue where we have given more context on what the Notification Banner does or does not replace.