Pages

Error pages

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

Open this example (Error page - Test results) in a new tab 
<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>Try logging out of the NHS App and logging in again.</p>


<button
class="nhsuk-button nhsuk-button--secondary nhsapp-button nhsuk-u-margin-top-3"
data-module="nhsuk-button"
type="submit"
>
Log out
</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>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 a problem showing your test results</h1>

    <p>Try logging out of the NHS App and logging in again.</p>

    {{ button({
      text: 'Log out',
      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>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>

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:

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. This could include:

  • "Try again" (refreshing the page)
  • "Log out"

The button should come straight after the related body text.

Open this example (Error page - Referrals) in a new tab 
<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 referrals
    </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>


<p>If the problem continues, contact your healthcare team 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>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 a problem showing your referrals</h1>

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

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

    <p>If the problem continues, contact your healthcare team 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>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>

4. Secondary body text

Use the space beneath the button to:

  • let users know about a different way to access the service
  • give links to another relevant service

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.

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

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">
      There is a problem showing your GP appointments
    </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>


<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 a problem showing your GP appointments</h1>

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

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

    <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 help" 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 (Error page - Problem logging in) in a new tab 
<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>Close the NHS App, reopen it 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"
>
Close the NHS App
</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>Close the NHS App, reopen it and try logging in again.</p>

    {{ button({
      text: 'Close the NHS App',
      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.