Everyone makes mistakes. This, of course, also occurs when we write. Whether it’s due to ignorance, haste, or a wrong keystroke, mistakes happen. It’s precisely because of the frequency of errors that feedback on how to resolve them should be obvious and clear.
The key elements are clear visual elements, clear communication. Like everything in design, the display of errors should be clear.
1. The input field in its default state
Until text is entered, the input field should obviously be left in its default state. This means that validation is performed only after text has been entered.
There are two correct options for performing validation. When the user changes the field (proceeds to the next step of filling out the form) or when an attempt is made to submit the form.
It certainly shouldn’t be checked every time a character is entered into a field. If you set the format this way, all fields will show an error until valid text is entered.
2. Allow the user to enter information
Going back to the point above, if you interrupt your users at every character they enter to show them that they’ve made a mistake in the field, they won’t be able to enter anything. And their willingness to do so will probably decrease dramatically. Especially for the email address field, where before “@domain.com”, the system will treat everything as an error.
3. Show an error when leaving the field
After the user has left the field, it is not a bad time to demonstrate that the information they entered does not correspond to what was expected. It is possible that they entered their email in the phone field or simply missed the period between domain and com.
In case an error was made during the input, tell the user what error they made. Of course, this cannot be done for absolutely every error, but some more general forms of feedback are suitable. For example, “the field accepts only numbers” when a letter is entered in the phone number field. Another more general signal would be “Please enter an existing phone number” if the number entered is greater than or less than the standard number for phone numbers. In Bulgaria, phones have 10 digits if they are written with a – in front and 12 if 359 is written instead of 0.
4. Resetting
When the user enters the information again, hopefully correctly this time, the error message should disappear. In case they made a mistake again, simply inform them of it.
The process is, of course, repeated until all errors are cleared and the user can continue.
