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