Validate it. The right way. Part I.

Hi there! 👋

It's Victor, and today we’re going to talk about form validation. I decided to break this issue into two parts because the topic is enormous.

I’d love to hear any feedback. Tell me your thoughts by replying to this email. 😊

Intro

Forms are essential parts of most user interfaces. We often need to validate them. Validation is a severe test for users, so we need to pay special attention to many details.

You should remember that there are many conditions under which users fill the form.

Your users can be children. They can be old. They can be tired. They can be drunk. 

They can fill the form from mobile. From a tablet. From a desktop. 
In a car. In a cafe. At home.

They can even be drunk, in a car, with children, and filling the form on a tablet. 😊

Validation is one of the parts of the whole UX process. Let’s take a look at how to make it better.

Error messages

First of all, the messages themselves should be explicit. It means that you should indicate what's wrong with the data user entered.
 
Two simple examples:
❌ Bad: "Your password is wrong."
✅ Good: "Your password should contain at least six characters." 

Then, the messages should indicate what the user should do. This rule is applied to the whole UX area. When the user receives the message, we shouldn’t leave him without any clues of what to do next.
 
Take a look:
❌ Bad: "Something went wrong, sorry!"
✅ Good: "Looks like someone has already used your email. Please, use another email address." 

It is pretty common when you get an error message in an app, which says that something went wrong, but it doesn't provide any information on what to do next. 
 
Apps just leave users alone, and this doesn't help them to do their tasks.
 
The messages should be human-readable, meaning that you write for users, not for machines.

❌ Bad: "Ooops, the server responded with 500 code."
✅ Good: "Something went wrong on our side, we already received the error & our team is working on it. If it's urgent, contact our support at [email protected]"

Selecting the right place

There are two main places for showing validation errors: inline (next to inputs) and below (or even above) all inputs.
 
The best place to show validation errors is inline. But not only inline, they also should be displayed right after the user has filled the form (more about it in the second issue of the newsletter).

 The reasons are obvious:

1. The user will notice it as soon as he makes a mistake
2. He can fix it as soon as he sees it
3. No need to scroll & find inputs that are filled incorrectly

 
When the user types in a certain field, he is in the context of this field. 
 
So if we show him an inline validation error, we will not switch the context: he knows which field we are talking about.
 
While if we show him all errors at once, it will result in high interaction costs.

That's it for now. Thanks for reading!

👉You can always reply to this email with feedback & you could also check my Twitter, where I share my thoughts about user interfaces. 

Cheers,
Victor