Highlighting information

[elliot-butler-ho]

What

Give a brief description of the style, component or pattern you want to propose.

A number of internal services across government (examples below) have implemented a highlight pattern to focus a user's attention to particular parts of data. The pattern is used to visually highlight text to differentiate it from other information on the screen.

The following use cases of the pattern have been identified so far:

• To highlight to users where data has changed - NHS cervical screening
• To highlight to users where data is different when comparing - Identity verification, Home Office
• To highlight to users where data matches when comparing - n'Delius records, MoJ
• To highlight to users matched data from a search request - Search service, Home Office

Why

The pattern has been well tested in multiple services and already exists on live services within Home Office and MoJ.
The task to compare data is common, particularly for internal case working / management services. The ability to visually highlight elements should save the user time to find what they are looking for, especially when there is a lot of content on the page, or comparing multiple sets of data at once - valuable for repeat users.

Anything else

Examples in existing services:
NHS cervical screening management - used to identify changes in medical records

MoJ - used to identity cases and merge them

(Proposed) mock up design to be used in Home Office identity verification service - used to identify differences in two data sets

Accessibility considerations

Even though we can call out the highlighted text for screen reader users, conscious that the visual colour may not be ideal for users who are partially sighted. Curious to hear any comments around this.

[samanthasaw]

Cervical screening management system (CSMS) research findings:

Scenario is where screening test results have come in but there's a duplicate for a patient

Date tested: 11 November 2021
"Really helpful having highlighted sections, eye is drawn to that's wrong, that's wrong, makes it nice and quick"
"My eyes are drawn to the highlighted sections"
"Really helpful to have the highlighted sections - draws your eye to what is wrong"
User thought the yellow was highlighting the error
User suggested highlighting 'correct' info in green
"That's the error it's picked up on" [the yellow highlight]

Scenario is an archive of historic data about a patient. A new set of data is created every time a patient has a change of details or has moved, and staff members would use it if there was an incident for example or they need to check where a patient was registered at the time etc.

Date tested: 2 March 2022
Findings:
"I assume it's the address (that's changed) because it's highlighted"
"Was easy to see because it is highlighted"
''Highlighting' usually indicates a change"
"It's now highlighted in orange what's changed, whereas last week there was no clear [idea] of what's changed"

[samanthasaw]

Here I've used a browser plugin (Colourblindly) for simulating colour vision deficiency. I'm not sure on the intent of the original designer but the underline of the highlight pattern is perceivable by all types of colour vision deficiency, I'm not sure if this was added to ensure users with colour vision deficiency would still notice a visual difference

[joanaaguia-moj]

Prepare a case for sentence - matching journey

We did some testing about adding a percentage of likelihood that the 2 cards are a match in which we got the following feedback:
“A bit pointless really, I don't need the marker  [the % score] as I work using the the yellow highlights, they  already provide me with the yes or no answer I need to make a decision or not.”

Conclusion: Although the % score was shown participants were still focused on the yellow highlights to give them guidance”

From user testing:
“I look for the highlighted things that are matched, that’s what I look at. The visual cue.”
“ From the yellow markings I can quickly see what is a strong possible match and what isnt”
“the highlighting in yellow are very helpful, im a visual person”

“The thing i like is it highlights the information that matches, could even make it more obvious”

Note: we had our service, and this feature tested by DAC for accessibility which passed with no concerns. The tag uses the element.

[cjforms]

As the users have pointed out, the visual cue of highlighting the areas that are different is a big help,

Having said that, these comparisons are all challenging for both eye-movements (large jumps between the data items that need to be compared) and short-term memory (the user has to find the highlighted content, and recall it while looking at the other item that may be a match.

I've bashed together a mockup to think about and chose the passport example as an illustration. Please pretend that everything lines up neatly as it would if I'd coded it rather than whacked about using cut-and-paste in a .png.

My assumptions:

• this is used by admin officers / caseworkers who will have at least some training on the objectives of the system
  (the points about eye movements and short-term memory also apply to services used by the general public, but they'd need more explanation about what's going on)
• I've ignored the fact that this image clearly doesn't belong to these data items as I'm assuming that's solely for illustrating this example
• I've also ignored the fact that some of the data items in the image do not currently appear in the text data items.

My aims are:

1. As far as possible, mimic the order of fields presented so that the various stimuli present the same fields in the same order. In this case, we've got an image and some extracted fields, The image is difficult to change but conveniently the fields are in an order specified by international agreement so we can go with that. In another example, I'd need to look at which of the stimuli has the hardest-to-reorder fields OR the most-familiar fields
2. If items / fields agree, only present them once. The computer knows they are the same, there is no work for the user to do
3. If items / fields disagree, show them one above the other. This reduces the eye-movement for comparison purposes to a short up/down one rather than a longer side-by-side jump.
4. (optional, but my suggestion) Remove horizontal rules between items so that the field that are from the computer are as near as possible to the image. This looks slightly less visually appealing, but it reduces extra visual stuff on the screen for the eye to process and jump across.
5. (optional, but my suggestion) Remove extra words 'scanned from' because a trained operator knows what the abbreviations mean
6. (another option, not illustrated) Remove all data items that are not in contention. This can be beneficial as there is less to look at, but also loses context so I don't recommend it
7. (another option, preferred but beyond my cut-and-paste skillz) - use a yellow underline as in the 2nd in-dispute data item, but only place it under the digit(s)/character(s) that are in dispute, to help the user identify the exact are that is in dispute

[elliot-butler-ho]

Thanks all for adding in research findings and further insights!

To summarise, the highlighted text has tested well with users, with positive feedback that it works well as a visual cue to draw attention to information.

Next steps will be to:

• review the accessibility side of the code and establish a recommended mark up
• review the shades of yellow to improve colour contrast for partially sighted users, particularly when used on a grey background, such as Home Office internal services.
• @devansXD and I will be getting in touch with Home Office design system team about the above and post updates here.

[samanthasaw]

Code from cervical screening implementation:

import React, { FC } from 'react';

/**
 * Compares two strings and highlights the differences between them.
 * Note that the order in which strings are passed is essential.
 * @param a the string to be compared
 * @param b the string to be compared against
 * @returns
 */
export const CompareStrings: FC<{ a: string; b: string }> = ({ a, b }) => (
  <span>
    {a.split('').map((value, index) =>
      value != b.charAt(index) ? (
        <span key={`highlight-${index}`} className="highlight">
          {value}
        </span>
      ) : (
        <span key={index}>{value}</span>
      )
    )}
  </span>
);

CSS

.highlight {
  background-color: #fff2d3;
  border-bottom: 3px solid #ffbf47;
}