Error States UI Design Patterns & Examples
Error state and failure screen designs from top apps. 404 pages, connection errors, permission denied screens, and graceful degradation patterns.
What makes a good error state design?
A good error state design tells the user exactly what went wrong and what to do next, instead of a generic failure message. Strong error states distinguish between connection issues, permission problems, and not-found pages, and always offer a clear recovery action like retry or go back.
- Write specific error copy that names the problem instead of a generic message.
- Always pair an error state with a recovery action, such as retry or go back.
- Design distinct states for connection errors, permission errors, and not-found pages.
Browse real error states screens from top apps on Gummble.
Browse Error States Screens →Frequently asked questions
What is an error state in UI design?
An error state is the screen or message shown when something fails: a network issue, a permission problem, a not-found page, or a form validation failure. Good error states name the problem and offer a way to recover.
What should a 404 page include?
A 404 page should confirm the page was not found, avoid blaming the user, and offer a clear path back, such as a link to the homepage or search. Avoid a dead end with no navigation options.
How should form validation errors be shown?
Show validation errors inline, next to the specific field, as soon as the user moves on from it or submits the form. Avoid showing all errors only in a summary banner at the top with no reference to which field they belong to.