(1) Make error messages easy to understand and distinguishable from other
text on the delivery unit.
Applies to:
Guideline 2.5 Level 2, SC 1
Applicability:
This technique applies to interactive environments where there user has made
an error.
Task:
Making error messages recognizable and understandable
Testable Statement:
When this task is completed error messages can be recognized and understood.
Description:
- Display a list of all error messages in a prominent place such as near the
top of the delivery unit.
- Use the heading "Errors" (or similar distinguishing message) above the
list of errors.
- Be specific about errors in form submissions.
-
- Example 1: poor error message on a credit card form
It
would not be good to give an error message such as: "fields missing". This would
leave the user searching for the missing fields which may be difficult for some
users.
- Example 2: good message on a credit card form
an informative
error is given such as "you have entered too many digits in the credit card
field" or "your entry does not appear to be a valid email address"
- Use plain language when reporting errors. Avoid jargon or messages that
are easy for the programmer to understand but not for the user.
Example 3: an unclear error message for a missing first name
"fname missing"
Example 4: a clear error message for a missing first name
"First name is a required field."
- In addition to listed errors near the top of the document place an error message near each field that contains an error. This
will help the user find errors as they move through the document.
Ways to further distinguish error messages (in addition to those above):
- consider making the text of error messages larger than the normal text size.
- consider bolding the error message.
- consider using a different color. (Note: do not use color alone to distinguish text)
Resources:
HTML
CSS