Do and don't list

[davidhunter08]

Use this issue to discuss the do and don't list in the NHS digital service manual

[markasrobinson]

We've had some interesting feedback from a couple of autistic users on the do and don't list.

Now we say "do not" at the start of each "don't" bullet, these users read the advice as a double negative (e.g. "don't do not do XYZ"). So they thought we were saying the opposite of what we were trying to say.

It was just a comment from 2 users, but perhaps now we're using "do not" in every instance, it's worth a discussion about how useful the "do" and "don't" headings actually are? Are they adding anything (apart from confusion for some people)?

cc @sarawilcox

[sarawilcox]

Thanks Mark. It might indicate a problem. I'm tempted to keep an eye on it and see if we see more users being confused by it.

[cjforms]

If you want to test something, consider:

• replacing the text 'Do' in white on blue with the tick icon
• replacing the text 'Don't' in white on blue with the cross icon.
  The text within each box stands alone - the blue part at the top functions primarily as a cue to introduce the box.

[sarawilcox]

Can anyone test this?
@bencullimore, one to bear in mind if redesign is doing any testing over coming weeks. Please see Mark's comment below.

[markasrobinson]

There's talk on #redesign channel about testing a new table component. Maybe we just need to think of a few things we need to test and bundle them together. Meds care cards may be another.

[Gerard-Blair]

Earlier this year was involved in promoting a new NHS website based service allowing people to order a repeat prescription online. Our prototype involved a hardcoded start page that borrowed the ticks and crosses / do & don't pattern - to spell out what the service could do and what it couldn't. The strong visual styling tested very well with users.
Unfortunately, turned out that we couldn't use a hardcoded page as the content would only 'slot' into the existing Pharmacy hub if it was a Wagtail page. So had to recreate page in Wagtail, but could only use bullet points instead of the ticks and crosses. So managed to bribe / threaten a Wagtail developer into allowing me to use custom headers for the do / don't pattern. Live page can be found here : https://www.nhs.uk/using-the-nhs/nhs-services/pharmacies/the-nhs-website-repeat-prescription-ordering-service/

[sarawilcox]

We've been trying out using the Do and Don't list component to tell people if they can and cannot get a coronavirus test. This is a similar usage to the one that Gerard mentions above. In user testing, it seems to help users understand if they should or should not apply for a test.

One user found it difficult to distinguish the Do and Don't lists when the headings were worded similarly: "You can get a test" compared to "You cannot get a test". So we changed the wording of the Don't list heading to make it stand out more from the Do heading - it now says: "Do not ask for an NHS test when..."

[cjforms]

I've consistently found that headings in reverse polarity (in this case, white text on a dark ground when the majority of the text is in the polarity of dark text on a light ground) work perfectly well as a graphic device on the page to signal new content, but frequently fail to convey the information in the text to the user when in actual use (as opposed to, when the page is read in general).

On top of that, in general I've consistently found that headings are read separately from the text that they signal. I describe a heading that must be read in context with the following text as a 'run-in heading'.

In this case, you have both reverse polarity and run-in headings - an unfortunate combination.

Strong recommendation:

• change the heading from run-in to repeated, with appropriate re-wording.

Example:
Heading: When not to ask for an NHS text
Text itself:
Do not ask for an NHS text when:
X you live with .... (etc)

Alternative recommendation:

• change the graphic so that the heading is NOT in reverse polarity. Use a different graphic device, such as a dark bar above the text, so signal that the heading text is strongly associated with the list hat follows.

[sarawilcox]

Thanks @cjforms. I'll feed this back.

[bencullimore]

@cjforms @sarawilcox it's interesting how the component tests/tested well on long-form content; pages of information on conditions, symptoms, treatments and medicines - the context which it was originally tested.

Recent issues have been around its use in service context; get a COVID-19 test, order a repeat prescription.

Feels like it might need splitting in two - or the use in service/transactional-based services needs exporting further?

[cjforms]

Oh, I'm sure it did!

It works well for the purpose of drawing attention to specific chunks of content in a (possibly long) page.

My concern is that use of a reverse polarity/run-in heading can reduce the ability of people to take in content from the heading itself, which is a more subtle point.

Did you compare this style of heading in the box to any other type of heading for the box, or any other type of graphic device to set this content off from the page? And when you tested it previously, were you using run-in headings as well as reverse polarity?

(And apologies if I confused the issue with my much earlier comment about 'the text at the top of each box stands alone' - I was NOT thinking about run-in headings when I wrote that. I was thinking solely about the DO and DON'T list component as here: https://service-manual.nhs.uk/design-system/components/do-and-dont-lists, and I was referring to the words DO and DON'T in the blue reverse polarity boxes that set off the the rest of the component, not to any text within the boxes)

