Related Pages: Field Validation
| Table of Contents |
|---|
...
There are many different types of system errors that can occur during the hosting and operation of modern web applications. These take the form of the list of HTTP status codes attached to every client\server request. With LUX, we have created specific designs and illustrations for the 5 most common types of these system errors (including one for a ‘catch all’ situation).
Type | Usage | Illustration | ‘Regular’ HTTP full page request flow | AJAX partial page request flow with target container area |
|---|---|---|---|---|
Bad, missing, or expired token. Specifically for use when authentication is required and has failed or has not yet been provided | N/A | 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 | |
Not authorized. For use when the user does not have the necessary permissions for a resource |  | 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
| |
Page or resource not found. For use when a URL or API is called that the server finds no page or resource for. |  | 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
| |
Server Infrastructure errors. For use when the server is unable to respond for a myriad or server issues |  | 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. | Catch all. For use when non of the system errors above are suitable |  | 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
|
...
An illustration that attempts to visualize and contextualize error.
A title which describes the high level nature of the error. This may also contain the error code.
A description paragraph that summaries (in a little more detail) the reason(s) why the application entered the error state.
Optional helper operations (such as ‘Back’ or ‘Retry’) to help the user recover from the error state.
??Who should developers contact to validate message copy text??
...
System error structure example
Placement and Positioning
The system error is centered vertically and horizontally on the full page, content or container area.
The illustrations are of ??fixed width and height??.
Interaction
System errors are mostly non interactive with the exception of optional helper operations (e.g. ‘Back’). The rest of the surrounding application should remain intractable when a system error is embedded in a content or container area.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
...