Five killer ways to use contingency

This article first appeared in issue 227 of .net magazine – the world's best-selling magazine for web designers and developers.

Way back in 2002, 37signals wrote a white paper about ‘Contingency Design’. Thousands of applications and websites have been built since then, but it’s still an important concept to keep in mind today.

Contingency design accepts the fact that anything you build will fail at some point and focuses on failing well. A failure may be the user’s fault, a system fault or something else entirely.

It doesn’t matter what caused it. What matters is that the person trying to use your site was unable to, resulting in frustration on their end and more than likely a lost customer. So, as people who build tools that will inevitably fail, we must focus on allowing them to fail well, so that we keep users on our sites and create satisfied customers.

Fail safe

What are some of the ways that we can use contingency design? A very basic one is the standard 404 page. Every website should have one, but a good one will help the user by offering a search form or alternate links similar to what may have been typed in. In any type of form, it’s helpful to provide clear error messages.

Also, if there are limitations on inputs (eg, all passwords must contain three numbers, two letters and a backwards J), explain what they are before the person fills out the form. If you have a search on your site, be sure to provide something more than just ‘No Results Found’. If they misspelled something, provide a list of similarly spelled results.

In short, we should empathise with our users and remember what it’s like when we use something and fail. We can use it as an opportunity to make a positive impression.

Five examples to check out

1. Harvest The sign-up page for the online invoicing/time tracking application Harvest gives nice clear error messages when you don’t enter the expected type of info into a form field.

2. Simple The sign-in form on the online banking website Simple uses common language and easily understandable messages to inform you of what’s wrong. They also sound like humans and are polite in their tone.

3. Stripe When you’re using the online payment processing application Stripe and encounter a section of functionality that you are using for the first time, they provide you with contextual help in the form of an actionable first step.

4. Foursquare On the sign-up form for the social location based ‘check-in’ application/ website Foursquare they have removed all distractions that could lead you away from completing the form itself.

5. Amazon The item search for the online shopping website Amazon quickly helps you get back on track if for some reason you don’t know how to spell the word velcro.

Discover 20 pro tips for mobile website design at our sister site, Creative Bloq.