Errors

01 Displaying errors

Error messages on the form should help the user and guide them to fill in the fields correctly. More often I see the opposite case, where an angry form turns red and screams at the user that they are wrong everywhere. This is unpleasant and leads to refusals filling out the form.

It is not a good idea to check data entry when typing. The user gets an error before he has had a chance to enter everything he needs. It is better to check the data when the form button is pressed. If in your case, it makes sense to check the data as the user is typing, you should do it on the blur event when the cursor moves to another field.

It's good when the error message doesn't just point to a problem but helps solve it or specifies what went wrong.

Being polite and tactful in reporting mistakes is always a good thing. The user will react more calmly to errors if they are not swearing at them but politely asking and prompting.

02 Error message location

It is bad practice to display error messages in isolation from the fields themselves. I know that this is usually done when developers are a bit lazy. It is technically easier to display all errors in one place without context. But it's better not to do so, it breaks the whole logic of the form, and the user may not understand which error refers to which field.

It is best to show the error message below or above the input field. This gives a clear understanding of which field it applies to.

03 Error summary

Long and complex forms may need an extra move to understand errors better. The error field can be hidden at the top of the page and out of sight. By clicking the button on the form, the user won't see which field the error is in. So, it's a good to show an additional message above the button in this case. At the same time, the field itself should also have a message.

Another option is to show the error message as a notification in the upper right corner of the page. This will also help the user understand why he clicks the button of the filled form, and it is not sent.

04 Positive feedback

Don't focus on mistakes; think positively. A form that shows users how well they fill in the fields and makes them feel reliable and confident.

Positive progress or feedback is especially relevant in large forms. It gives exceptional visibility and users can immediately see what has already been done. Here is such a simple but incredible and effective solution.

So next time you're thinking about how to show errors, think about how to show progress and success in completing the form as well.

05 Don't point out the error, guide me

To create a good user experience, don't point out mistakes, but help and prompt. You don't have to yell at the user and highlight everything in red. You can subtly and beautifully show what else needs to be done to fill out the form. This causes less anger and annoyance to the user.

Highlighting errors in red is straightforward and simple. Highlighting with a nice background, calm tone is an art and a terrific user experience.

The established dogmas can be broken if you think a little bit and find a more elegant solution.

Prev
Hints
Next
Buttons