Anastasia Fischer wrote:
>I'm doing some research on effective ways to present error messages in web
>based apps... those generated when the user has missed a field, etc. Has
>anyone seen creative solutions?
One of my current projects is made up of high-volume IE5-based data entry
screens. I added a small, borderless horizontal frame (3 lines of text high)
to the bottom of the screen. It normally shows brief page-level help and has
a background color that complements the background color of the main frame.
When the user tabs out of a control, JS validates the input value. If the
user made an error, JS changes the bankground color of the help frame to a
light red color, displays a brief error message, and changes the label for
the control with the error to red. Errors in multiple fields are stacked in
the help frame.
This system allows the user to enter the remaining data without worrying or
even knowing about the error. The user can look up at the screen and note if
there are one or more errors but the user's data entry was not interrupted.
If the user returns to a control with an error, corrects it, and then tabs
out of it, the error will be cleared; the message will be removed from the
help frame and the label color changed back to black. If there are no other
remaining errors, the background color of the help frame will return to its
default color and the normal page-level help text will appear.
If the user chooses OK without clearing the errors, an alert box will appear
warning the user that the error fields shown in red must be corrected before
choosing OK again.
Note that we do not disable OK if there are errors, we show an alert after
OK was chosen. There are complex cross-field validation rules so I decided
to tell the user what was wrong when they chose OK instead of them having to
guess what was wrong because OK was disabled.