Pages

Error pages

Use error pages to tell users there is an unexpected problem. Explain what has happened and what they can do next.

HTML
Nunjucks

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      There is a problem showing your test results
    </h1>

    <p>This may be a temporary problem.</p>

    <button
      class="nhsuk-button nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3"
      data-module="nhsuk-button"
      type="submit"
    >
      Try again
    </button>

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>
      Use <a href="https://111.nhs.uk/">111 online</a> or
      <a href="tel: 111">call 111</a>.
    </p>
  </div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">There is a problem showing your test results</h1>

    <p>This may be a temporary problem.</p>

    {{ button({
      text: 'Try again',
      classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3'
    }) }}

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>Use <a href="https://111.nhs.uk/">111 online</a> or <a href="tel: 111">call 111</a>.</p>

  </div>
</div>

When to use

Use an error page when:

there is an unexpected problem
users cannot access the service

Log all errors and fix them as quickly as possible.

Consider closing the service an using a service unavailable page if the problem happens persistently and for a long time.

When not to use

Do not use this pattern if:

you can adapt GOV.UK patterns for page not found or service unavailable
a user makes a mistake completing a form – instead, follow the NHS service manual guidance for error messages and errors summaries
a user cannot continue for an expected reason, for example because they are not eligible – instead, check our GitHub discussion on unhappy path pages

How to structure an error page

1. Main heading

Start the main heading with "There is a problem" followed by a description of the service or feature that has gone wrong.

2. Main body text

Use the main body text to tell users how to resolve the problem, or to give more details. Keep the text concise.

3. Button

Use a secondary button for an action that may help to resolve the problem. For example, this could include:

"Try again"
"Log out"
"Open device settings"

The button should come straight after the related body text.

Letting users try again

Include a secondary button with the text "Try again" on error pages when:

a user has attempted an action (such as starting a service)
there is a temporary problem
it's likely the problem will be resolved immediately if they retry the failed action

Do not include a "Try again" button if your data shows it's unlikely to fix the problem immediately. Instead, you can include the words "Try again later" in the body text of the page, if the problem may be fixed at a later time.

Users should only be able to select a "Try again" button once. It should either:

successfully take the action the user originally intended
show a follow-on error page if the action still fails, explaining that there is still a problem

On the follow-on page, use the heading: “There is still a problem [describe what was supposed to happen]”. The page should tell users about other ways they can access the service, either in the app or outside of it.

Open this example in a new tab

HTML
Nunjucks

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      There is still a problem showing your test results
    </h1>

    <p>Try again later or contact your GP surgery directly.</p>

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>
      Use <a href="https://111.nhs.uk/">111 online</a> or
      <a href="tel: 111">call 111</a>.
    </p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>
      Make a note of the error code <strong>ze4353</strong> and then
      <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/"
        >contact the NHS App team</a
      >.
    </p>
  </div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">There is still a problem showing your test results</h1>

    <p>Try again later or contact your GP surgery directly.</p>

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>Use <a href="https://111.nhs.uk/">111 online</a> or <a href="tel: 111">call 111</a>.</p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>Make a note of the error code <strong>ze4353</strong> and then <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/">contact the NHS App team</a>.</p>

  </div>
</div>

4. Giving other options

Always tell users how to complete their task through a different channel. The NHS App is a healthcare service. Errors can delay access to clinical care, and users may be experiencing urgent health needs.

Sometimes the alternative option may be for users to contact their GP surgery directly.

For links to other NHS App services, use a secondary card link.

Open this example in a new tab

