Pages

There is a problem with the service pages
Experimental

This pattern is currently experimental because more research is needed to validate it.

This is a page that tells someone there is something wrong with the service. They are also known as 500 and internal server error pages.

Open this service has a specific page that includes numbers and opening times example in a new tab
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
        <p class="govuk-body">Try again later.</p>
        <p class="govuk-body">We saved your answers. They will be available for 30 days.</p>
        <p class="govuk-body">
          <a class="govuk-link" href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
      <p class="govuk-body">Try again later.</p>
      <p class="govuk-body">We saved your answers. They will be available for 30 days.</p>
      <p class="govuk-body">
        <a class="govuk-link" href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
      </p>
    </div>
  </div>
{% endblock %}

When to use this pattern

Use this page when there is an unexpected problem with the service. Use the same page for all unexpected problems.

Log all errors and fix them as quickly as possible.

Only display the page for a short time. If a problem cannot be fixed quickly, close the service and use a service unavailable page.

How it works

These pages should have:

  • ‘Sorry, there is a problem with the service – service name – GOV.UK’ as the page title
  • ‘Sorry, there is a problem with the service’ as the H1
  • ‘Try again later.’ as a normal paragraph
  • information about what has happened to their answers if they are in the middle of a transaction
  • contact information, if it exists and helps meet a user need
  • a link to another service, if they can use it to do what they came to do

Contact information should either be:

  • a link to a specific page that includes numbers and opening times
  • include all numbers and opening times

Have clear and concise content and do not use:

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

Service has a specific page that includes numbers and opening times

Open this service has a specific page that includes numbers and opening times second example in a new tab
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
        <p class="govuk-body">Try again later.</p>
        <p class="govuk-body">We saved your answers. They will be available for 30 days.</p>
        <p class="govuk-body">
          <a class="govuk-link" href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
      <p class="govuk-body">Try again later.</p>
      <p class="govuk-body">We saved your answers. They will be available for 30 days.</p>
      <p class="govuk-body">
        <a class="govuk-link" href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
      </p>
    </div>
  </div>
{% endblock %}

Service has offline support but no specific page that includes numbers and opening times

Open this service has offline support but no specific page that includes numbers and opening times example in a new tab
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
        <p class="govuk-body">Try again later.</p>
        <p class="govuk-body">
          We have not saved your answers. When the service is available, you will have to start again.
        </p>
        <p class="govuk-body">
          Contact the Tax Credits Helpline if you have any questions.
        </p>
        <p class="govuk-body">
          Telephone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3900</strong>
        </p>
        <p class="govuk-body">
          Textphone:<br>
          <strong class="govuk-!-font-weight-bold">0808 157 3909</strong>
        </p>
        <p class="govuk-body">
          Outside UK:<br>
          <strong class="govuk-!-font-weight-bold">+44 0808 157 0192</strong>
        </p>
        <p class="govuk-body">
          Opening times:<br>
          <strong class="govuk-!-font-weight-bold">Monday to Friday: 8am to 8pm</strong>
        </p>
        <p class="govuk-body">
          Closed Easter Sunday, Christmas Day, Boxing Day and New Year’s Day.
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
      <p class="govuk-body">Try again later.</p>
      <p class="govuk-body">
        We have not saved your answers. When the service is available, you will have to start again.
      </p>
      <p class="govuk-body">
        Contact the Tax Credits Helpline if you have any questions.
      </p>
      <p class="govuk-body">
        Telephone:<br>
        <strong class="govuk-!-font-weight-bold">0808 157 3900</strong>
      </p>
      <p class="govuk-body">
        Textphone:<br>
        <strong class="govuk-!-font-weight-bold">0808 157 3909</strong>
      </p>
      <p class="govuk-body">
        Outside UK:<br>
        <strong class="govuk-!-font-weight-bold">+44 0808 157 0192</strong>
      </p>
      <p class="govuk-body">
        Opening times:<br>
        <strong class="govuk-!-font-weight-bold">Monday to Friday: 8am to 8pm</strong>
      </p>
      <p class="govuk-body">
        Closed Easter Sunday, Christmas Day, Boxing Day and New Year’s Day.
      </p>
    </div>
  </div>
{% endblock %}

Research on this pattern

The pattern was tested with 5 users. The user needs identified were to say:

  • when the service will be available
  • how they can do what they came to do

We cannot meet the first need because we do not know what has happened.

To meet the other need:

  • say what someone needs to do if they need to speak to someone
  • include a link to another service or contact information about offline support

Next steps

More research is needed to find out:

  • what people need to know
  • what their expectations are after reading the page
  • if people understand what is going on when they see the page
  • if people need to know if this affects only them or other people too
  • if people expect to see please and sorry

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.