Related Pages: Field Validation Empty 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 4 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 | N/A | Redirect to Login page. Once login is complete, redirect back to originating page. | Redirect to Login page. Once login is complete, redirect back to originating page. | |
The user does not have permission to access a resource (e.g an administrator-only page). |  |  | Render the LUX frame, including the VerinTop. Replace the full content area with the error message.  | Render the permitted areas of the interface. Show the error message within the container area.  | |
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. Show the error message within the container area.  | |
Server infrastructure errors. Use when the server is unable to respond for various reasons. |  | N/A | The full page should be replaced by the error message. Do not render the LUX frame.  | The full page should be replaced by the error message. Do not render the LUX frame. | |
Generic | Catch all. Use when none of the system errors above are suitable. |  |  | The full page should be replaced by the error message. Do not render the LUX frame.  | Render the LUX frame, including the VerinTop. Show the error message within the container area.  |
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.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
