Input Error Message

Problem

Users have entered input that could not be validated and they must be prompted to correct the input

Solution

Tell the users that there is a problem and how to solve the problem. Also tell the users where the problem occurred.

From www.amazon.com


Use when

Users have are trying to fill in Form and one or more of the fields is syntactically invalid or missing. Usually, there two kinds of problems: a) the field has not been filled in at all, or b) the field contains data in the wrong format.

How

The error message that is given needs to tell the users:
  1. That an error has occurred. This is best done by displaying a colored box at the top of the page containing a "important notice". The notice must say what the problem is and that the users can repair the problem by going to the "problem"-field and changing the input.
  2. Where the error occurred. This is also done by stating the problem fields in the box at the top of the page in combination with a marking at the problem field itself. For example, the form widget can be colored as is done in the example above.
  3. How the error can be repaired. This is done by giving repair information next to the problem field. This information must be marked visually in order to stand out as being "help information". Usually, such help information tells to users about the correct syntax of the entry field.
Although giving good error messages is important, one should always assess if the problem can be prevented! For example, using Constraint Input is can sometimes be possible to prevent incorrect input.

Why

Obviously, users must be made aware of the fact that there is a problem. Doing this a the top of the page in a visual distinct box assures that users will see it. In addition, users must receive helpful information that will put them on track again. TO achieve that it is important to give help information near the problem field itself so that the "problem" and the "solution" are close to each-other.

More Examples

This example from www.vanguard.com shows a variation where a popup window is used to display the error message.



plml logo

Comments

5 comments have been added to this pattern


Greg Fields, 4th November 2007
Great information. If I can add to your content ...

The goal of the pattern is to improve the user experience by minimizing input errors. The objectives of the pattern is to (a) inform user that an error occurred during input, (b) notify user where the input error occurred, and (c) minimize the likelihood of a repeated input error. User experience plummets when users are notified multiple times that there were an input error.

To add to Martijn's point in his first example, the solution here is twofold:

(1) Notify user of error and prescribe correct information required for input at the beginning of the input form (as included in the first example image used above), and

(2) Provide users with an example of the correct information again at the applicable data entry field (Example - placing "Example: name@email.com" above or below the Email Address text entry box).

cheers,
Greg
Aoife, 25th February 2008
To add to this I would like to say that error messages have a large emotional impact on users. Any form of error messaging can cause stress. Therefore any way to minimise the impact of the error message should be found.

* Consider language (tone of voice, are you scolding a person whom you have never met?)

* visual presentation (red means danger, is this really a dangerous situation for the user?)

* location (consider flagging up the exact location on the page, especially on a page with a lot of scrolling. Visually connect the error and the error notification. Not doing this will add to the user's stress.)
Tales, 17th October 2008
If user turn off javascript, how the popup with feedback messages will open?
Geoff, 28th October 2010
Tales:
The short answer is "it doesn't".

However, it is possible to go the long way - the page can be submitted, checked by a program, and redisplayed to the user with the errors highlighted.

It takes longer to do this, but the result is the same.
Geoff, 28th October 2010
Re: Aoife

Regarding user stress and the colour red. Having developed several systems and having interacted with various levels of users, I can assure that "red" does not always mean "danger".

Red = Danger is one of several interpretations. Perhaps if you were in a car, yes, red would be intepreted as Danger. On a web page? Where is the danger?

Red is primarily used to significantly highlight sections of the page. See the example above where it draws your eye directly to the place of error.
Blaringly obvious? Yes. But, that's the point.

In a recent project, we found that the CA software did not highlight errors. No red. No nothing. Just throws a message up saying that there is an error. It is horrible.

For further reference, try a google search --> http://www.google.com.au/search?q=using+red+to+indicate+error

There's lots of references there.


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha