Forms are one of the complex components that we must define as or User Experience. Forms are complex but often necessary in digital products.
We usually use the forms to log in, register, buy products in an Ecommerce, send comments or enter our personal information. On numerous occasions, when users execute this type of specific task, it generates great frustration due to errors and their poor handling and resolution.
Error messages in forms
Human beings often make mistakes. When it happens when using something we feel frustrated if we don’t understand what is the reason or the fact that precedes the error.
When users are performing the task of filling out a form, they want to do it without much effort or they will change their mind.
If there are errors while the task is running, both by the user and by the system, the users must understand what those errors are in order to correct them and send the form correctly filled out.
Error messages are an indicator of system status. It lets users know that one or more obstacles have been encountered and gives prompts to fix it.
For form error messages to be effective, people need to see them, understand them, and be able to act on them easily and simply.
It should be remembered that one of the rules of Jacob Nielsen’s is the visibility of the system. In other words, you have to communicate what is happening to users, even more so when it is an error.
According to Jacob Nielsen there are three points to take into account to show errors in a form:
- The error message should be easy to see and understand.
- The error field(s) should be easily located.
- Users should not have to memorize the way to fix the error in the form.
Guidelines and keys to show errors in forms
Taking into account the 3 basic points mentioned above, a series of guidelines and keys to display errors in forms.
1. Use online or field-by-field validation
Whenever possible it is better to use online or field-by-field validation. It is better to display the error in the form field when the user has finished filling in or completing that field. The error message should appear near the field.
2. Indicates correct data entry in complicated or complex fields
Inline validation can also be used to display a success message, such as when a username is requested in a registry and that username is free or unused. This type of validation allows users to continue executing the task of filling in the next form field.
For example, when entering the password in the registry and repeating the password. An online validation can be performed with information to show the security level of the password chosen by the user.
3. Keep error messages next to fields
Always keep error messages next to fields so that the user doesn’t have to remember the error message while troubleshooting. Having it visible always helps to solve it more quickly and easily.
4. Use the right color to show the errors and make it different from the field with normal status
Red is the color most associated with error messages on forms. Orange or yellow is used for warning. Green and sometimes blue are used for success.
5. Use Iconography or Subtle Micro-Animations to Help Users Recognize Errors in Fields
Along with color, an icon to the left of the error message helps draw the user’s attention. When the user views the form, the icon will make the error message in the form field stand out much more above the rest.
6. Use manners with caution and without abuse
You have to use them when it is due and without abusing. Fundamentally, they are disruptive and the error message is displayed in a window that must be closed in order to correct it. When closing the window, if the solution for the error is complex, we force the user to remember it since he cannot continue viewing it.
7. Do not validate the field until it is completely filled
Don’t show the error until the user is done with the field and has moved to the next field or no longer has focus on that field. It’s annoying to see an error message before you have a chance to finish typing.
8. Don’t just use validation summaries
These types of form error messages appear at the top or bottom of the page. As a general rule, they are displayed after the execution of the form submission action.
They are useful but should always be used, when possible, with field-by-field or inline validation.
9. Don’t use tooltips
The use of tooltips is not recommended neither those that appear when you place the mouse over an alert icon, nor those that appear in the field and disappear after a few seconds.
10. Provides additional help for repeating errors
If an error occurs 3 times or more in a single attempt to complete the form, it is likely that there is a serious problem with the interface. It may be because the error messages are not explicit, human-readable, accurate, or do not provide constructive advice to fix the error.
In these cases, providing a link to a help section is necessary.
Facebook Comments
Disqus