Pages

There is a problem with the service

Tell users there is something wrong with an NHS App service. These are also known as 500 and internal server errors.

Open this example (Problem with service) 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 with the service</h1>

<p>Try again later.</p>


<h2 class="nhsuk-heading-m">Other options</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">
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 the service</h1>

    <p>Try again later.</p>

    <h2 class="nhsuk-heading-m">Other options</h2>

    {{ nhsappCard({
      title: 'Find NHS services near you',
      href: '#',
      classes: 'nhsapp-card--secondary'
    }) }}

  </div>
</div>

When to use

Use these pages for any general, temporary service errors.

How to use

These pages should have:

  • ‘There is a problem with the service – service name – NHS App’ as the page title
  • ‘There is a problem with the service’ as the H1
  • ‘Try again later.’ as a normal paragraph, or more specific guidance if we have it information about what has happened to their answers if they are in the middle of a transaction
  • a link to another service under the H2 ‘Other options’, if they can use it to do what they came to do
  • guidance on how to contact the NHS App team, if it helps meet a user need

Have clear and concise content and do not use:

  • a back button
  • breadcrumbs
  • jargon like 500 or bad request
  • ‘We are experiencing technical difficulties’
  • red text to warn people

Research

Research has shown that users may:

  • go straight to buttons and links without fully reading error pages
  • not notice error codes

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 'There is a problem with the service' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.