HTML
Nunjucks

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      There is still a problem showing your GP appointments
    </h1>

    <p>
      Contact your GP surgery directly if you need to book or change an
      appointment now.
    </p>

    <div class="nhsapp-card nhsapp-card--secondary">
      <div class="nhsapp-card__container">
        <div class="nhsapp-card__content">
          <a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
            Ask about a health problem
          </a>
          <div class="nhsapp-card__below">
            <p class="nhsapp-card__description">Provided using eConsult</p>
          </div>
        </div>

        <svg
          class="nhsapp-icon nhsapp-icon--chevron-right"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
          focusable="false"
          height="2rem"
          width="2rem"
          viewBox="0 0 24 24"
        >
          <path
            d="M8.82 19.11a.97.97 0 0 1-.72-.31.996.996 0 0 1 .03-1.41l5.61-5.38-5.6-5.25c-.4-.38-.42-1.01-.05-1.41.38-.4 1.01-.42 1.41-.05l6.37 5.97c.2.19.31.45.32.72s-.11.54-.31.73l-6.37 6.11c-.19.19-.44.28-.69.28Z"
          />
        </svg>
      </div>
    </div>

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>
      Use <a href="https://111.nhs.uk/">111 online</a> or
      <a href="tel: 111">call 111</a>.
    </p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>
      Make a note of the error code <strong>4k4353</strong> and then
      <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/"
        >contact the NHS App team</a
      >.
    </p>
  </div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">There is still a problem showing your GP appointments</h1>

    <p>Contact your GP surgery directly if you need to book or change an appointment now.</p>

    {% from 'nhsapp/components/card/macro.njk' import nhsappCard %}

    {{ nhsappCard({
      title: 'Ask about a health problem',
      href: '#',
      description: 'Provided using eConsult',
      classes: 'nhsapp-card--secondary'
    }) }}

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>Use <a href="https://111.nhs.uk/">111 online</a> or <a href="tel: 111">call 111</a>.</p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>Make a note of the error code <strong>4k4353</strong> and then <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/">contact the NHS App team</a>.</p>

  </div>
</div>

5. Signposting to urgent medical help

Always include signposting to urgent medical help on error pages.

Use the heading "For urgent medical advice" followed by the text "Use 111 online or call 111."

6. Signposting to technical support

If the Service Management Team can help users in the scenario, use the heading "For technical support" followed by the text "Make a note of the error code xxxxx and then contact the NHS App team". Insert a relevant error code where the bold text is.

If a user is logged out

Do not include the app header or footer if the user is logged out.

Open this example in a new tab

HTML
Nunjucks

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">There is a problem logging in</h1>

    <p>This may be a temporary problem. Go back and try logging in again.</p>

    <button
      class="nhsuk-button nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3"
      data-module="nhsuk-button"
      type="submit"
    >
      Go back to login
    </button>

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>
      Use <a href="https://111.nhs.uk/">111 online</a> or
      <a href="tel: 111">call 111</a>.
    </p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>
      Make a note of the error code <strong>3s4353</strong> and then
      <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/"
        >contact the NHS App team</a
      >.
    </p>
  </div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">There is a problem logging in</h1>

    <p>This may be a temporary problem. Go back and try logging in again.</p>

    {{ button({
      text: 'Go back to login',
      classes: 'nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3'
    }) }}

    <h2 class="nhsuk-heading-m">For urgent medical advice</h2>

    <p>Use <a href="https://111.nhs.uk/">111 online</a> or <a href="tel: 111">call 111</a>.</p>

    <h2 class="nhsuk-heading-m">For technical support</h2>

    <p>Make a note of the error code <strong>3s4353</strong> and then <a href="https://www.nhs.uk/contact-us/nhs-app-contact-us/">contact the NHS App team</a>.</p>

  </div>
</div>

How not to use

The page should not:

blame the user
include breadcrumbs or a back link at the top
display vague terms or jargon like "500", "504", "bad request" or "we are experiencing technical difficulties"
use red text to warn people
use exclamation marks or informal language like "oops"

Avoid giving users too many different links to choose from as a next step. This increases cognitive load, and is problematic for users experiencing high levels of stress or anxiety.

Research

Research has shown that users may:

go straight to buttons and links without fully reading error pages
not notice error codes
be unsure about whether the problem was their fault or not

We should account for these challenges in our designs and continue to research and iterate the pattern.

Next steps

We want to learn more about:

"Try again" buttons on errors, and how we can best help users when these fail to solve the problem
how this guidance could evolve into separate pages covering specific errors

We are in the process of updating the NHS App contact form. This update will remove the need for users to note down error codes on error pages, as these codes will be pre-populated into the form.

Design history

Find out more about how we arrived at this pattern in our design history post on error page guidance.

Help improve this pattern

The NHS App design system team would like to hear:

how you have used this pattern in your service
any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Error pages' discussion on GitHub.

Error pages

When to use

When not to use

How to structure an error page

1. Main heading

2. Main body text

3. Button

Letting users try again

4. Giving other options

5. Signposting to urgent medical help

6. Signposting to technical support

If a user is logged out

How not to use

Research

Next steps

Design history

Help improve this pattern

Get help

Help improve this page