Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>
System errors are errors which occur from a failure of communication between the client application and its server. These take the form of the list of HTTP status codes attached to every client\server request.
<< Most communicative screenshot of the component >>
Basic Flow
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case, each type should be described in a sub-page. The main page should be used only for the common grounds of the component>>
...
Type
...
Usage
...
Image
...
‘Regular’ HTTP request flow
...
AJAX request flow with target container area
...
AJAX request flow without target container area
...
401 Unauthorized - Bad, missing, or expired token
...
Redirect to login page. Once login is completed, redirect back to originating page
...
Redirect to login page. Once login is completed, redirect back to originating page
...
Redirect to login page. Once login is completed, redirect back to originating page
...
403 Forbidden - Not authorized
...
Render the LUX template (masthead and navigation) but the full content area should render the error message
...
Render the LUX template (masthead and navigation) but the container area should render the error message
...
User closable toast error message
...
404 Not Found - Page or resource not found
...
Do not render the LUX template (masthead and navigation) but the full page should render the error message
...
Render the LUX template (masthead and navigation) but the container area should render the error message
...
User closable toast error message
...
5XX Server Error - Server Infrastructure errors
...
Do not render the LUX template (masthead and navigation) but the full page should render the error message
...
Do not render the LUX template (masthead and navigation) but the full page should render the error message
...
Do not render the LUX template (masthead and navigation) but the full page should render the error message
...
Generic
...
Do not render the LUX template (masthead and navigation) but the full page should render the error message
...
Render the LUX template (masthead and navigation) but the container area should render the error message
...
User closable toast error message
Usage & Behavior
General guidelines
<<use the sub-section below for description, use only those which fit the component >>
Structure
<<Describe the different parts that structure the component. See example: Numeric stepper structure >>
Placement and Positioning
<<Where should the component be located on the screen. See example: Pagination placement and positioning>>
Default State
<<When there is more than one state for control or area. Including default values> see example: Numeric stepper default state >>
Content
<<Including labels, microcopy, number of items, order of items etc… See example: Buttons content >>
Internal Logic
<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>
States
<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>
...
State
...
Image
...
Comment
...
Regular
...
Hover
...
Active
...
Selected
...
Selected, Hover
...
Disabled
...
Read Only
...
Error
...
Warning
...
Focused
...
Focused, Hover
...
Focused, Selected
Interaction
<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>
Validations and errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
Transitions
<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>
Best practices
<Whenever a recommendation (not a must) is provided>>
Use:
<…>
<…>
Don’t use
<…>
<…>
General
<…>
Future Version (TBD)
< Edge cases, uncertain aspects, incomplete description>
<…>
<…>
Related Pages: Field ValidationEmpty States
| Table of Contents |
|---|
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
| View file | ||
|---|---|---|
|
Design
Zeplin link | Screen thumbnail |
|---|
<<Short Zeplin link. You
Use this 
>>
<<Screen with 200 width>>
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...
Code
...