Summary: Help users recover from errors by clearly identifying the problems and allowing users to access and correct erroneous fields easily.
In This Article:
- Introduction
- 1. Aim for Inline Validation Whenever Possible
- 2. Indicate Successful Entry for Complex Fields
- 3. Keep Error Messages Next to Fields
- 4. Use Color to Differentiate Errors from Normal Field States
- 5. Add Iconography or Subtle Animation for Easy Scanning
- 6. Use Modals or Confirmation Dialogs Sparingly
- 7. Don’t Validate Fields Before Input is Complete
- 8. Don’t Use Validation Summaries as the Only Indication of an Error
- 9. Don’t Use Tooltips to Report Errors
- 10. Provide Extra Help for Repeated Errors
- Conclusion
Introduction
Forms are necessary components of many applications and websites. We use them to log in, purchase items, send feedback, and enter our personal information. Think about the websites you use and how many times you enter information: how often do you run into errors? How frustrating is it to navigate those errors?
Error messages are an indicator of system status: they let users know that a hurdle was encountered and give solutions to fix them. But in order for the error messages to be effective, people need to see them, understand them, and be able to act upon them easily. Visibility of system status is one of Jakob Nielsen’s 10 usability heuristics. It refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within reasonable time.
To err is human, and people will make mistakes when using software. An error flow is the sequence of steps that the user must go through in order to correct the error. A thoughtful error flow allows users to easily fix their mistakes and proceed with their tasks.
There are three main principles that should be followed when designing error-correction flows:
- The error message should be easy to notice and understand.
- The field(s) in error should be easy to locate.
- Users shouldn’t have to memorize the instructions for fixing the error.
These guidelines need little explanation: first, if users don’t know that there is a problem with their input, they won’t be able to fix it. Second, people shouldn’t have to hunt for the error through the form. And last but not least, they shouldn’t have to remember how to fix the problem while they’re fixing it: the instructions should be right in front of their eyes.
In this article, we discuss helpful guidelines for designing error flows.
1. Aim for Inline Validation Whenever Possible
Ideally, all validation should be inline: that is, as soon as the user has finished filling in a field, an indicator should appear nearby if the field contains an error. This type of error message is easily noticeable; moreover, fixing the error immediately after the field has been completed requires the least interaction cost for users: they don’t need to locate it or navigate to the field, nor do they have to switch context from a new field to return to an old field they thought they had completed successfully.
Of course, there will be situations where inline validation won’t be possible and data entered by the user will need to be sent to a server for verification.
2. Indicate Successful Entry for Complex Fields
Inline validation can also be used to indicate successful completion. For example, if your users must create a unique username, a green checkmark and a message that the username is available let users know they can proceed to the next step. Follow the error-prevention guidelines: offer suggestions for field values, constrain inputs to legal values, and be flexible by allowing for typos, abbreviations, or different input formats.
For complex input such as new passwords, instant inline validation (which appears as the field value is being typed) will prevent users from guessing or checking multiple times if what they’ve entered meets the guidelines set by the system. In the example below, the password-strength indicator changes as the user is typing and helps the user decide if the string entered so far is good enough or more characters need to be added.
However, don’t go overboard with success indicators. Success indicators shouldn’t distract users from filling out forms and should only be used when the additional context helps complete the form faster or more accurately. For example, you don’t need to show a success message when the only requirement on the field is that it is filled in, as that message won’t provide much additional context to your user.
3. Keep Error Messages Next to Fields
With inline validation, the error message is naturally shown next to the field causing the error. But even when the fields are not validated inline, it pays off to show an actionable error message below or next to the problem field in order to help the user fix the error. The message should follow error-message guidelines: it should be explicit, human-readable, polite, precise, and should give constructive advice.
Keeping error messages next to the fields in error minimizes working-memory load: users can see the error message while fixing the error instead of having to remember it.
4. Use Color to Differentiate Errors from Normal Field States
Red is the color that is associated most with errors, along with orange or yellow for warnings, and green or blue for success. Make sure that the color of the validation text stands out from the rest of the form so the user will notice it quickly. Add a semitransparent background of the same color to the error field to make it salient on a long page with many form fields.
5. Add Iconography or Subtle Animation for Easy Scanning
Together with color, an icon to the left of your error message or validation summary will draw attention to the error and also help users who are color blind. When the user scans the form, the icon will stand out and draw the eye to what needs to be fixed.
A subtle pulse or bounce animation on the icon corresponding to an error can further draw users’ attention to the error. However, don’t abuse animation: if there are multiple errors, many animated icons can be overwhelming. And don’t animate text — animated error messages are hard to read.
6. Use Modals or Confirmation Dialogs Sparingly
When you need to draw extra attention to a potential error, you can use a modal or confirmation dialog to explain details and help the user fix the issue. However, use such dialogs sparingly as they have two big disadvantages: (1) they are disruptive; (2) the error message is presented in a window that needs to be dismissed in order to fix the error, so any complex instructions will have to be stored in users’ working memory, thus increasing their cognitive load. They are, however, okay if the error message is simple or the form could still be submitted as it is.
7. Don’t Validate Fields Before Input is Complete
In most cases, avoid showing the error until the user has finished with the field and moved to the next field. It can be annoying to see an error message before being given the opportunity to finish typing.
8. Don’t Use Validation Summaries as the Only Indication of an Error
A validation summary is shown at the top of the form and lets users know that there are errors that need to be fixed on the page, whether those errors are in the viewport or below the fold. A validation summary can give the user a global understanding of all the errors in a form, but shouldn’t be used as the only form of error indication, as it forces the user to search for the field in error; moreover, the error message may no longer be present in the viewport when the user reaches the error field, thus forcing the user to memorize the error message while fixing the issue.
Tooltips are sometimes used to indicate errors. An alert icon is usually displayed next to the field(s) in error, and then, once users hover on the icon or move focus in that field, a tooltip or a toast containing the error message will appear.
Generally, we recommend against this method of signaling errors. First, some alert icons are hard to notice. Second, users may wonder what is wrong with the field, without realizing that they can actually see the error message if they take an extra step. Third, why make users work more (i.e., hover or move focus to field) in order to see the error message?
10. Provide Extra Help for Repeated Errors
If the same error occurs repeatedly (usually 3 times or more in a single form-filling attempt), it is often an indication of a serious problem in the user interface. Quite possibly, your error messages are insufficiently helpful, but there could also be another mismatch between the design and users’ needs. As always, remember that when users make errors, it’s not their fault. It’s your design that’s too error-prone.
We recommend reviewing analytics data for repeated errors and then reviewing (or testing) the design to try to improve it. A rewritten error message would often be the first thing to try.
As more of a band-aid solution, you can also show a link to more detailed help information or documentation after a user has made the same error too many times.
Conclusion
Error flows should be designed to help users fix the mistakes in a form and advise them how to avoid making more. Ensure that users can easily detect errors, understand how to fix them, and see the error message while correcting the corresponding error. Remove the guesswork and let users get on with their tasks.
