Risk UI components - Badges

[jumpertrunks]

Background information

Do you think this component or pattern would be useful for other teams and services in MOJ?

Yes, for probation and prison teams needing to display risk information.

Name of product(s) this component or pattern relates to:

All HMPPS digital products and services that include risk information

What the product(s) do:

Alert users to a specific risk and concisely quantifies that risk.

Who the users are:

• Probation staff
• Prison staff (where the services overlap or individuals pass between them)
• 3rd party suppliers of services (for example, interventions providers)

What the user need is for this component/pattern:

• help users assess immediate risk (for example, before a face-to-face meeting with a new person on probation)
• make it easier for users to rapidly identify and understand risk information without navigating away from their immediate task
• reduce the likelihood of harm to staff, people on probation, vulnerable children and adults and the public generally.
• support third parties who provide services in their assessment of risk (for example, interventions providers receiving a new person on probation)

What already exists

Similar published components or patterns

• GDS tag component (https://design-system.service.gov.uk/components/tag/)
• Prisoner alerts in DPS (using the badge component)
• Delius ‘flags’ (non GDS)

GitHub discussions on similar topics

N/A

Have you tried using what already exists?

There is currently no single consistent HMPPS visual language for communicating risk in digital services.

When to use

Use this component/pattern to help users… 

• rapidly assess risk when picking up a new or unfamiliar case
• quickly absorb and interpret risk
• develop a picture of the individual and their risks and needs
• understand who an individual poses a risk to, when and in what circumstances
• share and reuse risk information in a standard way with consistent meaning

How to use

When using this component or pattern, what should be considered when it comes to:

Writing content

• Use acronyms or initialisms (for example, RSR) to keep the badge reasonably small. This is acceptable if the badge is displayed in a context where its meaning and purpose are clear. Probation practitioners generally recognise and use acronyms and initialisms rather than the full name of the risk tool.

making sure it’s accessible?

• Colour contrast of text meets AA standard
• Colour is not the only indicator for a level text is used too

implementing the code?

TBC

using it in context with other components and as part of a service?

Service user information header

Timeline (WIP) - this needs more research/design into how we provide more context

Badge expansion (like MAPPA)

Giving a full version of the acronym and a last updated date

This could be used:

In a side bar

In a document

when to use variations? (if applicable)

Small badge

Places where it's important to highlight risk but a compact component is needed e.g. Service user banner.

Large badge

In the content of a page or where a score needs to be shown as a focus.

Expanded badge

Where more context is needed.

Risk badges without score

Use to display the results of a risk assessment where the outcome is a level. For example Risk of Serious Harm (RoSH) where a level of low, medium, high or very high is assigned

Risk badges with score

Use to display the results of a risk assessment that has a numeric score. For example Risk of Serious Recidivism (RSR). Numeric scores will have a description such as low, medium, high and sometimes very high associated with them. Use the assigned colour ways to visualise the level or a score.

Things we don't know enough about

Use of a large number of badges on a screen and/or in components

There are a lot of tables used in HMPPS digital services and the growing use of badges in them needs to be researched against alternative ways of displaying the same information. Using a large number of badges of different kinds and/or colours might be confusing, whether they are in a table or in other components, or just placed together on the screen in a row, column, card or group.