If you enjoyed this article, get email updates (it's free).
Join over 77,235 Subscribers Today.
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:
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.
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.
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.
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
Join over 77,235 Subscribers Today.
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.