Form Design: input error message
The Design Need:
When the user needs to be made aware of an input error when entering data in a form.
Design Examples:
Design Solution:
Tell the user what went wrong and how to solve the problem. An error is best indicated visually as well as in text. When designing an input error message, you should pay attention to:
- Making the error message stand out visually from the rest of the form
- Showing the user where the error occurred. Present the error message in context
- If possible, providing inline validation, especially with data that is very error-prone. This way users are pointed to errors when they are entering the data
- Avoiding input errors by using smart defaults, showing data formats if needed and inline help (link).
Communicate errors correctly
- A good error message contains:
- An explicit indication that something went wrong
- A description of the problem that occurred
- Constructive advice on how to solve the problem.
- Use polite phrasing when you write the error message.
- Do not blame the user.
When to use:
When an error has occurred while a user filled out a form or an input field.
Why use this solution (rationale):
Filling out forms can be a difficult task during which interpretation, spelling and typing errors are likely to happen. By creating well-designed forms that try to avoid errors, input errors can be limited to an absolute minimum. If something does go wrong, users need to know what happened and what they can do to solve the problem.
More info elsewhere:
- “Web form design in the wild part 1” on www.uie.com
- “Web forn design in the wild part 2” on www.uie.com
- Input error message design pattern on www.welie.com
- Input feedback design pattern on www.ui-patterns.com
- Same page error messages design pattern on http://quince.infragistics.com
