Same Page Error Messages

Problem

It can be difficult to understand and keep track of error messages and what to do when you get them.

Solution

Place error messages as close as possible to whatever the user needs to interact with to get rid of the error.

Context

You need to present errors to users based on input data.

Rationale

Placing error messages close to what caused the error, or close to the area that a user will need to interact with to get rid of the error makes it easier to notice and deal with errors. This becomes even more useful when multiple errors occur at once; in many cases users are told there are multiple errors, but not what to do about each one, and whether or not they are related. Your goal should be to help users get rid of any errors as easily as possible, not just announcing to them that errors exist.

In many cases the error message may contain information that will be helpful to the user when trying to reenter data; therefore it can only help the user to be able to see the error message when actually trying to reenter data. Keep in mind though that maybe this helpful information provided as part of the error message should have been present in the first place, for example as a tool tip, a hint in the data field itself, or a small bit of text near the data field. Providing this type of information up front can help prevent errors from occurring.

Implementation

Filling out forms and other sets of input fields can be confusing for users, especially when they are not familiar with the information, and what constraints exist for data that is to be entered (e.g. rules for passwords). Your goal is to make it as easy as possible for a user to fill out the form. Try using patterns such as Drop Down Chooser, Text Field Autocompletion, Input Hints, Input Prompt, or Forgiving Format to help the user easily understand what to enter which will help avoid errors in the first place. In addition, make sure to specify which fields are required, as this is a common source of errors.

When errors do occur, at the top of the page or screen let the user know that errors have occurred. Use font treatments such as color (e.g. red) and weight (e.g. large, bold) to make the message stand out. Because many people may have problems with noticing color differences, do not use color as the only indicator.

Now that you have alerted the user that errors exist, make sure to indicate each error close to the related input fields or UI controls. Try to provide a brief error message that clearly explains the issue, and that provides information that will help the user to enter appropriate data. If space is tight or the layout cannot be changed for additional error messages, you can use an icon with an associated hover over tip next to the field, as shown below.

 

This type of hover over tip still doesn’t give the user information while they are entering data, because the message is only visible during the hover. Therefore, if possible make the error message visible while the user needs it, such as when the user places the cursor in the field, and while typing into the field, as shown below.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Same Page Error Messages pattern can be implemented using combination of ASP.NET editor controls and regular ASP.NET validators. Check out the samples browser to see it in action.

Silverlight

The NetAdvantage for Silverlight xamWebMaskedEditor or xamWebNumericEditor support the Silverlight 3 validation framework capabilities to enable this pattern. The xamWebGrid also supports the use of the validation framework within its inline editing feature.

Windows Forms

You can use the NetAdvantage for Windows Forms WinValidator control to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinValidatorto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamEditor’s support for Value Constraints. You can find a sample on the Infragistics Community site here.

 

Sources

Jennifer Tidwell, Designing Interfaces

UC Berkeley Web Patterns, Form Validation

Patterns In Interaction Design, Input Error Message

Tags

Data Entry, Form.