Channels ▼

Making Mistakes Well

Imagine you're at Target and you ask for a mop. The clerk sends you to the electronics section. Or you go to Best Buy to fix a problem with your TV. The store's representative answers your concerns with arcane industry acronyms like MTS, PIP, INVAR, and SRS.

Unfortunately, these sorts of customer service failures are all too common online. A search for "mops" at actually does return a list of electronic appliances, but no mops. If you have problems at, the company will offer solutions with confusing acronyms.

Online or offline, it's impossible to be perfect. But while offline customers can appeal to an actual human being for help, frustrated online customers usually just give up.

That's why Web sites must learn to make mistakes well. By improving contingency design, online businesses can help customers recover from mishaps, while increasing conversion rates in the process.

Contingency Design Explained

Contingency design is design for when things go wrong. It's error messaging, graphic design, instructive text, information architecture, and customer service that helps visitors when a problem occurs. Yet no matter how much testing and quality assurance has gone into a Web site, customers will encounter problems. And, Web sites consistently fail their customers at crisis points.

Poor contingency design is directly linked to abandoned shopping carts. The Boston Consulting Group discovered that five of the top ten reasons for failed purchases are common contingency design problems. From mislabeled item availability to confusing form errors, customers who were otherwise satisfied with their online experience were driven away by sites that failed them during the checkout process.

By frustrating these customers during checkout, you may lose them for good. The same BCG study revealed that 41 percent of customers who experienced failed purchase attempts stopped shopping at problem sites. Only 9 percent of unsatisfied online shoppers visit the same site again, compared with 90 percent of satisfied shoppers (according to Forrester Research). These missed opportunities mean lower revenues and higher costs (lost customers increase a company's overall customer acquisition costs), which few online businesses can afford.

Common Mistake 1: Mistyped URL
A customer enters a URL for a page that no longer exists on the site.

click for larger version
click for larger version The customer is presented with a generic "Not Found" screen. does nothing to help users get back on track. Instead, they're left confused. The customer is presented with an apology, and the site provides two options for finding the page. The error page also provides a phone number and an email link so that users can notify of the problem. is doing all that it can to convert site visitors into customers.

Success Stories

Smart sites use efficient contingency design to improve site performance and satisfy customers. decided it could do more than just display the typical "out of stock" message for unavailable items. Instead, the site now presents an inventory alert feature that tells shoppers when an item will be available, offers to send email notification when the item arrives, and shows shoppers similar items that are available immediately. The conversion rate at is 11 percent, one of the highest among online apparel retailers. Site creators say that this sort of dedication to the customer is a major reason why. more than doubled the rate at which it converts site visitors into buyers by effectively planning for inaccurate search queries. Mistakenly enter "Kalvin Klein", for example, and the site still returns results for Calvin Klein. executives said that planning for this contingency has led to a big boost in the site's conversion rate. realizes that it's very easy to type an extra w, or to omit one from a Web address, so the company accounts for this common mistake. Type "" and you'll still get the Amazon home page. prevents fruitless attempts to pick a sign-in name by presenting available alternatives that closely match the registrant's original choice. If the username janewilson is taken, the site informs customers that janewilson5 is available.

Examples like Lands' End and Macy's demonstrate that planning for failure can result in clear improvements in usability and conversion rates. Amazon and Hotmail's methods show how sites can use preemptive measures to increase customer satisfaction.

Common Mistake 2: Mistyped Search Term
The customer is searching for a Farberware brand kitchen organizer, but mistakenly types "Faberware" into the search field.

click for larger version
click for larger version The customer is notified that the site is "having trouble locating a match" for the search term—even though (the online division of Kmart) does carry Farberware products. At least it provides some contextual help with a link to customer service (though the link is displayed far down the page). The search produces a list of items made by Farberware. Included in the list is the kitchen organizer that the customer was looking for!


So how can online businesses help customers in trouble? Here are just a few guidelines to help you plan for the worst:

Use language that your customers understand.
Stay away from obscure codes, abbreviations, technical jargon, or internal marketing terms that may be unfamiliar.

Don't make customers guess.
Explicitly tell them how to avoid repeating an error. If an input is rejected because it is too long, make sure you tell visitors what the maximum number of characters is.

Account for common mistakes.'s logs reveal that over 40,000 visitors mistakenly entered "Brittany Spears" as a search query. To help out these pop fans, the site offers this link on the resulting page: "Did you mean: Britney Spears?" (with the correct spelling).

Offer customized Page Not Found error pages.
Explain that the requested URL could not be found, and offer tips or links to help customers find the right page. If possible, also offer a search box to help customers locate the desired information.

Briefly and clearly explain what's happening.
Customers want to know what went wrong and how to fix it quickly. Don't make them read an essay when they're at a crisis point. Be brief.

Reduce the need for constant back-and-forth between pages.
Whenever possible, clearly display error messages on a page that lets customers fix the problem(s) without backtracking. If a visitor has to spend a significant amount of time figuring out how to correct a mistake, there's a good chance he or she will give up.

Make sure the browser's Back button works.
Many sites employ code that causes the browser's Back button to cease functioning properly. This disarming tactic traps visitors and practically begs them to give up.

Don't require registration to assist customers. When customers encounter a crisis point, they need help. This is not the time to give them a form to fill out.

Use bright colors, icons, and directions to highlight the problem.
If there's a problem spot (for example, a customer's phone number has too many digits), clearly identify it so it's easy for the customer to find. Red text, an error icon, and explanatory notes should all be used.

Common Mistake 3: Forgotten Form Field
A customer is making a purchase at a Web site for the first time. During registration, he or she misses a couple of required form fields.

click for larger version
click for larger version After the customer submits registration information, a new page notifies him or her of errors. To fix the mistakes, he or she has to click back to the registration page (which contains no indication of which fields need attention). This means that the customer has to remember what the error message said about resolving the problem. An increased workload for customers makes a bad situation even worse. The customer is notified of form omissions both at the top of the page and at the empty fields. To better assist the customer, the site presents the error message on a page where users can correct the error.

Small Changes, Dramatic Results

Contingency design is easy. Most fixes require a tweak or two, not a major overhaul. By planning for out-of-stock items, typos, and other common mistakes, you can have a large impact on how your customers respond to your site. These relatively minor changes yield immediate, tangible results—a potent formula for any online business that's looking to increase revenues quickly.

Matthew is a design and usability expert at 37signals ( For more information about contingency design, visit the 37signals project

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.