Error Message UX

An error message has one job: help the person continue. Cute copy, blame, and error codes meant for engineers all fail that job. The message should say what happened, why it matters, and what to do now.

Place it where the problem is

Field errors belong with the field. Page-level failures belong near the submit action and in a form that screen readers can announce. A toast that vanishes in two seconds is a poor home for a payment failure.

Write the human version

Something went wrong is not a diagnosis. Prefer Payment did not go through. Try another card or check with your bank. If you must keep a reference code, put it second, not first.

Do not yell

Red is a common pattern, but it is not the only signal. Use text, an icon with a text equivalent, and focus management. All-caps and exclamation marks make the product sound angry. The person is already blocked.

Common mistakes

• Clearing the form after a failed submit.
• Showing errors only on a summary that is off-screen.
• Using humor when money or health is involved.

How to judge the work

Error copy is working when it names the failure, the next action, and the field or payment that needs attention, without wiping the form or hiding the message in a toast that disappears. If a teammate cannot continue from the text alone, the UI is still blaming the user.

Practice this on UI Coach

In any challenge with a form, design the failed submit state before you polish the default. Content design is a first-class skill on UX writing and product design roles.

Sources

• Nielsen Norman Group error message guidelines