How to display error message on forms.
During a recent usability session, I came across to a form validation that displays the error message with a long sentence inside the form area with no indication to which field it was referring to. As a result, the user thought he made a mistake on the password field and retyped and resubmitted. When the same error message re-appeared, this time he read the long 2 lines of error messages and finally typed the user name the way it was asked.
Error message display: confusing to user
So the question is how can you display error messages so that user can understand easyly what mistakes they have made? Here are few examples to do that:
- Try to make the error messages short, precise and clear. Remember, the more you write, there is a higher chance of ignoring the message!
- If the form is short (e.g. 4-5 fields), you can provide the error message(s) at the top of the form. If the form is very long, try to provide the error message just before the field where they have made mistake, aligned with the field.
- Use a different font color/size to specify that this is an error message!
- Always try to give some graphical treatement to the field on which they have made the mistake. For example, changing the background of the field or making the border highlighted should do the job.
Here is an example display the error message properly on the previous form:
Proper way of displaying error message on a form
Here is the html file to download.
Tags: error message display, Form design, form error message
Nice example.
I agree with your advice, mostly. But I’d just slightly expand point 2, to say: “If the form is long, then put the error message at the top but also put the error message just before the field where they have made mistake, aligned with the field”.
I’ve seen forms that only put the error message just before the field with nothing at the top - and start the user at the top. So the poor user has no idea why the page has come back.
(I suspect that this is what you meant, in fact, but hope you’ll agree with the clarification).
Best
Caroline Jarrett
http://www.formsthatwork.com
I do agree with this. However, there is a possibility of overwhelming the users with saying the same thing multiple times.
To avoid doing so, an option might be to provide the error message at the top and then give an example (with the same style as the error message) just before the field.
Thanks
Tasin