Pages

Error pages

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

Open this example (Error page - Show GP appointments) in a new tab 
<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>Try loading GP appointments again.</p>


<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>


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


<div class="nhsuk-u-margin-top-1">
<a
href="#"
class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19"
>Go to appointments</a
>
</div>
</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>Try loading GP appointments again.</p>

    <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>

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

    <div class="nhsuk-u-margin-top-1">  
      <a href="#" class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19">Go to appointments</a>
    </div>

  </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 main heading (h1)
  • 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
  • use breadcrumbs or a standard 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"

You should try to get feedback from users on error pages. It's likely they will have important insights about common issues on your service that need to be fixed.

Writing headings

Use the main 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 main heading to tell them this. Start the main heading 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"
Open this example (Error page - Update NHS App) in a new tab 
<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>


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


<button
class="nhsuk-button nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3"
data-module="nhsuk-button"
type="submit"
>
Update the NHS App
</button>
</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>

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

    {{ button({
      text: "Update the NHS App",
      classes: "nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3"
    }) }}

  </div>
</div>

Descriptive headings

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

  • "We could not log you in"
  • "We could not show your confirmed prescriptions"
Open this example (Error page - Confirmed prescriptions) in a new tab 
<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 if you need help with a prescription.</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 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 class="nhsuk-u-margin-top-1">
<a
href="#"
class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19"
>Go to prescriptions</a
>
</div>
</div>
</div>


{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
{% 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 confirmed prescriptions</h1>

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

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

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

    <div class="nhsuk-u-margin-top-1">  
      <a href="#" class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19">Go to prescriptions</a>
    </div>

  </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
  • text link to navigate users back to a specific area of the app, for example, "Go to appointments"

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 complete their task through a different channel.

Remember that the NHS App is a healthcare service. Errors can delay access to clinical care, and users may be experiencing urgent health needs.

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.

Open this example (Error page - Could not show people you manage services for) in a new tab 
<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 class="nhsuk-u-margin-top-1">
<a
href="#"
class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19"
>Go to home</a
>
</div>
</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 class="nhsuk-u-margin-top-1">  
      <a href="#" class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-font-size-19">Go to home</a>
    </div>

  </div>
</div>

When a user is not logged in

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

Open this example (Error page - Check internet connection) in a new tab 
<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>


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


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

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

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

  </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 these 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

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.