Help Users Recognize, Diagnose, and Recover from Errors

If we couldn't prevent users from making a mistake, or if our system worked not as expected, the error messages should follow the best practices.

1. Human language, instead of error codes and technical information useful for devs only
2. Commonly used styling (red or orange color, depending on the severity of the message)
3. Use icons to improve clarity and support accessibility

Language of error messages

Here are few examples of bad and good error messages. I don't claim that these are the best ones, my purpose is to convey the idea.

• Error Code 502: Bad Gateway
• We’re having trouble connecting to the server. Try refreshing the page or come back later.

• Connection Timeout Error
• We couldn’t reach the server. Please check your internet connection or try again later.

• Error: File format not supported
• This file format (.zip) isn’t supported. Please upload a .jpg, .png, or .pdf file instead.

• Authentication failed.
• Incorrect email or password. Did you forget your password? (link)

• An unknown error occurred.
• Something went wrong. Try restarting the app. If the problem continues, contact support with error code 56A.

• Invalid value
• Please enter a valid email address (e.g., name@example.com).

• 403 Forbidden: You do not have permission to access this resource.
• You don’t have permission to view this page. If you think this is a mistake, contact support. (link)

• Transaction failed: Gateway authentication error.
• Your payment couldn’t be processed. Check your card details or try a different payment method.

Further reading