Category: General

Years ago I had a college professor tell me, “…the most successful people are those that communicate effectively under conflict.” I’ve held this mantra with me over the years, and feel strongly that this phrase applies just as much to developing web applications as it does when talking to a hostile client or handling those potential PR catastrophes. Many companies put contingency plans in place in the event that something goes wrong, allowing them to explore and prepare for any eventuality of worst-case scenarios.

You will read a lot of information about how to communicate your product and branding message on the web through marketing copy, sales promotions, and advertising campaigns. But what about when something goes wrong? What happens when a visitor to your site, or a user of your application reaches a dead-end? Do you just sit back and trust that they have the patience to figure out what went wrong? You are likely going to need a lot more than just a smiling face and a call to action button; you need to get them back on track, and do it quickly. The technique is called “Contingency Design” (a term made popular by 37Signals, I believe) and it involves thinking a bit pessimistically when theorizing that your user will immediately get from “Point A” to “Point B” without running into an issue.

For years even large corporations like Microsoft, Federal Express, Target, Amtrak, Ticketmaster, and Sony have had issues in dealing with online customers when conflicts arise. Historically, managers and decision-makers have pushed off the responsibility of communicating error scenarios to programmers. An endeavor I’ve always compared to asking a gun manufacturer to handle a hostage negotiation. They may have built the tools… but in the end someone is going to get hurt. That being said, whether you are a business professional or a web application developer it’s time to think about contingency design when working on your projects, and here are a few tips to get you started on the basics.

1. Just Be Nice

Often called the “Golden Rule”, the most important thing to always remember when something goes wrong is to just be nice. Start by changing the way you look at the people that are viewing your site and stop labeling them; they aren’t customers, they aren’t a use-case persona, they aren’t statistics; they are people. People like to be happy and when something goes wrong they don’t want to be accused of causing it. Be kind, use words like “we’re sorry”, “thank you”, and “please” to revitalize their experience. Avoid taking an accusatory tone when telling the user of an error using phrases like, “you missed,” “you forgot,” or “you didn’t,” that can point blame. It’s also a good practice to stay away from all capitalized letters in your error messages. All “caps” tends to give the reader the perception that you are speaking loudly or screaming at them and can be distracting when trying to calmly inform them of an error that needs resolving.

2. Make The Problem Clear and Consistent, Then Offer a Solution

It’s tough to get through a problem when you aren’t sure what the problem is. With that in mind, it’s important to always be clear when telling the user what the error is and always show the error messages in the same fashion.

To really make some of these points easy to understand, let’s take a look at a sample login form that we might find on any various website offering specific content to a “members only” group.

Image 1: An Example Login Form

Now using the rules that we’ve set-forth, if a user accidently tries to login using an incorrect username or password a clear and concise error message might look something like this:

Image 2: An Example Login With Conflict

All of our basic rules are here. We’ve first shown the error message in a way that makes it clear a problem exists, using the red color along with an exclamation point to grab our users attention. It is then up to us to make sure that we continue using this format for any other errors. Next we stated a clear problem, the username and password information that was entered didn’t seem to match anything on file. The user can now try their information again in case they made a typo, or they can click for help which could take them to a way to recover their forgotten information. Stay away from generic error messages such as “An error occurred while processing your request,” or that discuss overly technical material like “The connection to the database DB_FINANCE has timed out,” as it is rare that your users would be able to interpret them to solve their problem.

It’s also a good idea to give the user a “Plan B” in case all else fails that gives them a direct way to receive your attention. Providing a live chat, support email, or a toll-free number is a good way to show your users that you are happy to provide them the special attention they need when a problem arises that they are unable to solve on their own.

3. It’s a Brand, So Use It!

If you currently have a branded product or service that customers purchase from you, let the brand be used consistently throughout the web address to allow for easy guessing. This can assist your more tech-savvy users in finding the products or services they are looking for. Some great examples of this would be:

1. http://www.adobe.com/photoshop forwards users to the page to read more about Photoshop as well as purchase it. This works with the majority of their products.
2. http://www.microsoft.com/windows forwards users to all things having to do with versions of Microsoft’s Windows operating system.
3. http://www.apple.com/itunes takes the users to information and download instructions about Apple’s popular iTunes product.

One important thing to remember is to plan for people to incorrectly type the case of your product names. The iTunes product from Apple, Inc. capitalizes the T and lowercases the i when branding it’s product. However going to http://www.apple.com/itunes or http://www.apple.com/iTunes will take me to the same place. Apple, Inc. fails however to do this properly with their iPhone product (as of this writing). Spelling it exactly as the brand identifies with http://www.apple.com/iPhone will bring the user to an error, while http://www.apple.com/iphone brings the user to the correct page.

