Errors and bad error messages are huge causes of frustration for users of software applications and websites. Designing with the following guidelines in mind can minimize the number of errors that users experience and help them recover more quickly and easily.
Reduce the number of errors that users can make
- Label buttons with meaningful terms that describe the specific actions users can take. Consider other words besides just “OK” and “Cancel”.
- Indicate required fields in a form or table.
- Discourage users from entering invalid values. When possible, provide users with a list of choices instead of a text box. Provide default values for fields where you know the most common, or most likely, choice.
- Provide a calendar with valid dates next to a date entry field. In applications or sites where effective dates are an issue, the calendar can prevent the user from selecting invalid dates.
- Provide examples next to fields that may require some explanation. For example,

Provide helpful and usable error messages for recovery
- All error messages should contain 2 parts:
- a description of the problem
- what the user needs to do to fix it
- Error messages should be written in the user’s language and should be easy to understand.
- Error messages should be concise. They do not need to include full sentences or the word “please”.
- Error messages should be consistent in look and behavior. They should have a specified style to enhance predictability and professionalism of the site or application.
- Error messages in a form can be red, but they also should have a secondary visual cue for color-blind users. One example is to use red, bold text. Icons can be used in addition to text to call out errors.
- In long forms, field-level error messages should appear both at the top of the page in a summary and within the page, next to the fields with errors. This helps users find errors quickly.
- Error messages should validate all errors on a screen at once. To the extent possible, users should not have to fix a problem, re-select Save or Submit, then receive more error messages.
- Error messages should be displayed in context, not shown as pop-ups. Especially in the case of missing or incorrect data in forms, keeping the errors within the page provides the users with context for the errors where and when they need it.
- Error messages should not make the user feel stupid. Ensure that language is not accusatory or blaming.
Examples of error messages
Example 1
Selecting "More Info" adds the line of text "Unable to contact Technical Support for further information." The circular logic of the buttons is guaranteed to increase user frustration.
Example 2
This breaks one of the cardinal rules. The error message does not provide enough information about the error, and it provides no information on what the user needs to do to prevent it from happening again. This type of error is far too common!
Example 3
This error message is good. It clearly calls attention to suspected problems and recommends courses of action to the user (i.e., fix the problems online or call Customer Service for help).
|