Patterns
Errors
Usage
Errors appear when an application is unable to execute an intended action.
Effective error management enhances user understanding and resolution of these issues, optimizing the functionality of your digital products. Design products that simplify user input, reducing errors. Apps should identify and understand common data formats, offering valuable hints to assist users.
Here are some examples of errors:
An app failing to load.
Incompatible actions are executed simultaneously.
When user input is not understood.
Page loading failure.
Text field input
Helper text can be provided before, during, or after a user interacts with each field on a form. Error messages should only show up after a user interacts with a field. If the user inputs incorrect data, helper text may transform into error text.
Minimize form text to the essentials. Not every text field needs helper and/or error text.
Example of a text field input with helper text.
Example of a text field input with error text.
Incompatible values
Display errors for conflicting values when a user interacts with a text field, either during or after their interaction. If two or more fields contain incompatible inputs:
In the text field, show that a correction is necessary. Place an error message below for clarity.
Incomplete form
Show empty form fields with both the field and an error message below. If a user misses a field while moving through the form, let them know with incomplete form errors. If we can't tell their progress, show an error after they try to submit.
Label error messages individually as the user fills out the form.
Error from a dialog
Clear and simple error messages are important. Use easy-to-understand language to explain the issue and guide users on how to fix it. Avoid technical terms and be helpful to ensure a smooth user experience.
Example of an error with guidance on resolving the user's issue.
Example of an error with limited information.
404 - Page Not Found
If you come across a 404 error, it means the page or resource you're looking for isn't available. The message should be simple and direct, letting users know that the requested page doesn't exist. To help users in this situation, consider offering suggestions like returning to the homepage, checking the URL, or contacting support for assistance. Making the error message user-friendly ensures a smoother experience and helps users find the information they need.
Example of an error with guidance on resolving the user's issue.
Empty state
Empty state messages can be formulated with the necessary action to fix the issue, or they can simply provide a general message about the problem. The content of the message depends on how much information the system has about the issue. It might suggest users to try again later or contact support for assistance.
When the system lacks the necessary information to provide guidance and presents you with a call to action.
When the system has the required information and no action is required.
Example
This illustrates an empty state scenario where no numerical or sales data is available for collection and viewing. Enhanced with an icon to capture attention and provide additional value to the message.
Color
Error messages should reflect your product’s color palette. It’s recommended that you use a contrasting color for error states, such as a warmer hue like red or orange.
Error messages should be legible, with noticeable contrast against its background color. Using familiar colors that users associate with errors enhances the user experience and follows UX best practices.