Essentially, help your users find their way easier by consistently allowing products to be seen by guessing the web address, it allows continued branding from the marketing end as well as being more efficiently pulled from the users visual memory when remembering the page they were previously visiting at your site. Lastly, don’t punish the user for using all lowercase or not spelling the product name exactly as you do, try to make sure all your site paths are not case sensitive.

4. Speak Their Language and Prepare for Typos

As the community of online users continues to increase their trust in commerce websites it becomes more important to get potential buyers to the products they are interested in. Unfortunately, the Internet has one major disadvantage to it’s brick-n-mortar retail store cousin, and that’s the ability to say, “I’m looking for a black hoodie with a picture of Time Square on it,” to a store employee offering assistance.

Online stores have search systems that allow you to type in keywords to make your search, however these search systems have a fundamental flaw; they aren’t human and are programmed to understand a product vocabulary as it is interpreted by the products vendor. Most of these searches will look through the name of the product and it’s description. If a product titled, “Black Sweatshirt with Hood” was available I might never know if I searched for “hoodie” the typical slang for such apparel.

So what do you do? When developing an online store it’s important to plan for administratively entered “meta data” keywords to describe the products that are also searched for when a user enters a word or two within your search box. This way when you create a new product, you can add its title, description, and some additional keywords related to it. Enter the slang, or commonly misspelled words within this area of your site allowing for more users to find the correct product they are looking for even if their search is flawed.

It’s important to mention too, however that planning for typos shouldn’t end at product searches. You should plan for common misspellings wherever possible, including the web address itself. As I recommended in my previous tip, it is important to continue brand and product names through the web address, and those too can contain spelling errors. For those of you more technical types, several products exist that allow for spell checking address paths on a web address (warning: some technical verbiage is coming). For sites being hosted on a Windows server running IIS consider looking into URLSpellcheck as for sites running Linux or UNIX based operating systems and Apache 1.3 or later, enable mod_speling (yes, there is only one “l”, it’s meant to be ironic) and use the CheckSpelling directive of “on.” Both of those products have their own documentation and own companies that support them, so it’s important that you research to judge the pros and cons of these various products and find the product that best fits your needs before jumping into a solution. Spell checking the web address takes a little bit of technical know-how, if you aren’t a technical person yourself you may want to contact your hosting company to look into options that might be available to you.

One last suggestion when it comes to planning for spelling errors. Have you ever been rushed going to a website only to find that you’ve entered only two w’s (such as ww. instead of www.)? Well, you’re not the only one. Top online retailer, Amazon, has planned for situations just like this. If any of their users attempt to go to http://ww.amazon.com by accident, they will quickly find themselves pointed to the right spot and redirected without a single sign that something went wrong. This of course is another option to consider when running a website and more information should be available to you by talking with your hosting company.

5. Create Results, Not Dead-Ends

No one wants to work for nothing, so don’t make your users do it either. If a user isn’t able to select an option on a search form because of another selection on the form, don’t make it an option. The last thing your users want to do is fill out a search form only to be told that have made an “invalid selection.” So, plain and simple, if they can’t do anything with it – it shouldn’t be there. Period.

It’s important to know however that this concept of creating results goes beyond just hiding things they can’t do. It’s important to give them as much ability to do business with you as possible. If the customer searches for a product but finds the product out of stock, don’t hide it in this case. Show them when you expect to have more in stock and allow them to sign up to receive a notification when that product has become available. You may even consider accepting pre-orders for the item that will be in stock shortly.

So in short, customers like the ability to communicate and buy the product they are interested in now. It’s hard enough to get a customer to press that “buy” button so there is no reason to stand in their way once the decision has been made. Always do what you can to minimize dead-end warnings or those “sorry, not in stock – please go to my competitor” scenarios.

To Err Is Human So Learn to Forgive Yourself

More then anything it’s important to know that you are not perfect. Even large companies have a hard time grasping their users’ behavior. A Lead Designer of Netflix, Inc. (the popular online movie rental outlet) has been quoted saying, “Predictions color our thinking. So, we continually make things up as we go along, keeping what works and throwing away what doesn’t. We’ve found that about 90% of it doesn’t work.”

Now all of us don’t have the resources that Netflix, Inc. has, but it is an important quote to remember when considering features that you might want to add to your website, don’t be upset if you don’t get it right the first few times. Test. Get Feedback. Rework. Test. Rinse. Repeat. Succeed. You get the idea.

Wrapping It Up

Contingency design, behavioral design, and other forms of user experience design are not always easy to grasp, but I hope I’ve been able to give you several basic tips to get you started. The key is always very simple, be on the side of your users, consider basic human behavioral needs, and your bottom line will grow from there.

As always, I’d love to hear the experiences you’ve had with your users when you’ve tested their behavior, used contingency design, or acted in favor of your user when developing a site feature – feel free to leave me a comment.