[davidhunter08]

An issue (a thread of comments) somewhat related to the do and don't lists: #159 (comment)

[cjforms]

Thanks for linking the thread.

I had a look through it to see whether my suspicions about reverse polarity /run-in headings might be confirmed by the discussion there. And the answer is: not really, but also there aren't many of them in the discussion.

There are some run-in headings that are NOT reverse polarity but are in the same polarity, such as this one:

and they seem to be OK, which is what I would expect.

[davidhunter08]

Example from NHS profiles:

[sarawilcox]

I was confused by this. I wondered what the tick was signifying. I overlooked the heading in white on blue and my first thought was that it was about ticking for an appointment at 9am.

[jasonprice2]

There's been some discussion recently on NHS.UK slack about whether we can begin a 'don't' bullet point with something other than 'do not'.

Reasons for needing to use different wording include:

• 'do not' feels too strong for the advice being offered
• 'do not' does not work grammatically with the advice being offered

The question marks were around:

• do users still understand the advice when the heading is 'don't' but the bullet point begins with something other than 'do not'?
• are there any accessibility issues with mixing up the heading and bullet points?

One recent example of trying something new is in a small set of mental health symptoms content, which went through several rounds of user testing back in 2019:

You'll see that some of the 'don't' advice begins with 'try not to...'.

In testing, we found that users understood that this was a list of 'things not to do' and it was not jarring. For example, nobody read it as 'don't try not to...' with a double negative, which is consistent with the 'do not' points.

We tested this content with users experiencing a wide range of mental health problems, but it would be good to know if there is a wider issue we need to be aware of. My understanding is that as long as the bullet points make sense when read in isolation, it's not an accessibility issue (for screen readers for example).

[cjforms]

Years ago, I tested a bazillion forms for HMRC that used white-on-dark headings (reverse polarity to pages set with dark text on a light background) to set off different areas of the form, and I observed that the majority of users (maybe nearly all) noticed the headings as barriers on the page but did NOT notice the content in the headings. As an estimate, I'd say maybe over 90% of users failed to absorb any content from the heading.

I've seen the same effect with same-polarity headings although not quite as convincingly. In the case of same-polarity headings, I'd estimate it at more like 60% - enough to convince me that whatever the style of the heading, it is unsafe to assume that the user will absorb content from the heading when using the document.

(An aside: you might say: well why have headings them? The answer to that is that when people are finding the correct spot in a document or form, deciding how much attention to give it, or working out what the document is about then the opposite happens: they give most of their attention to the headings and somewhat or totally ignore the text).

This is the underlying reason why the 'Don't' list component says that each bullet point must have the words 'do not' at the front of it. My view is that this rule is NOT for consistency with the heading, it's because in testing, the researchers observed exactly the effect that I have reported: users were failing to pick up the 'don't' from the heading and were reading the text (at that time, without the 'do nots') as if it says things to do.

So what does that mean for your query? In my view, the list works much better when the bullets starts with words that are appropriate and relevant to the specific instruction - just as in the example.

If you find that colleagues who are reviewing the list (which is very different to using it) find it disconcerting that there's a mix of introductory words, in this case 'do not' and 'try not to', then there are two ways to fix it.

1. Change the word 'Don't' in the heading to "Things not to do"
   or
2. Insert two sub-headings within the list that break up the list into two chunks. In this case:

Things you must not do

• do not [xxx]
• do not [xxx]
• do not [ ]
  Things you must try not to do
• try not to [ ]
• try not to [ ]

But personally, I'd opt for the simplest solution which is: Leave it exactly like it is in your example UNTIL you have compelling user research to tell you any different.

You also specifically asked about accessibility issues. I think there are three sorts of accessibility issues to think about here.

A) People who use screen readers
I've heard that people who use screen readers may prefer to access the list of headings as a short-cut into the text, and in fact not even speed-hear the text until they choose to get to it. I'd like to have this point confirmed or disagreed with by someone with more extensive experience of testing with people who use screenreaders than I have, or by anyone on here who uses a screenreader themselves.

B) People with low literacy
A characteristic of people with low literacy is that they do not skim and scan like confident readers. Confident readers use the headings to help them skim and scan correctly.
People with low literacy do a different behaviour: 'skipping' (or you might call it, 'panic skipping'. This is a response to text that is too difficult and is overwhelming them. They leave the text, and rejoin it at a random point further down which may or may not be a heading.

The power of the NHS design system 'Don't' lists is that they look, and are, simple and important. I haven't got research evidence to back what I'm saying next, it's just my opinion, but my hypothesis is that this may be a comforting signal for people with low literacy and may mean that they alight on a 'Don't' list after a panic skip. My hypothesis is also that having words that are clear, appropriate and relevant for each bullet point will help people with low literacy.

We also know that people with low literacy find contractions such as 'don't' harder to read, which is why the pattern requires the words to be spelled out as 'do not'.

C) People with attentional disorders, or who are reading under conditions of stress that are giving them temporary attentional problems
People with temporary or permanent attentional problems are especially prone to the problem I've already noted: failing to absorb content from headings. All the above applies to them.

