Skip to main content

Do and Don't lists

Use Do and Don't lists to help users understand more easily what they should and shouldn't do.

Code and design

Open in new window
Copy
<div class="nhsuk-do-dont-list">
  <h3 class="nhsuk-do-dont-list__label">Do</h3>
  <ul class="nhsuk-list nhsuk-list--tick">
    <li>
      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </svg>
      cover blisters that are likely to burst with a soft plaster or dressing
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </svg>
      wash your hands before touching a burst blister
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </svg>
      allow the fluid in a burst blister to drain before covering it with a plaster or dressing
    </li>
  </ul>
</div>

<div class="nhsuk-do-dont-list">
  <h3 class="nhsuk-do-dont-list__label">Don&#39;t</h3>
  <ul class="nhsuk-list nhsuk-list--cross">
    <li>
      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
      </svg>
      do not burst a blister yourself
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
      </svg>
      do not peel the skin off a burst blister
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
      </svg>
      do not pick at the edges of the remaining skin
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"></path>
        <path d="M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"></path>
      </svg>
      do not wear the shoes or use the equipment that caused your blister until it heals
    </li>
  </ul>
</div>
Copy
{% from 'do-dont-list/macro.njk' import list %}

{{ list({
  "title": "Do",
  "type": "tick",
  "items": [
    {
      "item": "cover blisters that are likely to burst with a soft plaster or dressing"
    },
    {
      "item": "wash your hands before touching a burst blister"
    },
    {
      "item": "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

{{ list({
  "title": "Don't",
  "type": "cross",
  "items": [
    {
      "item": "burst a blister yourself"
    },
    {
      "item": "peel the skin off a burst blister"
    },
    {
      "item": "pick at the edges of the remaining skin"
    },
    {
      "item": "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

When to use Do and Don't lists

Use a Do and Don't list to give users clear and simple advice, for example about treating a problem themselves.

When not to use Do and Don't lists

If you only have 1 Do - or 1 Don't, consider using inset text or a warning callout instead.

How to use Do and Don't lists

Keep your points as brief as possible.

Dos normally come before Don'ts.

It is alright to just have Don'ts if there aren't any Dos.

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.

Research

Users recognised and understood the meaning of the ticks and crosses. They saw the green ticks as a positive "do" action and the red as a warning.

We've tested the Do and Don't lists in pages with lots of content. We aren't using them in forms or transactional content and haven't tested them there.

The Do and Don't lists stack on desktop and mobile, rather than sitting side by side on the page. We found that users read down the page, not across it. Also, when we tried the lists side by side, the number of characters in each line was too short which made reading difficult.

Accessibility

People with a visual disability may not be able to see the ticks and crosses. We use aria labels to hide them from screen reader users, so we don't confuse them.

People with a visual disability may rely on the words. With the Don't lists, we found that screen reader users need "do not" repeated at the beginning of every line. If we leave out "do not", there is a risk they will hear the command as a positive one, which could be dangerous. This could also apply to other user groups, like people with a learning disability or people who are very stressed. Users could also scroll down and miss the "Don't" heading. So we include "do not" at the start of every bullet point.

We don't say "do" at the start of every line in a Do list. People found this unnecessary and annoying.

Discuss

Discuss Do and Don't lists on GitHub

Get in touch

If you have a question:

Updated: January 2019