Conversion Optimization Touch Points: Turning Errors Into Opportunities, Part 1

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:

Or this one:

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

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

And this one:

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.

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:

To make matters worse, those 41,000 views a month were of this poorly-optimized 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:

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:

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:

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:

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:

• An interesting case study of the financial return of improved error messages: https://www.thinkflowinteractive.com/2009/02/16/250000-from-better-error-messages/
• Microsoft Windows’ error message guidelines: https://msdn.microsoft.com/en-us/library/ms679325
• Jakob Nielsen’s error message guidelines: https://www.useit.com/alertbox/20010624.html