seen + learned

Error messaging – avoiding visual spankings

Posted: Friday, October 11, 2013 | Posted by Debby Levinson | Labels: , , , 0 comments

Error messaging is visual discipline. It has to walk a fine line: drawing attention to problems without doing more harm than good. Designing effective error display is about more than providing clearly worded messages describing what went wrong and how to fix the problem; it's an opportunity to express the voice of the system, and show your app's personality. Successful error messages combine wording and design to be noticeable, actionable, and appropriately expressive.

WordPress.com CSS warning message
When the user rolls over a warning symbol in wordpress.com's CSS panel, the software provides a polite, in-context warning about thoughtful use of the !important declaration to force a style override.

Converse error messaging
Error messaging from an older version of Converse's custom shoe-design application is playful and whimsical, in keeping with the funky, independent personality of their brand.

How do you know when you have too much error messaging, or that your messaging is too strong? Is it this?
Orbitz error message
Orbitz's flight search interface

Or these form errors?
Qualtrics survey error message
Qualtrics survey error message

Yelp! signup error
Yelp! signup error

And surely it's this:
SuperTracker limits exceeded
USDA SuperTracker food- and fitness-tracking application warnings displayed if a user exceeds daily limits for calories, fats, and sodium.

Color, a critical part of a site's visual language, is often tied to error messaging interface patterns. Using red for errors makes sense conceptually; an error is the right place to take advantage of contrast to attract the eye. However, use of this pattern can be heavy-handed and jarring, interrupting an application’s personality. Too much contrast in a warning that isn’t life-threatening or data-erasing can feel like a “visual spanking” – like the two form error screens, or SuperTracker's alert that a user has exceeded daily calorie, fat, and sodium limits. Calling so much attention to an error overwhelms the design and tells the user, "You've been very naughty. Go sit in a corner and think about what you've done."

Instead of overusing red, consider a small amount of a different contrasting hue to draw the eye, or a pale tint for your message instead of a solid, saturated color. In an urgent situation, such as a hospital setting, two levels of contrast, such as a light background tint and contrasting text style, may be necessary.

form error message
Polite error messaging on a login form

Your goal is the visual equivalent of a polite tap on the shoulder to provide guidance and redirection – not a spanking.