Related Pages: Field Validation

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	Full page request (HTTP)	Partial page request (AJAX)
401 Unauthorized	Bad, missing, or expired token, causing an authentication failure (e.g login has timed out).	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.
403 Forbidden	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.
404 Not Found	Page or resource not found. Use when a URL or API is called that the server finds no page or resource for.		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.
5XX Server Error	Server infrastructure errors. Use when the server is unable to respond for various reasons.		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 visualizes and contextualizes 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.

• The illustrations are of ??fixed width and height??.

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

• Minimize the potential for system errors.

  • Do not show links or options which the user does not have authorization 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
https://zpl.io/V1LxYAQ

Code