Error Messages
Somebody has filled in eleven fields of a checkout form on their phone. They tap Pay, the page jumps, and a thin red line appears somewhere above the fold: "Invalid input."
Every vague error costs trust. Hear how to write ones that help, on your next walk.
Listen to the full Error Messages course on DesignPath
They scroll up, then down, hunting for the field it means. The card number looks right. The postcode looks right. After a third attempt they close the tab, and your analytics records an abandoned cart with no reason attached to it.
Nothing was broken except the sentence. The rule that rejected them was doing its job, and the whole cost came from six words that named no field, no reason and no way forward.
That distance between a dead end and a recovery is almost all design. It gets decided in four places: which kind of error you are handling, where the message sits, what it says, and whether the person can perceive it at all.
Anatomy of an Error Message
An error message is a small piece of writing with a fixed job. Naming its parts is what stops a review arguing about tone when the problem is a missing instruction.
What a Message Owes
Three things, and the third decides whether anybody recovers.
What happened, in the reader's terms rather than the system's. Why, where the reason helps and is not obvious. And what to do next, which is the part most messages leave out. That card was declined says what happened. Try another card or contact your bank is what turns it into something a person can act on.
Three Scopes
Where an error belongs depends on what it is about, and there are three answers.
A field-level error attaches to one input and sits with it. A form-level error covers the whole submission, such as a login that was refused, and belongs at the top near the action. A page-level error replaces the content entirely, which is the 404, the 500 and the offline state, and article 7 covers those. Putting a field error at the top, or a form error beside one input, is the commonest placement mistake and the subject of article 4.
The Parts Around the Words
A message is not only text.
It has a position, an icon or marker, a color, and an announcement, meaning what somebody using a screen reader hears when it appears. It also has a persistence: whether it stays until fixed or disappears on its own. Colour alone never carries it, which is article 6, and an error that vanishes before it is read has not been shown.
The Route Out
Every error implies a next action, and it is worth naming the four.
Correct it, where the person can fix the input. Retry, where the thing might work a second time. Route around it, where another path exists, such as a different payment method. And ask for help, where nothing else applies and the message should carry the way to do that. A message offering none of the four has told somebody they are stuck.
Pro tip: Take ten error messages from your product and mark which of the three parts each one carries. Most will have what happened and nothing else, and the missing instruction is usually one clause long.