Help users toCompare information

Use the highlight component to show differences.

When to use this pattern

Use with repeat users who will become familiar.

How it works

Show both sets of information and highlight the differences.

Writing for this pattern

Explain the purpose of the highlight, especially if there are different use cases within a service. It takes users time to work out what the highlight is showing.

Accessibility

Use bold with the highlight.

Consider how the highlight interacts with other colour used on the page.

Use in moderation. Overuse reduces efficacy of the highlight and can cause unnecessary mental load for people using screen readers.

Research

We did usability testing with 3 external participants with access needs, with varying severities of vision loss. Participants used screen readers and zoom function whilst participating. High level findings included:

• the colour of the highlight was disorientating for some partially sighted users
• comparing highlighted information with a screen reader would be difficult without other applications
• participants preferred when a highlighted piece of information was also in bold format
• participants took time to understand the purpose of the highlight

Help us improve this pattern

This pattern needs improving. We need evidence about:

• any research findings

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.