Victor

Posted on Nov 3, 2020

Validate it. The right way.

#webdev #ux #design #beginners

Intro
Composing error messages
Selecting the right place
Validation modes
- Aggressive
- Passive
- Lazy
- Eager
Help your users
Practical examples
- Facebook
- Steam
- Name.com
Afterword

Intro

Forms are essential parts of any user interface. They differ from a single input and a button, ending with huge complex forms containing multiple sections.

The validation process often accompanies forms. For developers, it might be clear how the form should be filled.

But remember that there are so many circumstances you have to take into account.

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 tablet. From desktop.

In a car. In a cafe. At home.

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

Once I worked in a company that specialized in real estate searching. They had a site where you could place an advertisement when you wanted to sell a house.

I worked in the company as a UX-intern for a month. The whole month we were researching how users fill the advertisement form and their mistakes. Just imagine, the whole month...😱

At first, validation might look like a simple process.

You find some javascript library, put validation rules, and that's it.

However, validation is a very complex process in terms of user experience, which is often underestimated.

The aim of validation is not to pass your data to the server correctly. It's about helping users fill it with less effort. Your server still needs validation.

The main aim is to reduce interaction costs.

Here I want to show you some useful tips regarding the validation process.

Composing error messages

First of all, the messages themselves should be explicit. This means that you should clearly indicate what's wrong with the data user entered.

Bad example: "Your password is wrong."
Good example: "Your password should contain at least 6 characters."

Then, the messages should indicate what user should do. This rule is applied to the whole UX area. When the user received a message, he shouldn't be left with no clues of what to do next.

Bad example: "Something went wrong, sorry!"
Good example: "Looks like someone has already used your email, please, use another email address."

I don't claim that my English is good. My purpose here is to show that there should be some indication of what to do next.

This is quite 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 example: "Ooops, the server responded with 500 code."
Good example: "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 support@app.com."

Again, I may be way too wordy here, but I want to transmit the main idea.

Selecting the right place

There are two main principles of showing validation errors: inline and after the user submits the form.

In the case of inline validation, the error messages are shown next to the input fields. While in the case "after the user submits the form" it may vary: you can show all validation errors at once next to every input or show them in the beginning/at the end of the form.

The best place to show validation errors is inline. The reasons are obvious:

User will notice it as soon as he makes a mistake
He can fix it as soon as he notices it
No need to scroll & find inputs which are filled incorrectly

When 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.

Compare these two approaches:

Inline:

User types in email
Gets validation error
He knows that he has just typed his email, so he even doesn't have to read the message. If he sees something red around email input, then he knows that something's wrong with what he has just typed in
Easily fixes it

All at once:

User types in email
User types in the name
User types in the phone number
Presses submit
Gets few validation errors. He has to read them to understand what he has typed wrongly

It's clear that in the second case, we ask much more effort from him than in the first case.

Validation modes

One is the most important part of the validation process if when to trigger validation errors.

Here I love how vee-validate handles this: https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html.

So there are basically four modes:

Aggressive: Triggered when the user presses a key on input.
Passive: Triggered when the form is submitted.
Lazy: Triggered when the user leaves the input (on blur or change).
Eager: This is a combination of aggressive and lazy, as it first validates when the user leaves the input (on blur or change), then if the input is invalid, it will behave aggressively until the input is valid again, and it will go back to being lazy.

Now, let's consider these modes from the UX point of view.

Aggressive

This is one of the worst.

In this case, when the user has just started typing, you immediately validate the input. Which in 99% of cases leads to the error being shown.

But the user might actually know how to fill the input correctly. He can't do this instantly.

In most cases, I wouldn't recommend this approach.

Passive

This one is better.

In this case, you show validation errors when the user presses submit. I believe for simple forms that contain a couple of inputs it may be applicable.

But if you have a large form containing multiple inputs divided into different groups, don't use this mode.

Imagine the user has copied bank account information from a paper to the form, as well as email, password, random other fields. And then after submitting the form, he gets a dozen errors? Looks scary.

Lazy

In Lazy mode, the validation is triggered when the user leaves the input.

It is much less annoying than aggressive mode and, in my opinion, is pretty nice.

The user finished typing, decided that he has typed everything correctly, and then switched to the next input.

But this approach has one significant drawback. In case the user made a mistake and returned to the input to correct it, the validation will trigger only when he switches to the next input.

