Error Screens

Error screens are for when applications encounter a failure or when users take incorrect or incomplete actions within a flow.

Principles

Use when

  1. any page error occurs on the system.
  2. if the server experiences a sudden error or system outage.
  3. if there is planned (or unplanned) maintenance in the application.

Don't use when

  1. having errors that only affect a single page and do not affect the overall application. Depending on the context, use error messages/states or notifications.

Structure

error-screen-structure
  1. Icon
  2. Body area (title, description)
  3. CTA Button (optional)
  4. Footer (Application logo, legal informations)

Properties

Types

error-screen/404

This should be used when a 404 content not found error or other HTTP errors occur. The page should provide context about the issue, display the error code, and redirect the user to the logical next step.

error-screen/server-errors

Server error screens are mostly displayed due to issues with cloud providers or servers.

error-screen/system-failure

The system failure page is the page that should be used when the application and all associated areas are not working, experiencing a sudden crash. In this error screen, it is necessary to inform the user what has happened, that the issue is on our end, and that efforts are being made to resolve it.
In such situations, communication should be provided to reassure users without undermining their trust.

error-screen/maintenance

This is for system maintenance without a specified time is scheduled. During this maintanance, accessing to the application will be unavailable.

error-screen/planned-maintenance

It is used when the system maintenance work has a specified time. During this maintenance, user cannot access to the application.

Content

Title

When describing what happened, keep your words simple and clear. The header should be direct to inform to user about situation. Header also should be a single sentence, try to avoid make it too wordy and long. Header should convey the error message at a first glance.

Description

Description is a brief information text about what occurred in the flow. Try to build an information in this order:

  • explain what happened (title)
  • say how and where something happened
  • inform how we can fix the issue
  • give the user a way to out

Some users may not understand technical terms. Therefore, when mentioning a technical error, avoid using technical language and try to use a helpful tone most of the time.

Button

When using a CTA button on an error page, the button title should be one or two words. The button should logically redirect the user to the next step.

Footer should only include the product's logo and official contact information. In some error cases, you may not always want to include all contact information. In such situations, do not forget to include the methods you think might be most appropriate.