Errors should be immediately recognizable as such. Users must clearly understand that something went wrong, without confusing error states with normal system behavior.
off
on
The payment method you selected is currently not available. Please try again later.Try againThe payment method you selected is currently not available. Please try again later.Try again
Use distinct visual indicators for errorsMake error states look like normal contentUse consistent error styling across the interfaceUse different error styles in different contextsMake errors immediately visibleHide errors or make them hard to notice
Constructive Error Messages
Error messages should be written in plain language, explaining the problem without blaming the user or using technical jargon.
Password must be at least 8 charactersPassword shortFile upload failed, you can upload images up to 10MBFile too large, fix errorWe couldn’t save your changes, check missing fieldsYou forgot something, please fill in all fields
Error Prevention Feedback
Whenever possible, the system should help users avoid errors by giving early feedback before submission or confirmation.
Password strength indicator
Strength
Provide real-time validation feedbackWait until submission to show errorsShow warnings before critical actionsSurprise users with errors after they actGuide users toward correct inputLet users complete forms with invalid data
Explicit Recovery Guidance
Users should be told exactly how to fix the error or what to do next, rather than being left to guess.
A list of users and a button to simulate a connection problem
Connection problem
Retry
Mario Rossi
Luigi Verdi
Giulia Crippa
Joan Baez
Jamie OliverMario RossiOffline
Provide specific steps to resolve the errorLeave users guessing what to do nextOffer actionable solutionsOnly describe the problem without solutionsMake recovery actions easily accessibleHide recovery options or make them hard to find
Graceful Recovery Actions
After an error occurs, users should be able to recover easily without losing progress or restarting their task.
off
on
Attacker YouFujimi Junior High SchoolSave changesThere was an error from the server while saving your changes.
Attacker YouFujimi Junior High SchoolSave changes
There was an error saving your changes.
Preserve user data when errors occurLose user input when showing errorsAllow users to correct mistakes easilyForce users to start over after errorsProvide undo or revert optionsMake errors irreversible
Visible Error Context
Errors should appear in context, making it easy for users to understand where and why the problem occurred.
off
on
Billing & InvoicingYour subscription is active until 2026-01-23.
The payment method you selected is currently not available. Please try again later.Try againSeptember2046-09-15 $1,350.25 Scheduled
August2046-08-15 $1,250.00 Paid
July2046-07-15 $1,180.50 Paid
June2046-06-15 $950.75 Error
May2046-05-15 $1,420.00 Paid
April2046-04-15 $1,100.00 Paid
Data consumptionEvery month you consume 64GB of data averaging 2.1GB per day.
Monthly data consumption
Billing & InvoicingYour subscription is active until 2026-01-23.
September2046-09-15 $1,350.25 Scheduled
August2046-08-15 $1,250.00 Paid
July2046-07-15 $1,180.50 Paid
June2046-06-15 $950.75 Error
May2046-05-15 $1,420.00 Paid
April2046-04-15 $1,100.00 Paid
Data consumptionEvery month you consume 64GB of data averaging 2.1GB per day.
Monthly data consumption
The payment method you selected is currently not available. Please try again later.Try again
Show errors near the relevant input or actionDisplay errors in unrelated locationsHighlight the specific field or element with the errorShow generic errors without contextMaintain error visibility until resolvedHide errors when users interact with other elements
Related references and bibliographypotentially outdated