Imagine the user typed the wrong email, returned to the input to correct it, corrected it but hasn't yet switched to another input and still sees the error. That's not nice.

Eager

The eager mode is a combination of aggressive and lazy, as it first validates when the user leaves the input.

If the input is invalid, it will behave aggressively until the input is valid again and will go back to being lazy.

So, how it works:

User typed an email. While he was typing it, we do not validate his data
User switched to another input. If he made a mistake in an email, we show him an error (like in lazy mode) and turn the input in aggressive mode.
User returned to the email input and started fixing his mistake. As soon as he fixed the error, we remove the validation message. We don't wait till he leaves input as in lazy mode. We're in aggressive mode.
Now, the input in lazy mode again.

Looks pretty good.

Help your users to fill the form correctly

You should help your users to fill the form as much as you can. What can you do?

Break large forms into groups of inputs
Indicate which fields are required
Pre-fill inputs when possible
Provide masks when possible (e.g., phone number format, dates, etc.)
Provide hints. For example, when the user types in a password, which should have some complexity, you can always show the user how well he does.

Consider showing the user that he has filled an input correctly.

For tiny forms, like the login form, it might not be necessary. However, if the form is complex, it might be a good idea to show users right away that he's doing well.

Another example: you have a signup form. Your site is popular, so there is a high probability that the email is already taken.

The user has entered the email and switched to the password field. And nothing happened. He might be a bit worried if the email is taken or not.

To reduce possible stress, you can show right away if the email is acceptable or not.

Practical examples

I'm not that good at writing. Instead, I'd better show some examples of poorly designed validation forms I found on the Internet.

Facebook

Here is the Facebook signup form.

Apart from making labels inside inputs, which is generally considered a bad practice, Facebook also hid validation error messages under icons.

So to understand what I've done wrong, I need to click (not even hover) the icon.

Instead, it'd be better to show the messages explicitly.

Next, Facebook has special rules for user passwords. In case the user didn't follow the rules, he'll get the next error: "Enter a combination of at least six numbers, letters and punctuation marks (such as ! and &)."

However, it'd be better to show how the user is doing when he's typing the password. Something like this:

Steam

Let's check out Steam's register form:

Okay, so, a simple sign up form took the whole screen...🤔

Why not tell me that I've typed the wrong email as soon as I did this?
Why should I confirm the email address if, after submitting the form, you'll send me a verification link? It looks like I should verify my email twice for you?
All errors are placed at the top in a single message. It takes time for me to look up at the error alert and then figure out what fields are wrong.
"And find more errors highlighted below." Okay, you're a machine, why you require me to do the work of finding errors? Tell me right away. I understand that you highlighted the fields, but still...
By the way, you haven't highlighted the captcha

Name.com

Honestly, I got no idea what's the site is about. I've just typed in "create your account" on google, and it seems like it's a popular site :)

But it has quite a few validation errors.

So, let's take a look at the form.

Woah, your form looks really big. It's okay. Sometimes we have to ask the user a lot of questions. But again, why not show validation errors as soon as I've filled an input?

See, I've made so many mistakes: wrong phone number, wrong email, wrong zip code. After I click the submit button, you don't even bother to scroll me to the first invalid input!

By the way, this is awesome hint: if the user clicks submit and some inputs are wrong, scroll him to the first error! There are plenty of solutions:

https://github.com/logaretm/vee-validate/issues/2395
https://stackoverflow.com/questions/60870424/vuetify-vee-validate-scroll-to-the-first-validation-error

But back to the form. Here is a list of mistakes:

Show errors inline, as soon as the user has finished entering data in an input
Provide masks for phone number/zip code. If possible.
My own preference: I'd make the form more compact, way too large.

Good thing you show me how good I am at entering my password though!

Afterword

The main thing you should take from this article: always follow common sense. EVERY rule can be broke. There are really MANY circumstances which you should consider.

Your users are developers who are using vim for writing their essays? They use the console browser, maybe lynx? Oh well...

Or maybe your users are old citizens? Then make your inputs BIGGER. They might not have a good vision.

Or maybe your users are children? Then make your inputs colorful. They will entertain them!

Just think about who your users are and research how they might use your app.

Thank you, Victor

P.S. I tweet about UI/UX stuff from time to time https://twitter.com/vponamariov 😊