🚨

Showing input error

We get things wrong all the time when typing - whether it's a finger slipping or rushing through letters, errors happen. So for an everyday occurrence, solving an error should be obvious and seamless.

A key way to making that happen is with strong visual representation, clear communication and state changes. Be sure to explain what's going on, what you need the user to do, and when the situation is resolved.

Steps

Each part of the user experience to consider.
1

Keep the input in default state

The field should stay in default before entry, and only be checked for validation after information has been entered.

2

Allow user to enter information

Let the user type without interruptions aka don't validate live. Let them feel they have completed their entry, and then after losing focus...

3

Signal error after loss of focus

After the input has lost focus, by either changing to another field or clicking a button/link, you may validate.

Clearly explain why the error happened, and what is required to resolve it. Also consider an icon with your error message for colour-blind users.

4

Change to default upon reattempt

Once the user focuses on the field again, the error message should disappear, as they change their value.

5

Continue!

Looks good this time, and we let them continue.