Pages

Error pages

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

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      We could not show your GP appointments
    </h1>

<p>You can try loading GP appointments again.</p>

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

<h2 class="nhsuk-heading-m">If the problem continues</h2>

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

<p> For urgent medical advice, 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">We could not show your GP appointments</h1>

    <p>You can try loading GP appointments again.</p>

    {{ button({
      text: "Try again",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

    <h2 class="nhsuk-heading-m">If the problem continues</h2>

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

    <p>For urgent medical advice, 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:

  • something has gone wrong
  • users cannot continue to the next page

When not to use

Do not use this type of error page if:

How to use

The content for each type of error will vary depending on the circumstances.

The page should:

  • be clear and concise
  • summarise the problem, or give an instruction, in the h1 heading
  • tell the user how to access the service another way, or use an alternative
  • tell the user if there's something they can do to fix the problem

This page should not:

  • blame the user
  • include breadcrumbs
  • display vague terms of 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"

Writing headings

Use the main h1 heading to clearly explain the problem or a solution.

Some error headings work better as instructions and some work better as descriptions.

Headings should be grammatically correct. Avoid abbreviated headings like "Prescriptions not available" as they can make it harder for users to understand what's caused the problem.

Instructive headings

If there’s a direct action the user can take to fix the problem, use the h1 to tell them this. Start the h1 with the verb that indicates the action they need to take. For example:

  • "Update the NHS App to continue"
  • "Check you’re registered with a GP in England"
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Update the NHS App to continue</h1>

<p>You will not be able to use it until you do.</p>

<button class="nhsuk-button nhsapp-button--secondary nhsapp-button" data-module="nhsuk-button" type="submit" > Update the NHS App </button>

<p> For urgent medical advice, 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">Update the NHS App to continue</h1>

    <p>You will not be able to use it until you do.</p>

    {{ button({
      text: "Update the NHS App",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

    <p>For urgent medical advice, use <a href="https://111.nhs.uk/">111 online</a> or <a href="tel: 111">call 111</a>.</p>

  </div>
</div>

Descriptive headings

Descriptive headings often work better for a problem that lies with the NHS App. Starting the h1 with "we" can help make this clear. For example:

  • "We could not log you in"
  • "We could not show your confirmed prescriptions"
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      We could not show your confirmed prescriptions
    </h1>

<p> Contact your GP or pharmacy directly if you need help with a prescription now. </p>

<h2 class="nhsuk-heading-m">Other options in the NHS App</h2>

<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"> Request an emergency repeat prescription using 111 online </a> </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> </div> </div>


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

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

    <h1 class="nhsuk-u-margin-bottom-5">We could not show your confirmed prescriptions</h1>

    <p>Contact your GP or pharmacy directly if you need help with a prescription now.</p>

    <h2 class="nhsuk-heading-m">Other options in the NHS App</h2>

    {{ nhsappCard({
      title: 'Request an emergency repeat prescription using 111 online',
      href: '#',
      classes: 'nhsapp-card--secondary'
    }) }}

  </div>
</div>

The components we use for calls to action and links depend on the context.

Use a:

  • secondary button to give a call to action that may help fix the problem
  • secondary card link under a h2 of "Other options in the NHS App" for links to services in the NHS App

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.

Helping users get care another way

Always tell users how they can access the service through an alternative channel to complete their task.

Remember that the NHS App is a healthcare application. Errors can delay access to clinical care, and users may be experiencing urgent health needs. Error pages must clearly and promptly signpost users to alternative healthcare services, to reduce the risk of harm from delays.

Talk to your service’s clinical lead for advice when you create or update an error page.

Letting users report a technical problem

Signpost users to contact the NHS App team if:

  • the error is being tracked by the service management team
  • it's a technical problem

Use the h2 "If the problem continues" and include an error code.

Speak to the service management team for advice when you create or update an error page.

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      We could not show details of people you manage services for
    </h1>

<p> Try again later, or contact the GP surgery of the person whose services you were trying to access. </p>

<h2 class="nhsuk-heading-m">If the problem continues</h2>

<p> Make a note of the error code <strong>3ezxja</strong> and then <a href="#">contact the NHS App team</a>. </p> </div> </div>


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

    <h1 class="nhsuk-u-margin-bottom-5">We could not show details of people you manage services for</h1>

    <p>Try again later, or contact the GP surgery of the person whose services you were trying to access.</p>

    <h2 class="nhsuk-heading-m">If the problem continues</h2>

    <p>Make a note of the error code <strong>3ezxja</strong> and then <a href="#">contact the NHS App team</a>.</p>

  </div>
</div>

When a user is not logged in

The top and bottom navigation are not visible because the user is not logged in.

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Check your internet connection</h1>

<p>Try using wifi or move to a place with better internet connection.</p>

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

<p> If you still cannot connect to the internet and need urgent medical advice, <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">Check your internet connection</h1>

    <p>Try using wifi or move to a place with better internet connection.</p>

    {{ button({
      text: "Try again",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

    <p>If you still cannot connect to the internet and need urgent medical advice, <a href="tel: 111">call 111</a>.</p>

  </div>
</div>

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 they fail to solve the problem
  • how we can avoid users needing to manually input error codes, for example by pre-populating these codes on our contact form
  • how this guidance could evolve into separate pages covering specific errors, when we have enough evidence to do this

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can:

You can also share feedback with us on Slack.