Bits Kingdom

Error state

Back to glossary

Error state is the UI after a failure: payment declined, page not found, timeout, a field the server rejects. Something broke or cannot proceed. The job is to say what happened, why (in human words), and what to try next.

It is not an empty state. Empty means there is nothing here yet. Error means the last action did not work. UX writing carries the sentence; a CTA (“Try again,” “Use another card”) carries the recovery. A red wall of jargon is a usability miss. In prototyping, test decline, 404, and offline — not only the happy path. At checkout, a failed charge that looks like a freeze is how you lose the sale.

A real-life example of an error state

A Midtown shopper hits Pay. The card is declined. A good error state: “Your bank declined this card. Try another, or tap Apple Pay.” A bad one: ERR_GATEWAY_51 and a spinner. Same idea as a 404 that offers search and home instead of a dead end.

Name the problem, offer a next step, don’t blame the human. Test it in a prototype: What Is a Prototype?. For why the copy matters: What Is Usability?.