Total Followers 132,503
There are several types of design and every web designer decides for himself which approach he takes, but today we take a look at a particular one of them, called Defensive web design. What does it mean? The defensive design is also called contingency design and refers to the idea that the interface has to be designed in such a way that potential failures will not force the user away from your webpage, but will keep him there.
The contingency design can contribute a lot to your success, because all designers know there is not a product without flaws, therefore getting the best out of these flaws will help you keep your visitors close. Contingency design is familiar to a context that happens a lot in the stores. When the client goes and asks for something that is not in stock, he will not get rejected. The shop assistant will most of the time recommend another product. The defensive design does the same thing: takes the client’s mind away from the problem and helps him with information or makes him try again.
There are many ways of designing in a defensive manner, one of them being the 404 error pages, which are very popular. There is no internet user who never encountered a 404 error. The last thing users want is to get the default Internet Explorer 404 message, which is full of unimportant and irrelevant information that scares the visitor away. Designing the 404 error page following these tips might help:
The 404 Error Page of Twitter
You can follow the same tips to design the 500 error pages (internal server errors) or 502 error pages (server error) and any other pages of this kind. Just keep them simple and do not scare the user away with them.
Another way of keeping the users on your website is to offer them help whenever they have to fill in or buy something. People do not play with their money, therefore when it comes to something involving their personal information, credit card numbers and so on, be specific and offer every information and small detail. Instead of sending them to another page, you could also have something called in-line help (see example in the image below, print screen from GoDaddy.com). When the mouse is placed over the underlined text, a tooltip box appears and offers the user a whole lot more information about the product.
Example of in-line help
Another way of helping is the contextual help. This type of help offers guidelines of the current process the user follows. WordPress offers guidelines this way to its user and does it mainly in the dashboard/administration area. They use a simple language and show the option to go into more details by accessing the forum or the documentation available.
Even if internet speeds are incredibly fast today, there are still computers connected to slow networks. This is why defensive design has to be about them as well. Even if you use Flash animations, jQuery, JavaScript and so on, try to make the most important elements using HTML and CSS only, because this way they will load fast regardless of the type of connection. This will also ensure the users on slow connections will see the most important information, even if they will skip the eye-candy elements.
This is not only for the users accessing the web from a slow local connection, but also for the ones on public wireless networks. Don’t forget the users that access web pages from their mobile phones nowadays, so if you don’t have a version for portable devices, you can’t be sure that heavy elements will load on their devices.
One of the first elements introduced on the web – ever – was the search bar; it is still useful today. The most successful webpages in the world have a search bar, because this got normal several years ago and stayed like that. The reason behind its popularity is because the search bar is still a useful element. A “similar to this” or “did you mean this?” option is a very good element as well, if you could have that within your search bar. You can see in the image below how useful this option can get for Amazon.
Amazon search box
The most problems users have on a webpage are caused by a poor handling and design of web forms. Whenever the user has to fill in a form and something is wrong, he has to feel safe. Don’t forget the typical, average user is not used to the web and these errors might scare him away. Telling him that he completed the form wrong in full caps lock is a bad way of dealing with such a problem. Why not tell him that there was a mistake, which is highlighted in red, and he can solve it right away. Don’t blame the user for making a mistake, not all of them are experts on the web. The errors have to be highlighted with graphics and text, so the user knows what went wrong.
One of the most annoying things are forms which, once completed right, do not keep the information stored. When you can’t complete a registration because of a small mistake, taking it all over again from zero is not cool; at all! Code the website in such a way that it preserves the information in the forms filled in with the right information, so the user will only have to change the fields where there was a mistake.
Another useful tip is to have forms in which the users have to type in DELETE in order to get unsubscribed from a service, erase personal information or e-mail accounts. It might be annoying, but it is clearly the best way of ensuring no data is erased by mistake. This is another tip for defensive web design.
The best way to ensure there are no problems is to take care of them beforehand. Try to check your webpage for missing links, moved or deleted pages and so on. Google Webmaster Tools can help you look for and take care of these problems. However, you have to use Google Analytics in order to be able to access this function.
There you go, these were today’s tips on how to start thinking defensive when you design and how to avoid common mistakes non-educated designers do. Have you heard or ever used some other actions to make sure you do not scare the users away? Do you know some good examples or some bad ones?
Here is a list of links for further reading, if you wish to find out more about defensive web design/contingency design:
Getting Started With Defensive Web design on Smashing Magazine
Tips to improve your 404 error pages on GraphicMania.net
70 Unique Examples of 404 error pages on 1stwebdesigner
Contingency Design on 37signals
Get The Only Freelancer crash course you will ever need to read!
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.
Monday, September 26th, 2011 07:03
I will add something to the slow internet users. If a user using slow internet there might be case when he submits a form and has to wait for so long. Some users thought the site is down. To remove this an animated loading gif will do the trick. Also the user knows the page is loading.
Anyways thanks for the nice post.
Thursday, September 22nd, 2011 15:51
Thank you for posting this useful article! Defensive design won’t drive traffic to your website or increase your online presence. But it will improve the quality of your traffic by serving your customers better to eliminating the needs for the user to search for the information that they need!
Thursday, September 22nd, 2011 12:30
great article, I am not sure I ever called it defensive I would call it good planning; one thing I seam to have to manage a lot of are the legacy links left on search engines when we do a redesign or an optimization.
Wednesday, September 21st, 2011 17:17
I like the 404 error page, it’s true that nowadays this is a lot better then the standard “ugly” ones.
Wednesday, September 21st, 2011 08:41
Very useful article. It explain almost all key points to be consider.
Wednesday, September 21st, 2011 07:30
Well put – I find it incredibly frustrating how little effort most web designers put into this. A helpful and thoughtfully built 404 page makes a huge difference to most websites.
Wednesday, September 21st, 2011 02:29
Defensive web design improves to error message, help, farms and other crisis points. Wonderful work! I also have my own, personal web blog I simply feel it is tough to write excellent information like this.
Tuesday, September 20th, 2011 22:46
Never thought of how important it was to provide contact information on a 404 page will be taking care of this immediately.
Tuesday, September 20th, 2011 12:20
Thanks for highlighting some important things worth considering, I especially agree with the 404 and Slow Connection points, I always try to use as little java as possible but its difficult when the client wants sliders and other whistles and bells :-/ and I prefer use a separate mobile version of the website where possible…
Great Post and thanks for sharing :)
Tuesday, September 20th, 2011 13:47
Great content you have here.I was looking for something like this and I am so glad that I finally found it
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
web design bangkok
Tuesday, September 20th, 2011 13:47
Great content you have here.I was looking for something like this and I am so glad that I finally found it
Chris Manaon
Wednesday, September 21st, 2011 02:29
Defensive web design improves to error message, help, farms and other crisis points. Wonderful work! I also have my own, personal web blog I simply feel it is tough to write excellent information like this.
Timesheet Software
Tuesday, September 20th, 2011 22:46
Never thought of how important it was to provide contact information on a 404 page will be taking care of this immediately.
geopvp
Tuesday, September 20th, 2011 22:26
Thanks
Warren
Tuesday, September 20th, 2011 12:20
Thanks for highlighting some important things worth considering, I especially agree with the 404 and Slow Connection points, I always try to use as little java as possible but its difficult when the client wants sliders and other whistles and bells :-/ and I prefer use a separate mobile version of the website where possible…
Great Post and thanks for sharing :)
Andrew Groat
Wednesday, September 21st, 2011 07:30
Well put – I find it incredibly frustrating how little effort most web designers put into this. A helpful and thoughtfully built 404 page makes a huge difference to most websites.
Alpesh
Wednesday, September 21st, 2011 08:41
Very useful article. It explain almost all key points to be consider.
Sam
Monday, September 26th, 2011 07:03
I will add something to the slow internet users. If a user using slow internet there might be case when he submits a form and has to wait for so long. Some users thought the site is down. To remove this an animated loading gif will do the trick. Also the user knows the page is loading.
Anyways thanks for the nice post.
Michael D. Medeiros
Thursday, September 22nd, 2011 15:51
Thank you for posting this useful article! Defensive design won’t drive traffic to your website or increase your online presence. But it will improve the quality of your traffic by serving your customers better to eliminating the needs for the user to search for the information that they need!
Mike James
Thursday, September 22nd, 2011 12:30
great article, I am not sure I ever called it defensive I would call it good planning; one thing I seam to have to manage a lot of are the legacy links left on search engines when we do a redesign or an optimization.
Marlin
Wednesday, September 21st, 2011 17:17
I like the 404 error page, it’s true that nowadays this is a lot better then the standard “ugly” ones.