Inset text

[davidhunter08]

Use this issue to discuss inset text in the NHS digital service manual

[mcheung-nhs]

@sarawilcox
Do we need some guidance about the use of headings within inset text?
For example, on the Paracetamol for children page, we have some inset text for "Recommended reading"

The markup for this would be the hidden text "Information" followed by the heading level 3 (in this case) as separate entities, which may not make sense to so some screen reader users. I'm not sure if the inset text component was designed to have headings in them.

[sarawilcox]

Thanks @mcheung-nhs. What would you recommend?

@davidhunter08, do you have a view?

I wonder if we can consider this ticket alongside the one about components and headings.

[sarawilcox]

Another couple of examples:

[sarawilcox]

@markasrobinson For info.

[markasrobinson]

We use headings in inset text a fair bit across the site - generally to highlight somethign that is more of an "aside". We use headings because otherwise this content would be seen as part of the preceding heading, which wouldn't be right

[mcheung-nhs]

In the example above - "More information about self-isolation" - it would make sense not to have the hidden text "Information". Maybe we need a rule with the component whereby if the component starts with a heading, then the hidden text is not output in the markup. If there is not heading, then the hidden text is there.

[sarawilcox]

Like with warning callouts. See the section on accessibility and headings: https://service-manual.nhs.uk/design-system/components/warning-callout

[sarawilcox]

After a meeting with Alistair Duggin last week and a follow up meeting today, we've decided:

1. to explore options to make sure we're not confusing users. Options include:

• rewording the content without headings
• taking out the hidden word "information" if there's a heading (as we do with the word "important" in warning callouts)

2. to test this issue, alongside the issue about components and headings, to find out whether it causes problems for users

@KarinMochan, copying you in so you have sight of this issue.

[sarawilcox]

Here's an example on the paracetamol for adults page. Like the Recommended reading example above but without a heading. In 2 paras - do we need 2 paras?

This page might be a good one to test for components and headings too. It has multiple components with some text between them and headings.

[sarawilcox]

One of several issues that needs prototyping and testing.

[erikaremyr]

When redesigning the heart age tool (HAT), we've been experimenting with using red/amber/green to help indicate relative "severity" of certain results, e.g. total cholesterol:

• less than 5 = green
• 5-7.5 = amber
• more than 7.5 = red).

We've brought in graphs (existing ones like BMI and blood pressure + designed new ones for cholesterol and heart age) and tied the colours of those graphs with the colour of the inset text left border.

Before this, we tested a version where the whole card had a red/amber/green left border. This detail seemed to go unnoticed in usability testing, which led to redesigning it as inset text. We have not yet tested the latest version as design work is now on hold for HAT.

Previous version using coloured border on entire card

Latest version using coloured inset text

[mcheung-nhs]

@erikaremyr - it may be worth bearing in mind users with colour vision deficiency and use of colour when doing any further testing.

[erikaremyr]

@mcheung-nhs thanks! This is definitely top of mind — we're attempting to use colour as an additional visual means to convey information along with the elements of the graphs that do not require you to be able to distinguish colours (e.g. labels and relative position), as well as the copy itself.

[MaxineClayman]

Working on Wayfinder (enhanced appointment viewing/ secondary care appointments) in the NHS App we needed to draw users' attention to content around what to do if a referral or appointment is missing or incorrect.

We used inset text at the top of the page and in testing found all participants ignored it. Even when prompted to go to the top of the page participants then went to the icons at the top of the app header and completely missed it.

Has anyone else encountered inset having the opposite effect to that intended? It seems to have created a blindspot. And when asked participants said they assumed because it was in inset text the content would be generic/ unimportant so they just skipped/missed it.

[markasrobinson]

@MaxineClayman would be interesting to know if this could be because of its use as the first thing on the page and there not being any "standard" text from which this line is being distinguished. On NHS.UK, we would typically use an inset at the end of a section or in the middle of text, so it stands out more from the surrounding content.

[MaxineClayman]

Thanks @markasrobinson That is interesting. The reason we put it at the top was because there's a lot of content on the rest of the page and there was concern it was a clinical risk that users may not scroll down and see it. And we couldn't use any kind of care card/ warning call out as it went against the service manual guidelines for this messaging.

But even when they were directed to read what was at the top of the page they still totally ignored it and went to the NHS logo/ home icon. And said they couldn't find any info on what to do if something was missing.

We ended up using a jump off with the information on a new page. All users easily found the info they needed and subsequently understood what they needed to do.

Also @JulieCloss I noticed the account team has used inset test in the same way on some of the NHS App help and support pages so I wonder if the same thing is happening here too? https://www.nhs.uk/nhs-app/about-the-nhs-app/

[jessmeliahill]

When redesigning the Check your blood pressure reading tool we included a red inset text, we followed a similar style as we did in the HAT experimentation.

In the case below, we have two 'very high' blood pressure readings. The left is if the user takes their BP at home, so are surfaced a care card about immediate action they need to take. However, in the right example we have the same reading but the user has had their reading taken at a clinic or pharmacy. In the latter, we felt the use of the care card wasn't right, but still wanted to deliver the same level of urgency with the red inset text bar.

It's worth noting that since the BP tool contains the use of a graph, the tool has gone through user testing with those who are colourblind and those who are low health and digital literacy skills. As with HAT, the red inset text detail seemed to go unnoticed with users but did convey that in both instances they felt that the screen felt urgent or that it was a warning.

[sarawilcox]

The red and amber bars in the examples above (smoking, cholesterol etc) have been used in the heart age tool UX+ redesign. They'll be included in the next design iteration of the tool that should be going out later this year. In testing, no user mentioned the red bar, either positively or negatively.

[Ahnji1]

A coloured inset text bar that matches the bar chart is used on the CMBI result page. During user testing, users got lost between the chart and the result summary ("the result is in the -- range"). One of the problems was unclear language ("the result is above/below healthy weight"), but to improve UX, we decided to use a coloured inset text style to ensure users' eyes flow from the top (result summary) to the chart. This also adds an additional connection to the chart, helping users interpret the result more easily.