It’s important to respect what your user types. In 90% of scenarios, users are running on a happy autopilot (and they’ll definitely be typing the correct thing).
Consider the above scenario (Figure 1) — a user is in the process of keying in a correct email address, but the form tries to validate on key press. Why should the form throw an error message when the user is typing a correct address?
Avoid key-press validation for email, names, and contact numbers. Rather, validate them on blur or change.
For fields like password, validate the constraints on key press. Example: Your password constraint might include a lowercase, uppercase, number, and symbol. In such scenarios, highlight the user’s progress on key press. This will help them.
Throwing error messages while typing will usually shift the user’s focus from their input to the error block. Take care before you show an error message.
Preference highlighting the error messages nearer to the input fields rather than showing them at the top or bottom of the form.
If your form is too long, then it may be difficult for users to scroll and find out what went wrong.
While designing, consider people from different age groups. The elderly and people who are using your application for the first time might find it difficult to guess what went wrong.
For lesser than three fields, if the situation demands, it’s OK to show consolidated messages in one place. Make sure the error messages are within the user’s visibility.
Don’t wait for the user to complete the entire form to highlight what went wrong. Once the user moves out of a field, validate it, and show warnings or errors if necessary.
Why should we surprise the user in the end?
Figure 3 shows an example of how the form validates only when the user clicks Register. Until the last click, the user may not be aware of the errors they have committed. It’d be better if the form had validated on blur of the input.
When you save your validation errors till the user submits the form, it can be time consuming for the user to revisit and refill in the form. Also, depending on the value in one field, users might tend to change other fields as well. By delaying the validation, you are simply prolonging the form completion time.
When the user types again to correct his previous mistake, guide him. Don’t let the error stay until the user keys in a correct input.
When not cleared, the user will be confused about whether what he’s typing is right or wrong.
Users are always correct. Provide a gentle message rather than a strong one.
Icons are preferable to highlight what’s right and wrong. Again, use a gentle icon to highlight. Choose a warning icon over a cross icon to highlight errors. (See Figure 3 for an example of a warning icon.)
Save the user from committing an error by using appropriate input types.
Example: Use if you wish users to enter only numbers in a particular field. Do not use in the above case and then wait for the user to enter into the error zone. Be wise in choosing your input type.
Finally, always have buttons to clear, reset, and/or close the form. User freedom is important, and it shouldn’t be time consuming.
Thanks for reading !