Introduction to Defensive Web Design

Posted in Tips, Web Design3 years ago • Written by 11 Comments

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.

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.
The 404 Error Page of Twitter

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.

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

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.

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 bar

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

Amazon search box

Forms

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.

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?

More on this topic

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

Contingency Design

Tips to improve your 404 error pages on GraphicMania.net

70 Unique Examples of 404 error pages on 1stwebdesigner

Contingency Design on 37signals

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

69 Written ArticlesWebsite

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.

11 Comments Best Comments First
  • web design bangkok

    Tuesday, September 20th, 2011 13:47

    1

    Great content you have here.I was looking for something like this and I am so glad that I finally found it

    0
  • Chris Manaon

    Wednesday, September 21st, 2011 02:29

    5

    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.

    0
  • Timesheet Software

    Tuesday, September 20th, 2011 22:46

    4

    Never thought of how important it was to provide contact information on a 404 page will be taking care of this immediately.

    0
  • geopvp

    Tuesday, September 20th, 2011 22:26

    3

    Thanks

    0
  • Warren

    Tuesday, September 20th, 2011 12:20

    2

    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 :)

    0
  • Andrew Groat

    Wednesday, September 21st, 2011 07:30

    6

    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.

    0
  • Alpesh

    Wednesday, September 21st, 2011 08:41

    7

    Very useful article. It explain almost all key points to be consider.

    0
  • Sam

    Monday, September 26th, 2011 07:03

    11

    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.

    0
  • Michael D. Medeiros

    Thursday, September 22nd, 2011 15:51

    10

    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!

    0
  • Mike James

    Thursday, September 22nd, 2011 12:30

    9

    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.

    0
  • Marlin

    Wednesday, September 21st, 2011 17:17

    8

    I like the 404 error page, it’s true that nowadays this is a lot better then the standard “ugly” ones.

    0
  • Sam

    Monday, September 26th, 2011 07:03

    11

    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.

    0
  • Michael D. Medeiros

    Thursday, September 22nd, 2011 15:51

    10

    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!

    0
  • Mike James

    Thursday, September 22nd, 2011 12:30

    9

    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.

    0
  • Marlin

    Wednesday, September 21st, 2011 17:17

    8

    I like the 404 error page, it’s true that nowadays this is a lot better then the standard “ugly” ones.

    0
  • Alpesh

    Wednesday, September 21st, 2011 08:41

    7

    Very useful article. It explain almost all key points to be consider.

    0
  • Andrew Groat

    Wednesday, September 21st, 2011 07:30

    6

    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.

    0
  • Chris Manaon

    Wednesday, September 21st, 2011 02:29

    5

    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.

    0
  • Timesheet Software

    Tuesday, September 20th, 2011 22:46

    4

    Never thought of how important it was to provide contact information on a 404 page will be taking care of this immediately.

    0
  • geopvp

    Tuesday, September 20th, 2011 22:26

    3

    Thanks

    0
  • Warren

    Tuesday, September 20th, 2011 12:20

    2

    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 :)

    0
  • web design bangkok

    Tuesday, September 20th, 2011 13:47

    1

    Great content you have here.I was looking for something like this and I am so glad that I finally found it

    0

Comments are closed.

54.82.122.194 - unknown - unknown - US