By Aimee Sanderson
September 20, 2011
Web Design
Your site will break. It may just be a small html error on a static page, or your checkout page will start spitting out 404 errors. Something, somewhere, will break. And users will see this. In answer to this inevitable fact, defensive web design will minimise damage, and keep your audience on track.
Defensive web design (or contingency web design) is about intuitively responding to things going wrong on a site. Intuitively, because good defensive design will have the answer to a question as the user thinks of it. Help text pops up, error messages explain what went wrong and users are put back on track before they can think about adding to your bounce rate.
The reach of the design includes server and user errors, code bugs and navigation oversights. It's about making the wrong right and keeping the user on the site.
Why is this important?
Planning for failure is essential to keeping users happy and making repeat visits. It’s simple customer service. A cost benefit analysis speaks volumes:
By keeping people happy on your site you:
- Increase their engagement or spend if you are selling a product or service
e.g. if you are losing 80% of people between shopping cart and checkout pages, altering the workflow to change that loss to 75% will increase your sales by 25%
- You are more likely to increase repeat visits - 90% of people expect to return to a site after a happy experience versus 9% for an unhappy experience1.
So what are we talking about?
The majority of defensive design is common sense and a skim over for the average web designer. For the 101, here is our ‘must have’ list:
- Great copy: your copy needs to tell your user what they need to know, and no more. Users going off path can stop here.
- Good landing pages: find out where your users are entering your site and make sure they have the right navigation on them.
- Fix common spelling errors: have additional URL’s and other common misspellings in your keyword meta tags and search engine meta tags. It’s no coincidence google own the rights to gooogle.com.
- Frequent analysis of exit and entrance pages: analyse your user journey, are they going where they need to or giving up? Fix the little things, a spelling error from a referring site can mean costly hits being missed for you, and back buttons being pressed.
Defensive web design isn’t about attracting new users, your SEO should do that. But it will improve the user experience for those on your site and increase your reach and/or your sales. If a man walks into a bar and orders a beer, he should receive a beer and be charged. If it gets more complicated than that, eventually the man will find a new bar.
We’ve outlined five main areas below which depending on your sites purpose, are essential for defensive design.
- Error pages
- Help messages and functions
- Form validation
- Just plain losing people (especially in eCommerce)
- Browser/device type and connection speed
Error messages
404 forever
A man walks in to a bar to order a beer, the bartender give him an empty glass. And the page below sure isn’t helping.
There is nothing more depressing then a standard 404 error page. Users should be protected by server errors and broken links with informative error pages that can place them back on track.
404 pages should be customised, branded and give the user navigation options. At minimum contact details, a homepage link and a simple ‘oops, page not found’ will suffice. Ensure that the back button works from your error pages.
Here’s our 404 page for Ring Master Images. It gives them a link back to home, explains what is happening and lets them know they’re still on the site. You can view a range of creative 404 pages here.
We need to see why error pages are being seen and why. Some good tips:
- Place tracking code in your 404 error messages, placing some goals around this in Google Analytics will begin to show you what is going wrong
- Use the 404 error code, do not redirect as this may have search engines index at a variety of URL’s. Not what you want at all. Use the 404.
Another option is to use Google’s Webmaster Tools. From there you can look at your 301 redirects on incoming links (see below).
For pages with a lot of links we would do a 301 or contact the referring sites. But doing this for every page is not the point. With the links below, we might do a 301 for the 10 pages example, or deal with the issue directly.
500 errors
A man walks into a bar. The bartender went to Hawaii and didn’t tell anyone.
While you’re customising your error messages go crazy and look at your 401, 402, and 403 pages too. But the 500 internal error is important. When a user sees an internal error message it can look daunting, and to the inexperienced user like their computer is at fault.
Brand the page with your header to let the user know they are still on your site, and as our faithful bartender would, explain the problem is not with the customer but with the company. Apologise and point them back to where they belong.
Floxee have used humour effectively with their 500 page to let users know they’re still on the site, and to keep browsing.
While you’re in there making stuff work, check on your social media icons. Social media links are simple aspect of defensive design, they make you more contactable and increase brand recognition, make them visible and easy to find.
Help messages and functions: provide the answers before they’ve asked the questions
Giving your users good help text increases the usability of your site, and allows you to put users back on track when things go wrong.
A man walks into a bar. The bar tender suggests a beer. And peanuts.
Inline help appears on the page with the user via a hover over, clicking a pop up window. Here are a few types of inline help to consider.
Some form of inline help allows users to ‘scan and choose before I click’ for sales items.
Spruz, who create and host social networks, provide more information on each level of their plan as the user browsers. Although this form of help can be distracting and make pages cluttered, it ultimately leaves the user in control of the flow of information.
Amazon adopts a different version of inline help, allowing users to find more information when they need it.
This reduces the amount of copy on the page, and also allows the user to find information only when it is relevant to them.
Help text can also be placed directly on the page, referred to as contextual help. When Linkedin added ‘skills’ to their members’ profiles they chose to place their help text on page, allowing users to skip or enter the information required.
This style of user-prompt help is often favoured when a new feature (especially security related) has been introduced. More intrusive on the page, sometimes not allowing the user to continue without selecting ‘skip’, it gets your point across loud and clear.
Form validation: fix the forms
A man walks in to a bar and orders a beer. The man says ‘can I have a beer please mate’. The bartender says he has not asked correctly. The man says ‘can I have a beer please mate’. The bar tender says he has not asked correctly.
How many time do we have to fill out forms, press submit and then have all the data disappear without an explanation of why, or if we need to resubmit?
Effective forms should:
- Validate data as it is entered
- Have the submit button disabled until the form is complete
- Keep completed data upon submission
- Highlight errors clearly, and with a friendly error message.
Error message needs to help the user, and not make them feel stupid. Text that is in capitals and red, as in:
YOUR FORM HAS NOT BEEN COMPLETED SUCCESSFULLY
Versus:
‘Oops, you’ve missed something, please see our highlights below’
Leave the user with a very different impression of the site.
Just plain losing people (especially in eCommerce)
A man orders a beer and is asked for his address, date of birth and to join their membership club, then he may have his beer. Man walks out of bar.
This is your bread and butter money. Asking your user to purchase online is the most interacted they’ll be with your site and in the most need of assistance. They need to fill out clicky fields in forms, fetch their credit card and enter in personal details. Then they hit submit, their credit card details disappear but the rest of the form is still populated. With no explanation. Yea, they’re not coming back.
Practical tips for decreasing bounce rates at the checkout of your site:
- Display payment types accepted early on in the process
- Allow shipping rates to pop up as a separate window or display information with inline help
- Keep the text ‘you can confirm your order at the next step’ repeated through all subsequent steps. Then allow the user to confirm their order!
- Send a follow up email with receipt
- Don’t force registration, allow user to purchase as a guest
- If user registers, send an email with password.
Virgin Mobile Australia uses inline help that explains why the user needs to provide their email address. No fancy explanation needed, but a simple pop up helps users stay on the page and get to the checkout point without abandoning their cart.
Browser/device type and connection speed
A man is trying to find a bar. But the bar has a flash site and the address won’t load on his smart phone. Fail.
Slower loading speeds on smart phones mean we need to consider sites which can display well without pictures and the use of flash and additional plug-ins.
Creating cut down versions of sites can be time consuming, but very worthwhile. It’s worth checking the key issues first:
- How many mobile users do you have (see image) and what are their interaction patterns?
- Is the cost benefit of having a mobile version of your site worth it?
You can see from the above 5% of the users on this site are using smart phones. The bounce rate is higher than the average user, but it’s likely they are still accessing the information they need from this information-based site. Exploring the entrance routes of the smart phone users would also be another good indicator of what their purpose was.
Creating a mobile version of content doesn’t need to be complex.
- Supply a cut down version of the site - less images, less text
- Use multi-purpose code, you need flexible layouts to do this.
Not all websites need smart phone versions, but isolating even 5% of your audience by your choice of flash and plug-ins needs to be carefully weighed up.
Where does that leave us?
At the end of the day one of the best things to do is check in with users. There's nothing quite like finding out how something works (or doesn't) by getting user feedback
The best user feedback is when they do it themselves, don't just talk them through it, set a task and see what happens. Remember this is a ‘heart and minds’ campaign, it's about keeping visitors to our site happy and decreasing the likelihood of a bad experience.
Want more? Follow Mintleaf Studio on Facebook and Twitter to join in the conversation.
References:
- “Driving Sales With Service,” Forrester (November 1999), sourced from “Contingency design,” 37 Signals White Paper (February 2002)
Other reading: