Thursday, December 20, 2012

The Dubious Waves of Error


From the customer’s point of view, an error message is a crisis.  When you’re hit by an error on a website, you’re in trouble – by definition.   To make things worse, the message can be so cryptic it stops you dead.  A  poorly-designed error message drives you to a competitor’s site, on the phone with the call center, back to paper-based processes, or just giving up.

Don’t let this happen to your users!  It’ll take work, but make the effort to establish consistent and effective messages and standards for your websites.  The end result should be simple; the error message tells your visitors what went wrong, helps them over any barriers, and lets them get on with their business.


Error Messages Defined
Errors are any messages to the end user that state or imply that an interactive process can’t go forward.  This goes beyond dialog boxes (and by the way DON’T let your messages look like the example below).  Error messages include notes on forms (required fields are not filled out, or entered values are incorrect), alerts (a service outage is coming that will affect visitors), and, of course, dialogs for web applications (a backend service you rely on is not available).


All the messages a user might encounter while on your site should be considered “your” errors, regardless of whether generated from your system, your identity/management (login) vendor, your payment partner, the HR department at your firm, or whatever other user-facing systems and silos you integrate with.

Challenge Alert:  Your problem is larger than you thought.  In addition to fixing your own, you need to establish standards with your partners, or select partners who  already follow the same customer-first messaging standards you do.  This recommendation will be extremely difficult to carry out. However, when you succeed, you’ll be in the same league as the best customer service providers on the planet.

Tenets of Excellent Error Messages
As a general principle, and as always in designing interfaces, do the hard work to make it easier for the user.  Good error messages do three things:

Make it clear there’s a problem, and why.

  • Make the error message noticeable at a glance.
  • Explain in plain language that an error happened, and what the error is.
  • If you really can’t tell them what’s wrong, don’t obfuscate. Confess.

Help the visitor successfully recover with a minimum of effort.

  • Explain in plain language how the visitor can recover.
  • Place the message on the screen in a place that facilitates the visitor taking action.
  • Don’t force visitors to retype data they’ve already entered correctly.
  • If you can’t help, say so. Don’t send people on a wild goose chase to customer service.

Remain consistent in tone, style, and delivery across the site.

  • Use the same visual hierarchy for all error messages.
  • Use a consistent editorial style to write all error messages.
  • Apply the same interaction design to errors that you use for other interactive elements.

Building Better Error Messages for eBenefits
Our user experience team is tackling the challenges of improving error messaging on an important Veteran-facing website, the eBenefits portal (Department of Veterans Affairs and Department of Defense).  The portal is an enterprise-wide effort involving multiple internal partners, development teams, and services.  So our approach includes developing content, visual, and coding standards for everyone, and helping everyone to apply them.  We created an Editorial Style Guide with specific techniques for writing error messages.  We put together a Visual Style Guide that describes, for instance, how to apply the portal’s treatment of headers, typography, and content to make the error message area obvious and its components easy to scan.  And we have a Partner Integration guide that shows how to code the front end for clear and consistent messaging. 

The example below shows an online form with several types of in-line error messaging patterns that apply when the user submits the form with empty or invalid field entries.  The first element is a tool tip activated by mousing over an item.  The other elements highlight empty or invalid field labels and text boxes and demonstrate messaging around them. 



Here’s how this example encompasses the 3 keys we’ve talked about.  It makes it clear there’s a problem. Through visual placement,hierarchy, and color, this form makes it obvious when something is wrong. It helps the visitor recover. The messages are written clearly, and the steps to move forward are spelled out. Where possible, there are suggestions on what the correct field values might be. And it’s consistent.  From content through visual design to interaction design, the style remains the same for messages and for every other element of the portal.

For More Information
There are several great resources out there on the topic of crafting great error messages for the web. We suggest you check out the following for more information.
  • U.S. Government Plain Language Guidelines, www.plainlanguage.gov
  • Defensive Design for the Web, Matthew Linderman, New Riders, 2004 
  • Usability Engineering, Jakob Nielsen, Morgan Kaufmann, 1993



No comments:

Post a Comment