Briefle words · UI design
Error state
What an interface shows when something goes wrong, such as an invalid field or a failed action, including a clear message about how to recover.
Say it to an AI
Create-account card for a notes app: email, password, confirm password. Every input gets a persistent label above it, no placeholder-only input. For the error state, show a red border plus an inline validation message under the field that says exactly what's wrong, e.g. "Must be at least 8 characters".
How an expert would brief the stronger version of “Signup form”.
See it
Try it as a puzzle →Create-account card for a note-taking app, after the user typed a too-short password.
Why: Both pair a red border and soft red ring with red helper text; only A also keeps the field's name visible next to the error.
More ways experts use it
Spec the Order history screen as a state table: loading, empty, error and success, plus pagination past 20 orders. For each state give the trigger and exactly what the user sees, including the empty state's call to action and the error state's recovery.
Order history spec · Product & specs
Related words
Room 1 · Essentials
Learn “Error state” in a five-minute lesson