The cheapest bug is the one in the mock-up

Missing states cost minutes in a design review and a sprint in production.

Every mock-up is a happy path. The data is loaded, the names are short, the user has permission, and nothing has gone wrong. It has to be: you can’t design everything at once. But the states nobody drew don’t disappear. They get designed anyway, by whoever builds the screen, at the last minute, alone.

The states nobody drew

The same gaps turn up in almost every handoff:

  • Empty: the list with nothing in it, and the first-time user who has never added anything.
  • Loading: what shows while the data is on its way, and what shows if it takes ten seconds.
  • Error: the request that fails, the form that won’t submit, the message that says what to do next.
  • Long content: the name with forty characters, the translation that is a third longer, the number with seven digits.
  • No permission: the button this user is not allowed to press.
  • Offline: the action taken on a train in a tunnel.

Minutes against a sprint

Caught in a design review, a missing error state is a question and five minutes of drawing. Caught in production, it is a bug report, a triage meeting, a fix squeezed into the next sprint, a review, a retest and a release. Same state, same decision; the only thing that changed is when it was made.

A missing state is still a design decision. The only question is who makes it, and how late.

[TEXT: a number from work: how long a missing state took to fix in production. [N] days]

A review checklist for mock-ups

Before a design is handed over, ask it these questions:

  1. What does this look like with no data, and with far too much?
  2. What does it show while loading, and when loading fails?
  3. What happens to the layout with the longest real value, in the longest language?
  4. Who can’t use this action, and what do they see instead?
  5. Where does keyboard focus go, and what does a screen reader announce?

None of these needs a new process. They fit in the review you already have, if a developer is in the room before the build starts instead of after.

What changed

[TEXT: a real example, with numbers: states caught in review instead of production. [N] before, [N] after]