Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Problem with this service page

Overview

Use this page pattern where a service is unavailable unexpectedly, such as an error or fault. This pattern should be shown for 500 Internal Server Error errors and some 503 Not Found errors, where actions have not be taken deliberately.

Page patterns represent complete pages that should be used with few changes to promote consistency. If you are using one of the Style Kit’s themes or templates, this page pattern is available as a special layout or view.

Use the service unavailable pattern where a service is planned to be unavailable, i.e. where it is under maintenance or turned off.

This pattern is based on the there is a problem with the service pattern from the Government Digital Service (GDS) Design System.

Uses

Use this pattern when a service:

  • suffers an unexpected error and cannot continue
  • cannot access a service it is dependent upon to complete a task
  • cannot be accessed unexpectedly

When using this pattern, do not:

  • blame the user or use red (danger) text
  • use technical jargon like ‘500’ or ‘resource unavailable’
  • use vague terms like ‘we are making improvements’
  • use informal or humourous words like ‘oops’
  • include information that is not known, or cannot be relied upon

Only use this pattern for a short time. Suspend the service using the service unavailable pattern if it will take some time to fix any problems.

Variants

Basic

Use the .bsk-pattern-problem-with-service class to create a page element containing:

  • a page title of ‘There is a problem with this service - [website or application]’
  • a page header with ‘Sorry, there is a problem with this service’ as a h1 header
  • a lead paragraph with ‘Try again later.’
  • an email address for, or link to information on, a team that can provide information on:
    • when the service will be available again (i.e. the technical owner)
    • how a task can be completed, or information accessed, whilst the service is unavailable (i.e. the business owner)
    • if there isn’t a contact for a service use the BAS IT Service Desk.

Try not to use specific people as contacts, as they may be on holiday or change role.

Indicate whether users should contact someone to report errors, or if this happens automatically.

Sorry, there is a problem with this service

Try again later.

Please report this problem, including what you were trying to do.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-problem-with-service">
  <h1 class="bsk-page-header">Sorry, there is a problem with this service</h1>
  <p class="bsk-lead">Try again later.</p>
  <p>Please <a href="mailto:servicedesk.bas.ac.uk">report this problem</a>, including what you were trying to do.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Open full example

Sorry, there is a problem with this service

Try again later.

This problem has been automatically reported, but you can contact us to explain what you were trying to do or if you would like a reply.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-problem-with-service">
  <h1 class="bsk-page-header">Sorry, there is a problem with this service</h1>
  <p class="bsk-lead">Try again later.</p>
  <p>This problem has been automatically reported, but you can <a href="mailto:servicedesk.bas.ac.uk">contact us</a>
  to explain what you were trying to do or if you would like a reply.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>

Sorry, there is a problem with this service

Try again later.

Please report this problem, including what you were trying to do.

Contact the BAS IT Service Desk for more information.

Contact the Polar Operations Support Team if you need to check your travel arrangements.

<main class="bsk-pattern-problem-with-service">
  <h1 class="bsk-page-header">Sorry, there is a problem with this service</h1>
  <p class="bsk-lead">Try again later.</p>
  <p>Please <a href="mailto:servicedesk.bas.ac.uk">report this problem</a>, including what you were trying to do.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
  <p>Contact the <a href="https://www.bas.ac.uk/team/operational-teams/operational-delivery/field-planning-science-support/">Polar Operations Support Team</a> if you need to check your travel arrangements.</p>
</main>

Alternative

Include a link to any other services users can use for some tasks, or to access some information, whilst the main service is unavailable.

Alternatives may include off-line information such as printed information.

Sorry, there is a problem with this service

Try again later.

Until then, you can use another service to check some information.

Please report this problem, including what you were trying to do.

Contact the BAS IT Service Desk for more information.

<main class="bsk-pattern-problem-with-service">
  <h1 class="bsk-page-header">Sorry, there is a problem with this service</h1>
  <p class="bsk-lead">Try again later.</p>
  <p>Until then, you can use <a href="#">another service</a> to check some information.</p>
  <p>Please <a href="mailto:servicedesk.bas.ac.uk">report this problem</a>, including what you were trying to do.</p>
  <p>Contact the <a href="mailto:servicedesk.bas.ac.uk">BAS IT Service Desk</a> for more information.</p>
</main>