Error page

Use an error page to tell users there was a problem. Explain what has happened and what they can do next.

Open this example (Touch ID) in a new window 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Touch ID did not work</h1>

<p>Check you have:</p>


<ul>
<li>added a fingerprint scan on your device</li>
<li>turned on Touch ID in the account area of the NHS App</li>
</ul>


<p>
You can still log in to the NHS App using your email address and password.
</p>


<button
class="nhsuk-button nhsapp-button--secondary nhsapp-button"
data-module="nhsuk-button"
type="submit"
>
Go back to login
</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">Touch ID did not work</h1>

    <p>Check you have:</p>

    <ul>
      <li>added a fingerprint scan on your device</li>
      <li>turned on Touch ID in the account area of the NHS App</li>
    </ul>

    <p>You can still log in to the NHS App using your email address and password.</p>

    {{ button({
      text: "Go back to login",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

  </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 an error page when a user makes a mistake while completing a form. Instead, follow the NHS service manual guidance for error messages and errors summaries, to help users understand what to do in context.

How to use

Error pages should:

  • have a main heading that tells users what has gone wrong
  • have body content that tells users what to do next
  • be short, with simple, uncluttered design

You may also need to include signposting to medical help and an error code.

Main heading

Use the main heading to describe the problem. For example:

  • “Face ID did not work”
  • “No internet connection”
  • “Not enough storage space”

It can sometimes be helpful to start with “We” or “You” to show where the problem lies:

  • “We could not log you in”
  • “You need to update the NHS App”

In our research, participants were less concerned with what had gone wrong, and more concerned about finding out how to fix the problem. Try to sum up the problem in the heading, then move on to a solution or next steps in the body text.

Body content

Users are likely to scan the page very quickly. You might need to:

  • give an action
  • suggest alternative options

Our research suggests users rarely read content when it is placed beneath a button.

Medical signposting

You can use inset text to mention NHS 111 at the end of an error page.

Open this example (Medical signposting) in a new window 
<div class="nhsuk-inset-text nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
  <span class="nhsuk-u-visually-hidden">Information: </span>

<p>
For urgent medical advice, use <a href="#">111 online</a> or call
<a href="#">111</a>.
</p>
</div>


{% from 'inset-text/macro.njk' import insetText %}

{{ insetText({
  html: "<p>For urgent medical advice, use <a href='#'>111 online</a> or call <a href='#'>111</a>.</p>",
  classes:"nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4"
}) }}

It is not always necessary to include this text. We particularly want to avoid giving the impression that 111 can help with technical problems. You might leave out this text on an error page about not being able to download a file, for example.

If the error page already suggests contacting a GP surgery, you do not need to also mention 111.

You should:

  • think about whether or not the user is being blocked from accessing particular medical help
  • speak to the clinical team for advice if you are unsure

Error codes

There are some scenarios where we encourage users to contact the NHS App team, to report a problem using our online form. It can help them to reach a resolution more quickly if they copy or note down an error code, then input that code when completing the form. See the 500 error example below.

Examples

404 error (page not found) - App version

Open this example (Page not found) in a new window 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

<p>
We will fix this link as soon as possible. Try again later or use a
different service.
</p>


<div class="nhsuk-inset-text nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
<span class="nhsuk-u-visually-hidden">Information: </span>


<p>
For urgent medical advice, use <a href="#">111 online</a> or call
<a href="#">111</a>.
</p>
</div>
</div>
</div>


{% from 'inset-text/macro.njk' import insetText %}

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

    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

    <p>We will fix this link as soon as possible. Try again later or use a different service.</p>

    {{ insetText({
      html: "<p>For urgent medical advice, use <a href='#'>111 online</a> or call <a href='#'>111</a>.</p>",
      classes:"nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4"
    }) }}

  </div>
</div>

If a 404 error occurs in the native app, it means there is a broken link that the NHS App team need to fix. We have included medical signposting because it’s possible that the broken link could lead a medical service.

404 error (page not found) - Browser version

Open this example (Page not found - web) in a new window 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

<p>If you typed the web address, check it was correct.</p>


<p>If you pasted the web address, check you copied the entire address.</p>


<p>
Otherwise, this may be a broken link that we will fix as soon as possible.
Try again later or use a different service.
</p>


<div class="nhsuk-inset-text nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
<span class="nhsuk-u-visually-hidden">Information: </span>


<p>
For urgent medical advice, use <a href="#">111 online</a> or call
<a href="#">111</a>.
</p>
</div>
</div>
</div>


{% from 'inset-text/macro.njk' import insetText %}

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

    <h1 class="nhsuk-u-margin-bottom-5">Page not found</h1>

    <p>If you typed the web address, check it was correct.</p>

    <p>If you pasted the web address, check you copied the entire address.</p>

    <p>Otherwise, this may be a broken link that we will fix as soon as possible. Try again later or use a different service.</p>

    {{ insetText({
      html: "<p>For urgent medical advice, use <a href='#'>111 online</a> or call <a href='#'>111</a>.</p>",
      classes:"nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4"
    }) }}

  </div>
</div>

In the browser version, the user is more likely to inputted the wrong web address, so the focus is on helping users to correct that problem.

500 error (internal server error)

Open this example (Problem with services) in a new window 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">
      There is a problem with this service
    </h1>

<p>This may be a temporary problem. Try again later.</p>


<p>
If the problem keeps happening, make a note of the error code
<strong>3xxxx</strong> and then contact us.
</p>


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


<h2>Other options</h2>


<div class="nhsapp-card">
<div class="nhsapp-card__container">
<div class="nhsapp-card__content">
<a href="#" class="nhsapp-card__link nhsuk-link--no-visited-state">
Find NHS services near you
</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 'button/macro.njk' import button %}
{% 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">There is a problem with this service</h1>

    <p>This may be a temporary problem. Try again later.</p>

    <p>If the problem keeps happening, make a note of the error code <strong>3xxxx</strong> and then contact us.</p>

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

    <h2>Other options</h2>

    {{ nhsappCard({
      title: 'Find NHS services near you',
      href: '#'
    }) }}

  </div>
</div>

In the above example, the exact problem may be unknown or lengthy to explain. We have used a simple “There is a problem with the service” explanation, similar to the GOV.UK Design System error page for 500 errors.

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.

Help improve this pattern

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.

Discuss 'Error page' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.