Exception Page
For displaying page error states.
Design Goals
Explain what went wrong, provide appropriate suggestions or actions to the user, and avoid confusion and disorientation.
Design Principles
Friendly
Use friendly, clear language to express, avoiding confusing terms that might bewilder the user.
Provide Invitation
Guide users to the next level of interaction with reminders and hints, indicating what can be done on the next screen.
Types
Error Page
Displayed when a page encounters an error, it includes the following elements:
- Illustration: Add a bit of fun to the heavy error, easing user frustration;
- Error Code/Issue: Display specific HTTP error codes if available;
- Error Description: Briefly describe the error cause, making it easier for users to report the issue;
- Suggested Actions: Help users deal with the error or guide them back on the right path.
Template - 404
When to Use
When the page, item, resource, etc., the user requested is not found.
Template - 403
When to Use
No permission, which might include no application or data permissions, depending on the situation.
Template - 500
When to Use
When the server encounters an error and cannot provide service to the user.
Template - Browser Incompatibility
When to Use
When the browser is incompatible, preventing users from opening the webpage.
Design Recommendations
When the browser is incompatible, affecting the operation to different extents, use global prompts if it does not seriously impact usage, allowing users to continue.
Empty State
Displayed when there is no content/data to show to the user. An empty state is also a specific type of error page. For detailed content, please refer to the Empty State document.
Load Failure
When to Use
Displayed when a page fails to load content due to various reasons such as network issues, generally combined with retry options.
Design Recommendations
The overall interaction flow of a page may consist of different states. Designers should not only focus on the ideal state but also consider various unexpected scenarios comprehensively, preventing interruptions in the user experience.
Ideal State: The state where all page modules are displayed normally;
Partial State: Some modules are missing or some content is in an empty state, refer to the design of Empty State;
Loading State: Use Spin or Skeleton to indicate the loading state;
Error State: System errors, no permissions, etc.;
Empty State: The state where the content is completely empty, it is recommended to use guide-like Empty State prompts. For new users, refer to the new user guide page.