Introduction to Defensive Web Design

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.

WuFoo 404 Page - best 404 Designs

Error pages

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:

  • Avoid technical jargon when composing the text. There are users that will understand it, but for most it might be scary. “Page not found” is a better title than “404 error”. Don’t forget that this type of error page targets mainly low-prepared users, because the proficient technicians can find their way back to the page easily and do not need guidelines. Design the 404 pages for beginners!
  • You could explain the reason behind the error. There are many problems that lead users to 404 error pages, but you can write a few lines on the most common problems. Ask the users to check the spelling of the address and maybe the problem will be solved.
  • You should include other resources in the error pages, such as the most read articles, the most commented and even a search box. It is likely that the person arrived on your page from another address looking for a very popular article of yours. Otherwise he can use the search box available to browse through the content.
  • Most users will not do it, but some of them want to report the problem to you. Therefore you have to include contact information in the error pages, so the users can easily reach you and tell you about the missing link or whatever the problem is.Google 404 page

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.

In-line help

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 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 (Image Source: Godaddy)

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.

Think of the slow connections

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.

Search barFlipkart - Search Feature

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 Flipkart.

Flipkart 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.use of form in web design

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.

Detecting problems

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?

Need more information, Recommended Book: Defence Web Design Book