Error pages

[davidhunter08]

What

Tell the user there is something wrong with the service.

Other information

• NHS community backlog - Page not found and service unavailable
• NHS community backlog - System or service error messages
• GOV Design System - There is a problem with the service pages

[Graham-Pembrey]

Native error message update

In March 2024, changes to the native code base of the NHS App necessitated the rebuilding of 27 native error pages. The NHS App user-centred design team used this as an opportunity to trial and test a new error page pattern. We had previously reviewed error messages across the app and found a lot of design variation, so our aim was to create a template that could be used in a more consistent way.

We updated the design after moderated and unmoderated usability testing. Participants generally demonstrated a clear understanding of the error pages and successfully navigated through them. We noted some content and design improvements from the research which we introduced into an updated pattern. The user-centred design and service desk teams reviewed the updated designs before they went into production.

NHS App content designers can find further details about the content pattern on Confluence: https://nhsd-confluence.digital.nhs.uk/display/NO/Error+message+guidelines

[davidhunter08]

What are error pages?

Error pages are the result of an HTTP status code. This status code is the server’s response — in a three-digit code — to your browser’s request. Meaning that when you type a site’s URL in your browser, it sends a request to the server. What it receives is a code — an HTTP status code.

Status codes are divided into classes and subclasses, based on the number it starts with — from 1 to 5. Every class represents different kinds of responses like:

• 1xx: informational responses — the request was received and understood
• 2xx: success — the request was successfully completed
• 3xx: redirection — you have been redirected to another page
• 4xx: client errors — the requested page couldn’t be found or reached
• 5xx: server errors — the server couldn’t complete the request

The Most Common Error Pages

The most common ones are 401, 403, 404, 500, 502, 503, and 504 errors. The rest of the classes have as a result of another website page, with information of the status code in the HTTP Header.

Why is this important?

As we all know, knowledge is power. On one hand, knowing what these codes mean, and how to solve them, will help you to have a better management of your site. You will know how to put your site back on track in a timely manner.

On the other hand, it will help your SEO. If a site has a high number of 404 errors, Google will think your site is not reliable, which will influence your overall rankings.

Client-side Errors

They usually appear if a page is not found, or there are authentication issues.

401

This type of error is caused by a lack of authorisation credentials, as you are not authorised to access the wanted page. This is the server telling you that you are not authenticated, or you misspelled your username or password.

In order to solve this error, you could try the following:

• Check if you are logged-in
• Clear your site’s cache
• Check your logs for errors
• Try to log in again.

403

In this case, the error appears because you don’t have the necessary permissions to access the wanted page. The 403 response comes after the 401 response — when the user is logged-in, but it is not authorised to access the desired resource.

You could try the following, to maybe get out of this mess:

• Double-check file permissions
• Clear your browser cache
• Reload the page
• Contact your System Administrator.

404

Simply put, this error means the server couldn’t find the page you requested.

To solve this, you could try:

• Check if you typed the right URL
• Reload the page.

Server-side Errors

The 5xx errors are the fault of server providers and/or because of some connectivity issues. Either way, if one of this kind of errors persists, you should contact support.

500

This error comes as the server encountered a problem, and couldn’t complete your request. The 500 error is a very broad HTTP status code — see it as the server saying that something’s wrong with it, and doesn’t want to further comment.

To solve the 500 error, you could try the following:

• Refresh the page in a few moments
• Check the service status page for updates

502

This type of error means that there might be some network connectivity problems. In this case, you are stuck with a Bad Gateway problem, as one of the upstream servers is not responding properly.

You could try the following, in order to get out of that bad gateway:

• Check the Internet connection on your side
• See if the site you are trying to reach is up by using a ping test.

503

In this case, the service is temporarily unavailable as the site server is not available for usage, because of either a planned or an unplanned event. This may be caused by a temporary overloading or a maintenance issue.

To solve this, how about trying to:

• Reload the page
• Check the service status page for updates.

504

This status code means that there is no response from the server in the allowed time period. This code gives a Gateway Timeout error.

You could try the following:

• Reload the page in a few minutes
• Check the service status page for updates
• Change your DNS Servers.

https://www.presslabs.com/how-to/error-pages/

[michaelgallagher]

@Graham-Pembrey some nit-picky things about the images above:

1. why does the white card-like element below the primary button go full-width? (i thought we didn't really do that anymore)
2. if that element does go full-width, i believe the text margins need adjusting (the text margin is set as if the card itself has a margin, which it doesn't in the image)
3. in left image, where there isn't any normal text after the primary button, i believe we need more vertical space between the button and the card

[davidhunter08]

@michaelgallagher I think that (related links) component was an early concept by Max and George and it hasn't been built - well at least it doesn't live in the vue library, I'd need to check if was built in native code 👀

I don't see why it couldn't just be a heading with the standard card links.

I agree on the spacing. Also the H2 is rather small and it'd be good to evidence the need for the (!) icon.

[davidhunter08]

Examples from GP services

[davidhunter08]

'In page error' examples from messages.

[anna-rigo]

The IA team conducted unmoderated and moderated usability testings with 39 participants in December 2023 to evaluate the effectiveness of redesigned error screens and to assess the level of user comprehension when encountering error screens.

Types of error pages covered in this UR:

1. In-page error message: “we could not log you in” (with specific / actionable error code)

Key findings:

• A common theme emerged regarding participants’ interaction with error codes across various scenarios. Participants displayed a tendency to overlook, forget, or even input the error code incorrectly when contacting the NHS to get help as a result of getting an error message
• How to get help was unclear to participants, some wanted to contact their GP. It was recommended to look at changing the content from ‘Contact us’ to ‘Contact the NHS App team’
• The importance of the error code was recognised across participants, however the error code more noticeable or emphasising it within text could prompt users to pay closer attention
• Despite varied user approaches, the importance of the error code was recognised across participants. Users commonly mentioned that, in a real-world situation, they would take the extra step to note down the error code for future reference

Quotes: “I would contact the GP surgery and tell them the error code - or click on the bottom one and do it that way.” “Want the error code more visible at the top.” “Didn’t see the reference code at all.” “I’d like to be able to copy and paste the code.”

Reflection: The length and amount of information presented on the error page led participants to overlook key information presented on the page, the error code. Some participants did not know who / what team they are contacting by clicking on the ‘contact us’ button. Therefore, on this type of error page the message should be clearer and more straight forward with the actions and key information highlighted clearly on the page.

2. Biometric error message (Face ID)

Key findings:

• Participants emphasised the need for clearer error messages. They recommended enriching error messages with more detailed information to enhance user understanding as participants voiced concerns around the security of Face ID and therefore expected the error message to address in the error message designs

Quotes: “(Quickly opens device settings)A lot of users would want to head straight to the correct session. A bit scarce on the error reasoning.” “It took a while to realise what to do next.” “Feels that the steps once you reach device settings need to be made clear.” “If I hadn’t wanted to sign in with Face ID, how do I go back or return to login?”

Reflection: The error message did not provide enough details and reasoning as to what the users should do next. No alternative ways shown to participants If participants did not want to use Face ID.

Update: These are the most up to date error pages currently used that the team designed to address the above user pain points.