[sarawilcox]

Some feedback re the content on the Do and Don't list page: "the guidance seems to be contradictory: Treat the heading as a lead-in and the items under the heading as part of 1 long sentence. That's not true for the don't do nots."

Treat the heading as a lead-in and the items under the heading as part of 1 long sentence. Start each bullet point lower case. With Dos, just write the action. With Don'ts, include "do not" at the beginning of each bullet point.

[sarawilcox]

An example of what can happen if you miss out "do not" from the bulleted list and Google doesn't include the Do not heading.

https://pbs.twimg.com/media/FB1TS0kVIAAVWFZ.jpg

[cjforms]

Great example

[sarawilcox]

We know that some teams are experimenting with this component on start pages as a way of helping people understand eligibility. But it can be difficult to word eligibility criteria with a "do not" at the start of each bullet point in the Don't list.

I think we'd recommend that you start with standard headings like "Who can use this service" and "Who cannot use this service" first and only resort to the Do and Don't pattern if you have evidence that ordinary text and headings isn't working.

[sarawilcox]

We’ve received some feedback about the Do and Don’t lists from a user who was confused by the Don’t heading and bullet points that start “do not”. She read it as “Don’t do not”. She said she thought it would be clearer if each bullet point started with a capital letter and ended with a full stop.

[cjforms]

Ooh, one of my favourite topics.

A fine example of "Listen to the problem that the user has, but be careful of adopting their proposed solution".

I'm not saying 'reject the idea'. But I am saying that:

• it's not the only way of solving this problem
• it may or may not solve the problem.

Another thing to do that might solve the problem is to change the 'Don't' at the top of the list to 'Do not'. In fact, this user's comment made me notice that the heading and the list are not parallel, but it's (nearly always) better to be parallel (also known as 'consistent').

Another thing to do that might solve the problem is to consider whether 'Do' and 'Don't' are actually the right headings anyway in every context. Earlier in this thread I suggested 'Things to do' 'Things not to do' - not saying that's great content design, but it's just a starter suggestion for you to say 'no, yuk' and maybe provoke some other ideas.

I'm also not by any means against trying the user's suggestion. Punctuation can be your friend. I'm merely musing aloud.

[sarawilcox]

Just recording a discussion in the NHS.UK team today. We think it's a good idea to avoid 2 sets of Dos and Don'ts on 1 page. Consider making one of them into a bullet list instead. (In this case, we will make the shorter list a bullet list.)

[michelleparfitt]

We've been using this component within a series of prototypes to help communicate to people what is and isn't in their GP health record.

Throughout all 3 rounds of testing we have received positive feedback from the majority of participants. They liked it because the ticks and crosses clearly visually indicated what they could and couldn't see in their GP record. The visual design components were preferable because they were easy to notice, easily scannable and reduced overwhelm on a page which otherwise was perceived (by some) to have a lot of text.

[sarawilcox]

Thanks @michelleparfitt. Interestingly I see that in the latest version the Do and Don't list is broken up by another component.

[sarawilcox]

We've had 2 queries from the public in the last week, asking why we say "do not" in the don't list but not "do" in the do list.

[cjforms]

I've always wondered about that, too.

[SophieMcCulloch]

Do & Don't page usability testing for Contact Us.

We testing this with 6 participants in February 2024 as part of testing the wider journey for the form.

The design of this page was proposed to help users to be directed to the right place and to help them to understand the purpose of the page (that it is to contact the NHS website team).

From looking at the information in the “do and don’t’ boxes, participants understood what type information can and cannot be submitted through the form, saying that it wasn’t for any personal details, confidential information or to seek medical assistance. 

One participant thought the ‘do not’ box was referring to GDPR in the context of confidentiality of leaving personal information. One participant queried the sentence structure in the ‘do not’ box however this is a standard structure.

We also did click testing with this page, a summary of this is here: #169 (comment)

[Grooben]

An example of what can happen if you miss out "do not" from the bulleted list and Google doesn't include the Do not heading.

https://pbs.twimg.com/media/FB1TS0kVIAAVWFZ.jpg

Having opened a ticket earlier this month on the "why say Do not in the Do not section" problem - I've been directed here, and this was incredibly insightful!