What is an error state in UX design?
An error state is the visual and communicative representation of a failure in a system interaction. Error states occur when a form submission fails, a page cannot be loaded, a network request times out, a file upload is rejected, or any other operation does not complete as expected. The design of error states is critical because errors are moments of friction and potential abandonment. Users who encounter a clear, helpful error state are far more likely to recover and complete their task than users who encounter a vague or alarming one.
What should an error state communicate?
An effective error state communicates three things: what went wrong, why it went wrong if relevant and actionable, and what the user can do to recover. It should do this without blaming the user, using technical language, or presenting information that is not actionable. An error message that says only "Error 500" fails on all three counts. An error that says "We couldn't save your changes. Check your internet connection and try again" succeeds. See the error message glossary entry for guidance on writing effective error copy.
How to design error states for different contexts?
Form field errors should appear inline next to the problematic field with specific guidance on how to correct the input. Full-page error states for 404 or 500 errors should maintain the site's navigation and provide links back to useful content rather than leaving users stranded. Network error states should offer a retry action. Validation errors on submission should summarize all problems and link to each affected field. In all cases, error states should use a consistent visual treatment including an appropriate color, an icon that does not rely solely on color, and accessible contrast ratios.