- style
System Errors
- Femi
- Ori Cohen
- Carlie Bradshaw
Related Pages: Field ValidationEmpty States
Description
System errors occur when the application encounters a problem, such as with authentication or server communication.
Types
This full list of HTTP status codes shows all of the potential server request response codes.
LUX has specific designs for the 5 most common system errors, plus an additional generic design for rarer instances.
Type | Usage | Illustration | Icon | Full page request (HTTP) | Partial page request (AJAX) |
Bad, missing, or expired token, causing an authentication failure (e.g login has timed out). | N/A - redirect | N/A - redirect | Redirect to Login page. | Redirect to Login page. | |
The user does not have permission to access a resource (e.g an administrator-only page). | 
|
| Render the LUX frame, including the VerinTop.
| Render the permitted areas of the interface. | |
Page or resource not found. Use when a URL or API is called that the server finds no page or resource for. |
| N/A |
The full page should be replaced by the error message. Do not render the LUX frame. | Render the LUX frame, including the VerinTop. | |
Resource is unavailable at that time because there is a load on the network or service. |
|
| The full page should be replaced by the error message. | Render the permitted areas of the interface. | |
Service is not responsive or denies access. |
| The full page should be replaced by the error message. | Render the permitted areas of the interface. | ||
Server infrastructure errors. Use when the server is unable to respond for various reasons. |
| The full page should be replaced by the error message. | The full page should be replaced by the error message. | ||
Generic | Catch all. Use when none of the system errors above are suitable. | The full page should be replaced by the error message.
| Render the LUX frame, including the VerinTop.
|
Usage & Behavior
General Guidelines
Structure
A system error generally consists of:
an illustration which visualises and contextualises the error.
a title which describes the basic nature of the error. This may also contain the error code.
a description that provides more detail on why the error has occurred.
action options such as Back or Retry, to help the user recover from the error state. (Optional).
Example:
Placement and Positioning
The system error is centered vertically and horizontally on the full page or container area.
Interaction
System errors are mostly non-interactive, with the exception of action options such as Back, where shown.
When a system error is embedded in a container area, the rest of the application should remain interactive.
Best practices
Don’t use:
as a substitute for form field validation.
General
Minimise the potential for system errors.
Do not show links or options which the user does not have authorisation for.
When a resource expires or is deleted, the original URL should redirect to its replacement or a new resource, where possible.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Download
Design
Zeplin link | Screen thumbnail |
|---|---|
|
Code