Passive aggressive UI?

Hi there! 👋

It's Victor, and today we will finish our talk about validation by very subtle moment you should be aware of.

If you haven’t read two previous issues, here you go:

• Part I
• Part II

So far we covered:

• How to compose error messages
• Where to display them
• How to help users to fill your forms without mistakes

But we haven’t talked about at what moment should we display validation errors if we have to do it.

There are four different models of behavior, and only one of them is the best one (usually).

Attention: there are 4 gifs below, so if you cannot see them it might be because of the slow internet connection

Agressive mode 😡
Triggered when the user presses a key.

Poor UX, because the user might not have finished inputting his data but the error is already thrown.

Lazy mode 😌
Triggered when the user leaves the input. 

Looks better, but it triggered ONLY when the user leaves the input. 

If he made a mistake, and then returned back to the input and fixed it, it'll still be red until he leaves the input.

Passive mode 😐
Triggered when the form is submitted.

Poor UX, especially for big forms. Imagine the user filled 10 inputs with incorrect data and you throw 10 errors at once…

Eager mode 🤩
It is a combination of aggressive and lazy. 

It first validates when the user leaves the input, then if the input is invalid it will behave aggressively until the input is valid again and it will go back to being lazy.

This is probably one of the best solutions.

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