On the web, errors are seemingly inevitable, and there are plenty of best practices for minimizing their negative effects. But what if we treated errors as an opportunity? What if we deliberately designed our customers’ error experience—not just for basic usability and clarity, but with conversion in mind?

In this article I’ll take a look at the concept of error experience design, why it’s important from a business perspective, and a few ways to turn an error into a conversion opportunity.

Why focus on errors?

I have to admit that part of my motivation here is purely selfish, as usual. I, personally, want a better, more enjoyable web experience. And errors, as the myriad stinging gnats of the web environment, should be made better so I can be happier. Simple as that.

I’m tired of seeing ugly, unfriendly errors like this one:

Error IE Cannot Display This Page

Or this one:

Platform Software Error

Or even this one, which got a chuckle out of me when, at first glance, I thought it read, “Bad, bad server!”:

Bad Server- Polish Server Error Message

I do want to see more well-design error displays like this one:

Error-Pandora Login Failed

And this one:

iStockPhoto Error Page

But personal desires aside, there’s a serious business aspect to this as well: errors cost money, and poorly-handled errors cost even more money. A poorly designed error experience compounds whatever damage has already been inflicted. I’ll call it the “rude saleslady effect.” You know the one I mean—she screws up your order, then instead of apologizing she snorts disdainfully and mutters at you under her breath. Her rudeness helps cement your negative feelings in place, thereby reducing the likelihood that you’ll ever patronize that particular 7-Eleven again.

While not every error can be anticipated and prevented, we can mitigate the damage and even reverse it, with optimized error content and visual design. Let’s look a bit more closely at both aspects.

Getting the content right

As I was doing research for this article, I was happy to find a ton of best practices for writing error messages. Even if they aren’t followed nearly as often as I’d like. I’ve linked to several of these resources at the end of this article, but here’s my own take on error message guidelines, from the perspective of visitor questions.

Sandra's Error Message Optimization Guidelines

We believe what we see

There’s quite a bit less written about the strictly visual aspect of an error display. Which is a little surprising to me, given the potential influence of graphic details.

One of my guilty pleasures is the show Lie to Me, which is all about solving crime with small details—specifically, by interpreting minuscule changes in a person’s face and body language. “Aha! You’re lying to me right now, aren’t you?” is a common line. What fascinates me about this show is the underlying concept that even very small visual changes can communicate volumes of information. A tiny twitch of the mouth, and BAM! You’re nailed for murder.

With much less drama attached, the same basic principle applies to error experience design—small visual details add up. If we wish to soothe, inform and guide our visitors after an error, then let’s do it graphically as well as textually.

Here are a few examples.

Example 1: An enterprise site’s error template

While we were reviewing analytics reports for a recent conversion optimization project, we noticed that 1.1% of all page views were of one particular error template, one that was used for a wide variety of error messages.

Now, 1.1% of page views might not sound like a big deal, but for this heavily trafficked site that small percentage scaled to over 41,000 views a month, on average:

Views of Error Template

To make matters worse, those 41,000 views a month were of this poorly-optimized error template:

Error Template

From an IT perspective, this is a great template. It’s lightweight and functional. It dutifully and dynamically reports out on the type of error, when it happened and some unique string identifiers. All highly important and useful to the site developers, but nearly incomprehensible to site visitors looking for a vacation. Aside from a single text link to the site’s home page and a phone number included only because it was part of the master CMS template, there’s no attempt to soothe, inform, or guide the potential customer.

Because of the sheer volume of views this template received, it ended up fairly high on our list of conversion recommendations. We also mocked up a rough design direction to make it easier to explain and discuss with the client:

Error Template - a suggested direction

Here’s a quick breakdown of what this mockup is meant to do:

Soothe: A positive image (but one that’s not too exuberant) sets a calm, pleasant tone. It’s a simple step, but one that can influence your visitor’s mood and help them be more receptive to your explanation.

Inform: Large, clear text calls attention, identifies what happened, takes responsibility and offers an apology.

Guide: Several “next steps” links are listed. These are given their own heading and a buffered space on the page, so they stand out clearly. Additional text encouraging a phone call is included below, again in a buffered space.

Technical: a client requirement was to retain the technical information display. So we visually de-emphasized it by shifting it just below the main display area and reducing the size and contrast of the text.

Example 2: Comparing 404 Page Not found errors

USA Today 404 Error Page: Page Not Found - USAToday

While not the worst 404 error page I’ve seen by a long shot, this page has received only minimal attention. The effect is somewhat dismissive, as in, “We provide tons of links in the CMS template, why bother with anything else?” It does the basics, but that’s it.

Time 404 Error Page: Page Not Found - Time.com

This page introduces an intriguing conversion optimization idea: Monetize errors with an ad. While I’d normally cringe at the thought of putting an ad on an error page, this one is handled well. Here’s what makes it workable:

  • The content is well-written and clear
  • There’s plenty of room between the content and the ad, so the ad doesn’t overwhelm the error content.
  • There are several clear and helpful paths a visitor can take, each with its own buffered space to help separate them from each other.

HP.com 404 Error Page:

Page Not Found - HP

This example does a great job (full disclosure: we consulted on the project) of balancing the needs of SEO, users and business. The content informs and guides, while the visual layout emphasizes the desired conversion paths: a search box and a set of keyword-rich links to prioritized product categories.

Questions I still have

While it’s fun and rewarding to analyze and design error experiences, I’m left with a number of larger questions I’d like to explore in a later article. For example:

Question 1: Who should be responsible for designing the error experience?

In most organizations, error handling is the responsibility of IT. Errors are often not part of the design process, and therefore aren’t given attention by copywriters, marketers or UX designers. How can we fix this?

Question 2: How do we prioritize error experience design?

Errors can cost businesses revenue (both current and future), reputation loss, etc. But not every error is equal, and unless we can assign a dollar figure to at least each category of error we won’t know for certain how to prioritize efforts to optimize them. Which brings us to the next question:

Question 3: How do we track errors in a way that’s meaningful to business?

Most CMS and e-commerce platforms aren’t set up to report on errors, much less tie them to a dollar figure. Would a simple approach such as segmenting analytics stats by error events (or error page views) provide enough actionable intelligence?

I’ll leave you to mull on those questions, and would love to hear any thoughts you might have on any of them.

Resource links:

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: Analytics | Search & Conversion

Sponsored


About The Author: is co-author of the popular book Web Design for ROI and VP UX of Closed Loop Marketing, an online marketing agency that's been making websites more profitable since 2001.

Connect with the author via: Email



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.closed-loop-marketing.com Sandra Niehaus

    Note: the missing Error Message Guidelines I reference are here: http://www.flickr.com/photos/23148333@N06/4814291182/ (soon to be fixed).

  • http://KJ KJ

    I too would like to see more imaginative error pages. I think you’re more likely to remember the site.

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide