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:
- the error is page not found
- you can adapt GOV.UK patterns for service unavailable or there is problem with the service
- a user makes a mistake completing a form – instead follow the NHS service manual guidance for error messages and errors summaries
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>Using calls to action and links
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:
- take part in the 'Error pages' discussion on GitHub and share your research
- propose a change on GitHub - read more about how to propose changes in GitHub
You can also share feedback with us on Slack.