Form errors

Error handling is a vital part of the creation of any form. Users are bound to miss a field, type something in an incorrect format, type a username that’s already taken or type a password that is not strong enough. When things like these happen, it’s not the end of the world. It’s normal for errors to occur. The problem comes when the errors are not managed properly.

Here we’ll see Dos and Don’ts of form errors management so you can learn how to best show and manage errors.

But, what if we prevent errors from happening?

There are errors you can’t prevent like getting a username that’s already taken but there are others you can indeed prevent.

Show the user what they are expected to type

You can use a placeholder to indicate what the user should type:

Or go one step further and make typing optional:

Another way you can help your user is with passwords. Don’t wait until the user submits the form to tell them the password is weak. Show them how they’re doing and what else they need to do while they type:

If there’s a limit in characters, show it and prevent the user from typing more characters than allowed:

If a field is required, mark it as such. A standard way of doing this is by adding an asterisk at the end of the label:

What about when errors are inexorable?

When errors do occur, you need to keep in mind never to accuse the user of the error, even if it’s really on them:

Don’t: You forgot to type your name.

Do: We need to know how to call you.

Depending on the tone of your company, you can even write jokes to alleviate the inconvenience of the error.

Don’t show global errors

Global errors are rarely useful and if several errors occur at the same time, the whole situation can become very confusing.

Don’t:

It’s better to show the error for the field it relates to:

Do:

When do errors need to appear?

As a rule of thumb, don’t show errors while the user is just typing, i.e. if the user is typing an email address:

Wait for the field to lose focus to validate and show the error, if there’s any. Whenever you can, show the error before submitting the form. Just wait until the user finishes typing.

When do errors need to disappear?

It’s disconcerting for users to write on an errored field. You should remove the error indicator as soon as the user starts typing again. They should feel like they are fixing the error while being given the benefit of the doubt. If, after clicking Submit, the error is still present, show them the error message again.

Anatomy of a good error indicator

The following image shows what a good error indicator should have:

1. A differentiating color. The errored field should stand out from the rest of fields. A good color to use is red, since in the majority of cultures and situations, it indicates danger or that something is not right.
2. An error message. This is extremely important. The user needs to know what went wrong and how to fix it. A good error message communicates both pieces of information. Remember, you have to provide an error message.
3. Animation. Humans were programmed from the dawn of mankind to react quickly to movement, especially when we see it in the corner of our eyes. This was useful to detect and fight or flee from a predator. Now we can use it to capture the user’s attention immediately. You can shake the label and show the error message with a nice transition when the error is being shown.

Thank you for reading.