Highlighting important information

[isobelseacombe]

I'm trying to categorise the things that we might need to flag or highlight within a case admin interface, collecting examples of work, thinking about how and when we should use status tags, and if we might need to design any additional components to highlight other types of information.

Current ways to flag important information:

Tags and badges are the main component that is used to highlight information on a screen.

There are issues with this as there could be multiple needs within a UI to highlight different information. It can produce a rainbow effect if too many colours are used and mean that users don't know where to focus their attention.

It can also be difficult if the same component (badge/tag/status/label) is used in different ways in the same product/service. For example: in a case management system, a red status tag could mean a task is overdue, and it could also be used elsewhere to warn of a serious consequence to an action

• Needs to be viewable at a glance
• Needs to stand out
• A summary of information needs to be easily understood by the user
• There should be a link or way to view more detailed information to support the summary view if not all information is viewable in the summary
• There should be a clear visual hierarchy that can highlight the most important information to the user
• Colour should be used as a supporting tool, but not as the only way to show the importance of information

What already exists/ similar published components or patterns:

Home office tags: #213
Status component: https://ons-design-system.netlify.app/components/status/
Badges: https://design-patterns.service.justice.gov.uk/components/badge/
GDS tag component: https://design-system.service.gov.uk/components/tag/
GitHub discussions on similar topics
ministryofjustice/moj-frontend#258
ministryofjustice/moj-frontend#280

[tomyems]

Closed #342, to merge in which is a topic on the same subject.