Design Beautiful Errors

I love contingency design: the very important details of handling errors and turning a negative user experience into a positive one. Usually when working on form interaction I design four things:

  1. A default field value to guide the user;
  2. The error message, and where it is located;
  3. The styling of the field when on-error;
  4. What happens when the error is corrected (usually the same as when the field was filled correctly).

Let’s take a closer look at this.

Prevent errors and give immediate feedback

Rule #1 requires us to prevent errors as much as possible. A default value can help a lot, as it shows the user how to enter their data. Also providing immediate feedback is of great help. Getting the user back on track right away greatly improves the user experience and speeds up the whole process. Having to submit the form before seeing your mistake is really un-cool.

Make sure however, that you give the immediate feedback where it makes sense: when the user enters an illegal character it makes sense to alert her right away. However, when she’s still inside the field (typing or idling) it doesn’t make sense to check whether a minimum input length has been met.

Show what went wrong, and where

Rule #2 tells us that we can’t absolutely stop errors from happening, but we can handle (and should) them gracefully. The error message should be as clear as possible and explain what went wrong, not just telling something went wrong. Avoid generic messages like “Invalid input”. Use something helpful like: “Your telephone number should at least contain 10 digits.”.

Also show which field is on error. This should be immediately clear to the user. Do this by highlighting the field and by placing the error close to the field. But don’t put it too close. This error message tooltip on overlaps the invalid field, which makes it very hard for the user to correct the problem:

A blocking tooltip on

Notify the user that he corrected the error

When the user fixes the incorrect value make sure that the error message disappears instantly and the form field returns to its regular completed-state. Preferably this completed-state makes it absolutely clear to the user that he entered the required data correctly. The best forms leverage this completed-state to tell the user that he’s well on his way to completing his goal (the complete form fill). Cheer on the user!

Form completion example using checkmarks

Allow for international input

One very important thing to always keep in mind is that people may have valid input that doesn’t match your validation rule. If you target an international audience you need to take care that you accept all different address notations. Even something so seemingly simple as a name may collide with your validation rules.

Read more about international form input in the excellent “Personal names around the world” post in the Q&A section of W3C’s website.

Track your errors

Then finally, as rule #3 tells us, track your errors. Make sure that you detect that errors happen and log everything you can. Use web analytics solutions like Google Analytics and Mouseflow, use application and server level logging. Reveal why users are struggling with your application, so you know what to do to fix it.


We’ve looked at how to avoid errors from happening, handle them gracefully when they do occur and how to track them. But above all: we’ve looked at what we can do to salvage a negative user experience.

Error handling is usually the most overlooked aspect of any interaction design. Wrongly so. It is the moment where your application can make all the difference and delight your users.

Don’t underestimate error handling and start designing beautiful errors.

Write a Comment