Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Getting Started With Defensive Web Design

Nothing ruins a great website UI like people using it. At least, it often feels that way. You put in days or weeks building the interface, only to find that a vast majority of visitors abandon it partway through the process that it supports.

Most of the time, visitors leave because they’ve hit a roadblock: a problem that lets them go no further. They typed their credit card number wrong or clicked the wrong link or mistyped a URL. And it’s not their fault..

Further Reading on SmashingMag: Link

A good design assumes that people make mistakes. A bad one leaves visitors stuck at a dead end because they mistyped one character. The best professionals account for this with smart, defensive design strategies (also known as contingency design).

Defensive Design Means… Link

I’m a simple guy. In the book Defensive Design for the Web, 37Signals defines defensive design as such: “Design for when things go wrong.”

Gets right to the point, doesn’t it? Defensive design anticipates both user and website error. Then, it tries to prevent those errors and provide help to get the user back on track. Defensive design for the Web usually focuses on the most common points of failure: forms, search, the address bar and server problems.

Defensive design:

  • Employs validation to check for mistakes before they frustrate the user,
  • Expands available options based on the user’s implied intent,
  • Protects site visitors from server errors and broken links with informative messages and
  • Assists the user before mistakes happen.

Defensive Design: Business Sense Link

If you want to grow your online business or just improve your blog, defensive design is one of the easiest upgrades — instead of trying to build audience, defensive design helps you better serve the audience you’ve got. The latter is far, far easier than the former.

Self-explanatory. Image by What consumes me

Think about it: You can work on marketing, search engine optimization, community-building, display ads and content strategy, and attract 1,000 new visitors. If 5% of visitors to your online store make a purchase, then those 1,000 new visitors mean 50 new orders. Or, you can practice defensive design. That might increase your current conversion rate from 3% to 3.5%, adding 50 new orders.

The best way to learn defensive design? By example. Here’s a quick overview of best practices, plus some tips for doing it yourself.

Inline And Contextual Help Link

The best contingency design prevents errors from occurring. Sometimes a simple tip or explanation can prevent error and visitor frustration. Instead of making customers trek to a separate help area, try to assist them with tips and instructions inline or in context.

Inline help offers pointers on specific items on the page. 37Signals4 provides inline help throughout its applications. For example, I can find out exactly what the 30-day trial of BaseCamp entails without leaving the page:

Getting Started With Defensive Web Design
Inline help on 37Signals clarifies the conditions of the free trial.

The inline help box appears the moment I roll over “30-day free trial.” It’s easy to read, well positioned and clearly related to the free trial. And the language is crystal clear. This is important. Defensive design is as much about the message as it is about the circumstances that call for it.

Contextual help provides guidance relevant to the current page or process. Hence, “contextual.” Unlike inline help, contextual help usually relates to the entire page, and it can appear without a click or rollover.

WordPress offers contextual help in the administration area of the application. The “Get help with dashboard” message appears the first time you open the dashboard. The message might be a bit too lengthy, but it’s helpful and it is right for the given context. Note the simple language, plus the option to dig deeper by going to the full documentation or support forum:

Wordpress Contextual Help
WordPress contextual help alerts me to helpful instructions.

HootSuite explains every feature of its application and service packages with simple inline help boxes. The boxes answer basic questions at a glance, without pulling users away from the all-important sign-up page:

Hootsuite Inline Help5
HootSuite uses inline help to explain individual features.

These websites all anticipate that users might miss certain features and requirements. And then they present those features with clear direction, in context. Make no assumptions! A field, button or feature that makes total sense to you may be nonsense to the typical visitor. Provide help.

Slow Connections Link

Another, subtler form of defensive design accounts for slow Web connections. Downloads can slow to a crawl on mobile connections. When that happens, visitors may be forced to find their way through your website without images or Flash elements to guide their way.

37Signals makes sure that you can read its entire content, including interactive elements, without images. It does this by relying more on CSS and text than on images. Even if the background and images don’t load, critical navigation, calls to action and rollover elements will still work:

37signals No Images6
Even without images, users can use the 37Signals’ website.

A List Apart7 looks a bit minimal without images, but everything from the articles to the navigation remains in place. Users can easily find and read the articles they want:

Alistapart No Images8
The layout of A List Apart is preserved even without images.

CNN’s home page9 remains intact without images. Visitors can see all links, search tools, navigation and content in exactly the same position as if images were displayed:

CNN without images10
CNN’s website remains 90% intact and navigable without images.

Some designers still want 100% control over type and layout, and they want the freedom to use images, Flash and other slow-loading elements to achieve it. But more and more users are accessing the Web on wireless connections, which are getting faster but are still unreliable. Plan ahead and have a website that still works when bandwidth shrinks.

On-site search is wonderful, if visitors can actually find what they’re looking for. If your website contains a lot of often misspelled words for products, concepts or services, then your search tool may be an exercise in tooth-gnashing frustration. Anticipate misspellings and typos and turn on-site search into an asset.

Amazon’s on-site search tool automatically recommends close matches. It presents the same kind of “Did you mean?” message that Google does, plus it displays results for the correct spelling of the query:

Amazon modifies search results to show products that match correct spellings.

Like the others, CNN provides closest-match spelling correction. Then it provides two other sets of options: top stories for the closest match and top general searches on the website for that week. The correction and variety of results get visitors back on track so that they don’t have to perform a second search.

CNN search typo
CNN returns the closest match of spelling, plus top stories.

These examples anticipate typographical and spelling errors. Sometimes, though, a visitor submits an unusual query: for example, “java” instead of “coffee,” or “band” instead of “ring.”

Zappos12 provides a graceful solution by making its search results transparent. The website examines your query and shows categories and concepts to which your search maps. Plus, the user has the option to remove any of the categories from the search result:

Zappos search13
Zappos clarifies how it delivers results and lets you correct them.

So, if I submit the wrong query, Zappos might show me the wrong results, but it also shows me why the results are wrong and helps me figure out a better search.

If you’re just running a small website in your spare time, these automated search suggestions and mapping tools may seem out of reach. But they’re not. Tools like Google’s Custom Search14 give you them from the start. And if you’re feeling nerdy, solutions like Lucene15 come with entire libraries that do “Did you mean?” matching and let you customize matches. Or you can write your own script to identify common misspellings and handle them exactly the way you want. How fancy you get is up to you.

Form Validation And Error Handling Link

Forms are the number one cause of customer’s hate. Filling out a form requires a lot of work — it forces you to do the hardest combination of clicking-typing-clicking, and often involves digging through your wallet for credit cards and other information. A typo, missing field or incorrectly formatted phone number can force a visitor into a loop of retype-submit-retype, fixing their errors one at a time. Smart defensive design starts with clear direction (see the section on “Inline Help” above).

But mistakes happen. So, defensive form design does the following:

  • Preserves visitor data
    When a user is returned to a form to fill in missing data, the website should keep completed fields filled in. The visitor should be able to fix their errors without retyping the entire form.
  • Highlights errors with clear graphics and text
    Fixing and completing entries should be obvious and easy.
  • Doesn’t make the visitor feel like a criminal
    Full-caps messages telling the visitor that “YOU COMPLETED THE FORM INCORRECTLY” aren’t exactly endearing.

Wufoo16 highlights errors, explains exactly what the user did wrong and preserves the data across refreshes, which makes corrections easy. The only problem with the design is that the message “There was a problem creating your account” doesn’t tell me anything useful. A more descriptive message would be better.

Wufoo Form Validation
Wufoo highlights what you did wrong, but a clearer message would help a lot.

FreshBooks18 keeps it nice and simple. Even better, it doesn’t make users feel like they’ve failed a test:

Freshbooks Form Validation19
The form message on FreshBooks is simple and friendly.

Complex and simple form layouts can provide equally great feedback and help users get back on track, as the following screenshots of SEOmoz20 and MailChimp21 show.

Seomoz Form Validation22
SEOmoz’s form tells you when two fields don’t match.

MailChimp uses JavaScript to validate inline as you type, so you can correct mistakes before submitting the form:

MailChimp form javascript23
MailChimp validates before you click “Submit,” saving you even more time.

Another interesting technique for defensive design in Web forms is presented on Mailchimp when a user tries to delete his/her subscriber list from their account. The tool requires a user to manually type “DELETE” to confirm the action. A nice example of making sure that the list will not be deleted by accident. The technique might look a bit annoying at first glance, but it clearly minimizes the error rate for users who delete sensitive data by mistake.

Mailchimp Delete Pattern24
“Type ‘DELETE'” pattern on Mailchimp. It will save users some headache.

Great contingency design never gets in the way. In all of these examples, each error is highlighted. Also, the description of the error is positioned near the relevant field, so it’s easy for visitors to find and fix the mistake. This keeps the form compact, maintains eye flow and lets the visitor continue with their task uninterrupted.

“Page Not Found” Errors Link

On the internet, broken links are abundant. A webmaster may have moved a page or mistyped the URL in a link, or a visitor may have left out a forward slash from an address. Whatever the cause, the last thing the user wants to see is this vaguely hostile message:

Bad 404
A bad 404 page. Somewhat upsetting, isn’t it?

Great websites customize their “Page not found” area (also called a 404 page), by providing options, explaining what happened or even injecting a little humor into what can otherwise be a frustrating experience.

ThinkGeek25 includes full navigation on its 404 page. It also provides a search form, so if I know what I’m looking for but not the URL, I can submit a query to track it down. (Assuming the Jedi mind trick doesn’t work…)

Thinkgeek 40426
ThinkGeek tries Jedi mind tricks but doesn’t rely solely on them.

Climate Wisconsin27 keeps it simple, with two options on their 404 page. It’s easy to quickly digest, and the visitor can immediately decide their next action:

Climate Wisconsin28
Climate Wisconsin’s 404 error page is simple and to the point. A search functionality could be a useful helper for users, though.

You don’t have to make the 404 page a work of art. Just make sure that if a detour is required, you do the following:

  • Reassure visitors that you’re still there by branding the page.
  • At a minimum, link back to the home page.
  • Ideally, provide concrete options for getting back on track.

Server Errors Link

Sometimes things just go kerploiee. That’s a technical term for when your server, tired of its humdrum day-to-day existence, stops delivering pages, flips over on its back, lets out a horrid gurgling sound, and utterly fails to deliver content, data, information or anything else.

Normally, this will give the user a message like this:

500 error
A standard 500 server error. Scary at the best of times.

Imagine you’re the visitor. What does this page tell you? That the apocalypse is at hand? Or that you have to find something called a “server error log”? Which pretty much means the apocalypse is at hand. Either way, you’re going to cross this website off your list.

Great contingency design accounts for everything, including servers going kaput.

Here’s the page on Carsonified29. It explains what happened and lets you send a message to its developer, Elliott Kember:

Carsonified error30
Carsonified leaves nothing to chance, and it says a few words about the person who may have caused the error.

The Food Network31 isn’t as entertaining, but it certainly makes sure that users know it’s still in business. And like any good 404 page, it gives users a few ways to get back on track:

Food Network 50032
Even if the Web server dies, a user knows that the Food Network is still around.

Brushfire Digital33 explains the error, provides navigation and contact information and, again, makes sure you know it’s still there:

Brushfire 500 Error34
Brushfire makes sure you know it’s not you — it’s them.

Again, you don’t need to create a work of art. Just make sure visitors know that the error probably isn’t their fault and that you’re taking care of it.

Detect Holes In Your Defenses Link

Some defensive design issues are easy to spot: bad forms, error messages and inline help are obvious. But you can spot subtler issues and their solutions using some basic Web analytics.

The Checkout Funnel Link

You can grow sales in a hurry by getting more of your existing audience to purchase. That’s far easier than getting more visitors. So look at your checkout funnel to see if there are any places where many new customers abandon their shopping cart. In this example, over 70% of visitors who place items in their cart abandon the checkout process. The overall sales conversion rate is 1.7%:

A broken checkout funnel, losing 70% of customers in the first step.
A broken checkout funnel. It’s losing 70% of potential customers at the first step.

This is a true story, by the way. The problem was very clear: customers abandon on the initial checkout page. We thought the cause might be the page’s layout. It gave visitors a strong impression they’d have to register in order to check out. So, we changed the page, adding inline help and a modified layout to make the guest checkout option clearer. Cart abandonment on the first page dropped dramatically, and overall sales conversion rate improved to over 3% (I wish I could show you the resulting data and the pages, but client confidentiality and all that).

Sometimes, prominent third-party sites link to you. And sometimes they link to you incorrectly. While a good 404 page (see above) can help, you’ll still lose a lot of visitors — they’re clicking a link on a site they trust. When the target site shows a “Page not found” error, the visitor will likely click the “Back” button. In a perfect world, you’d put a custom page at the linked URL, and then use that to gently steer visitors to the right place. Or, you can set up a 301 redirect from the broken URL to the correct one. But how do you find these links? If you’re using a hosted analytics solution like Google Analytics, it won’t report 404 errors out of the box.

A quick look at Google Webmaster Tools, or a little Web server log file analysis, can help you spot these problems. Look for pages that show repeated 404 errors. In the example below, Google Webmaster Tools shows a 404 error from a link placed on 29 different pages. That’s a broken link that begs for redirection or a transition page:

broken links in Google webmaster tools

Broken links in Google Webmaster Tools. 29 pages? This one needs a redirect.

This kind of analysis and fix enables defensive design even when you didn’t cause the problem. And again, it lets you build audience, sales and leads without getting new visitors. You’re just improving the experience of current ones.

Avoid Common Mistakes Link

Walk a mile in your visitors’ shoes, and you will easily be able to avoid the most common defensive design mistakes.

Mistaken Assumptions Link

Never, ever assume that visitors will “figure it out.” Nor assume that they have any familiarity with your website. Your visitors have plenty of options — the Web’s a big place. Cater to their needs, and be prepared to handle every imaginable mistake. The fewer assumptions you make, the more bulletproof your design will be.

Fake 404s Link

When you set up your 404 error page, make sure that the server delivers a 404 error code if a page doesn’t exist. Some developers and Web hosts instead redirect users to the 404 error page with a temporary or permanent redirect.
The Fail Snail. Image by Todd Bernard35

Those redirects deliver a 302 or 301 code, which usually tells search engines to index your error page at many different URLs. I won’t go into the painful details of canonicalization and why this is bad. Take my word for it: the 404 error code was created for a reason. Use it.

Limited Landing Pages Link

Visitors will come to your website via links, search results and who knows what else. That makes every page a potential landing page. So, practice good defensive design on all of them.

Lousy Copy Link

Carefully write and edit your copy for inline help, error messages and other contingencies. Your visitors’ patience will already be strained. This is your chance to fix the problem and maybe even start to build a great relationship with them. Make every word count.

Limited Browser Compatibility Link

Every contingency must work in all browsers. If visitors need the latest browser to see inline help, then it’s not very helpful, is it? Use progressive enhancement36 to ensure that everyone benefits from every element on the page.

Good For The Brand, Good For The Business Link

Almost any brand can benefit from good customer service. Defensive design lets you deliver great service effortlessly when your customers need it most. It builds sales and makes customers love you. So, hope for the best and plan for the worst.

It pays to plan for user mistakes and bugs. If you’ve ever managed a website, then you know you’re guaranteed a few bumps along the way. And while putting all of these defensive design measures in place is extra work, it also means more happy visitors. And that means business growth from the audience you have.

Other Great Defensive Design Resources Link

  • Amazon gets even more defensive37, Signal vs. Noise.
  • Defensive Design for the Web, 37Signals
    I’m not a 37Signals fanboy, I swear.
  • Bulletproof Web Design, Dan Cederholm
    Another great read.
  • useit.com38, Jakob Nielsen
    A treasure trove of all sorts of usability-related wisdom, including defensive design.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38

↑ Back to top Tweet itShare on Facebook

Ian Lurie is an internet marketer and President of Portent, the agency he founded in 1995. He writes about marketing, communications and search on his blog, Conversation Marketing.

  1. 1

    Interesting read – it’s opened my eyes to a lot I take for granted. The 404 page is always the last thing done and often times neglected but definitely important. Thanks for sharing.

    • 2

      37 Signals manage this very well

    • 3

      Michael Raffaele

      May 29, 2011 2:54 pm

      Yep. I know exactly what you mean. In fact, literally half way through reading this post I scheduled in a time to work on my 404 page.

  2. 4

    Great article – very useful. Thanks!

  3. 5

    Lars Karup Nielsen

    May 27, 2011 6:25 am

    Great article – these parts are often forgotten in a web design! Thank you for the wake-up call!

  4. 6

    Daniel Pataki

    May 27, 2011 6:25 am

    I think the reason a lot of this is overlooked is that making sure you accomodate for mistakes and other errors is THE most time consuming part of any coders job I think, or at the very least, the most tedious. Also, a lot of these errors are kind of “hidden” when you’re working on a website.

    I am building an advertisement management module for a website and I made a nice sliding wizard which uses jQuery scrollTo and whatnot to go through the steps. I realized, completely by chance, that if you are in the last input of a step and you press tab, the cursor jumps to the first input of the next step, dragging the window with it. Due to this, you could basically “hack” the form, and submit it without data. Of course it is still checked at submit, but even so…

    Developers always say you shouldn’t trust users. Since building trust is essential for any website, the users should be able to trust US to help them.

    • 7

      I think part of it is also unclear vision of who the user is. A lot of devs and designers I work with are great at defensive design but over/underestimate the users’ sophistication.

      • 8

        Daniel Pataki

        May 27, 2011 8:14 am

        I totally agree! However, I think accurately gauging the target audience will not take the burden off in the sense that errors not only step from the sophistication level (sophisticacy? :) ) of users, but from, well, human error.

        So if my users are 20-30’s, to whom the net is second nature, the only part of the site which I could get away with being “less” is the hand-holding aspect. Not all forms would have to be over-explained and so on, but I would still need to protect against the same errors as if I was building the site for the less internet-savvy.

        • 9

          Yep definitely. Defensive design still requires discipline, and it’s hard to stay focused when you’ve got a committee of 10 all telling you to move the logo 1 pixel in a different direction.

  5. 10

    Interesting enough, your article breaks in Chrome with Google Reader. All your special quotes are converted to periods….might want to rethink your character encoding or the app you write up your articles in.

    • 11

      Vitaly Friedman

      May 27, 2011 7:31 am

      Actually, there is no special quotes. It’s all normal quotes, as usual, transformed by WordPress in the “right” ones.

    • 12

      Also, I wouldn’t say that’s ironic, since it’s probably not going to stop you from using the site, and not one of the topics covered in the article.

  6. 13

    Great article, reminded me of lessons I usually forget when I get lost in the design process.

  7. 14

    What a great article Ian! Well done.

  8. 15

    Great article. Any suggestions for identifying where you’ve made unconscious assumptions? For a long time, me and my old-timey friends at the soda shop never realized there were people that didn’t know what a davenport is.

    • 16

      Daniel Pataki

      May 27, 2011 8:52 am

      I think it helps if you just question everything you do. Building forms is a great exercise for this, trying to figure out what people are allowed to input. You can start from the very basic level, like, does the user know what a form is?

      This may sound like a stupid question, but different dialects, and especially ESL people might have a problem. In this case if you have a title like “Fill out this form”, you could have an arrow pointing to the form or something.

      For input fields think about all the limitations. Usually you check if a password is greater than 6 characters, and if it is you accept it. But what if it’s 2,000 characters long. This could indicate that the user copy-pasted his password, but he had a large chink of text in his clipboard he forgot was there. Instead of accepting it, you could say: Hang on, are you sure this is your password?

      I think since it’s an unconscious assumption (the keyword is unconscious), it is almost impossible to identify them. The only way to get rid of them is reading articles like this and creating some errors, which you them fix. The only method I can think of is this.

      Ask yourself if an assumption you’ve made is absolutely and completely air tight and basic. If you come to the conclusion that it is, you’re probably wrong, you should question it :)

      • 17

        Thanks for the advice, Daniel. I guess this comes down to forming the habit of asking the stupid questions.

        • 18

          Plus knowing that they aren’t stupid.

          Biggest mistake any web pro makes is assuming that what we know is ‘normal’. We are not ‘normal’ – we’re kind of freakish, actually :)

  9. 19

    Jenny Simonds

    May 27, 2011 8:54 am

    (sigh) This reminds me of some good things I’ve done sporadically in previous projects, but I still haven’t made it my habit to demand that they get into the requirements for new projects.

    BTW, in your sales funnel example, you say the “overall sales conversion rate improved [from 25.82%] to over 3%”. I don’t know if that’s worth bragging about. ;)

    • 20

      Matthew Montgomery

      May 27, 2011 9:48 am

      Jenny, I think you read the wrong conversion numbers. :-)

      “In this example, over 70% of visitors who place items in their cart abandon the checkout process. The overall sales conversion rate is 1.7%.”

      They made changes, then the following happened. :-)

      “Cart abandonment on the first page dropped dramatically, and overall sales conversion rate improved to over 3% ”

      E-commerce is what I do, most stores get 1.5%-2.0% overall conversion rates (depending on the market), getting to over 3% is really good.

  10. 21

    Where do you go to edit the 505 server error page?

    • 22

      Depends on the server. On Internet Information Server you go into the IIS control panel and can point to any HTML template you want.

      In Apache you add an ErrorDocument directive – Google that and you should get some good examples.

  11. 23

    Fadly Abdul Aziz

    May 27, 2011 7:47 pm

    Great article. I like it.. Very useful for me..

  12. 24

    Yasir Liaqat

    May 28, 2011 12:08 am

    An amazing article. It’s nice to read a quality blog post. I think you made some good points in this post.

    • 25

      Jenny Simonds May 27th, 2011 8:54 am (sigh) This rdnimes me of some good things I’ve done sporadically in previous projects, but I still haven’t made it my habit to demand that they get into the requirements for new projects.BTW, in your sales funnel example, you say the “overall sales conversion rate improved [from 25.82%] to over 3%”. I don’t know if that’s worth bragging about. ;)

  13. 26

    Very useful article overall, thank you.

    One minor quibble: you give the example of HootSuite’s contextual help, which purports to explain Google Analytics without actually explaining anything about it. Is that really what we should be modeling sites after?

  14. 27

    Jesse Stell

    May 28, 2011 7:07 am

    Great article, really makes me rethink how I do forms mainly.
    I think one of the best decisions I’ve ever made in making error pages is to always include a link to “Go Back To Home.” More times than not, if it’s a third-party link that they clicked on, it’s better to have a link to your website’s homepage than the previous page, because then they have a lesser chance of checking out your website.

    • 28

      No question, the classics are the best. “Back to home” is the ultimate safety net.

  15. 29

    Nice article, thanks!

  16. 30

    Ian, that was an awesome read and so helpful. My webmaster is going over it now. You wrote above, “I think part of it is also unclear vision of who the user is. A lot of devs and designers I work with are great at defensive design but over/underestimate the users’ sophistication..” I think we might be over/underestimating users’ sophistication.

    Thanks again!

  17. 31

    I am more turned off by the custom error messages and I find them unhelpful. Maybe I’m abnormal.

    • 32

      AGREED! I don’t want someone making jokes when I’m pissed off because the page that I’m searching for isn’t there.This is a really bad time to try to be funny.

  18. 33

    Aaron Martone

    May 29, 2011 4:42 pm

    These are good concepts to keep in mind, but lets not go down the road of giving everything in web design it’s own name. “Defensive” Web Design? As the saying goes, “When everything is bold, nothing is.”

  19. 34

    Manish Chhabra

    May 29, 2011 5:30 pm

    Very useful article. Just great concepts and a lot of times overlooked.

  20. 35

    Scotty the Menace

    May 29, 2011 8:29 pm

    Great article. Thanks! I’m going to add these tips to my to-do list right away!

    As a non-coder, the there are two things web developers can do for me with forms that will make my life much less frustrating: (1) tell me what format I need to enter information in if it matters, and (2) maintain a consistent user experience with every field.

    (1) If you require me to enter a date as mm/dd/yyyy then tell me that BEFORE I enter the wrong format. A simple bit of text next to the field showing the required format will save me lots of frustration. Nothing is more frustrating than receiving an error on a form because I entered the date in the wrong format because the site didn’t tell me what format it wanted. I leave sites for that reason alone. I have been to sites that didn’t even tell me the correct format AFTER I received the error. Do they really think I have nothing better to do with my time than endlessly try different formats for the date in their stupid field until I get it right? Sorry. Goodbye.

    (2) I know automatically advancing to the next field is a cool designer trick, but it’s seriously annoying in forms where only one field does it. If I have to tab or click into every other field in a form, then I fill in, say, the phone number field and all of a sudden my cursor goes to the next field it’s jarring and unexpected. If I don’t realize that the cursor advanced, I’ll hit tab as usual and start typing away in the next field, only to realize I’m in the wrong one. This is SERIOUSLY annoying. Consistency is far more important than neat designer tricks. Every text field should act the same way every time. That’s good user design.

    And talk about bad user assistance: the description under “Leave A Comment” says “…and rel=”nofollow” is in use.” HUH? How about English?

    • 36

      Fuze Studios August 15th, 2011 9:09 am First of all, Welcome Finch. It’s very aomewse addition to Smashing Magazine. Keep it up guys!

  21. 37

    PHP Programmer

    May 30, 2011 4:44 am

    Thanks for the providing nice and useful Idea. I think your job is really perfect and attractive.

  22. 38

    I really enjoyed reading this article. In the future I would also like more links to code examples so I can start playing around with some of these techniques right away. Thanks.

  23. 39

    Tim Leighton-Boyce

    June 1, 2011 8:40 am

    Brilliant article. If only more sites would adopt this approach… But I’d like to add one point: try to track your error messages so that you can spot where most people are having trouble. That way you know what to fix first.

    You suggest that Google Analytics doesn’t track 404 pages and it’s true that it doesn’t explicitly record them in the same way as log files. But if you have the tracking code in your custom 404 page, you’ll be able to see the page as an ordinary pageview. Configure that page as a goal and you’ll be able to use the reverse goal path report to see how people got there. Configure that goal’s conversion rate as a custom alert and you have a (slow) alarm system. You can also track inbound broken links via the referral reports.

    You could take the same approach further by using GA events or custom pageviews to track other errors, such as form completion errors. I prefer virtual pageviews for that in checkouts so that you can see the errors as abandon routes in funnel reports.

  24. 40

    Gr8t stuff …. defensive design is one of the most under looked aspects of making great websites. Thanks alot for letting us know how it should be done….

  25. 41

    I don’t understand why (whenever possible) more designers and developers don’t hard-code examples/guidelines/tips for forms.

    For example, the MailChimp sign-up form ( has three input fields. Most people can probably figure out that all of the fields are required, but nonetheless you only get notice via error messages after you make a mistake. The form should have visual and written clues from the start like the comment form here at Smashing.

    I understand that most designers want minimalist-looking forms, but think about it from a user’s perspective: would you want to know things like accepted formats, correct spellings, and available options before or after you attempt to use a form?

    Forms that validate fields after you click out of them or even as you type in them are cool, but they assume that the user is either already confident enough to attempt input or (less likely) confident that the form has client-side validation to help out as or after s/he attempts input. The best example I can think of is a site that caters to international tourists. Say the user has to enter the phone number of the hotel where s/he is or will be staying: what if the user is unfamiliar with the conventional format of phone numbers in the country? In this case a few hard-coded examples beside or beneath the appropriate form field would be way more helpful.

    Of course I’m not saying that server-side validation should be ignored, but sometimes fancy client-side validation merely solves problems that can be avoided in the first place.

  26. 42

    The Wufoo example highlights the fields that have errors. But not the password, that only contains 4 characters, and should contain 6 to validate.

  27. 43

    bernard schokman

    June 8, 2011 11:10 am

    Nice post. I especially like the contextual, inline and error 404 and 500 catches you’ve added here. very important.

  28. 44

    37 signals repeatedly focuses on being intuitive. Going that extra mile in being intuitive. I am glad the author brings the focus well and truly on maximizing our efforts on then consciously predefining to preempt the usual pitfalls.These guys at 37 signals,I tell you, they are really different.

  29. 45

    Very good read. Love it

  30. 46

    A very nice read which gave me many ideas about the future 404 page on our site.

  31. 47

    Robert Johannesburg

    November 18, 2011 9:41 am

    I’m new to the industry, and I definitely never learned about “defensive” web design. But it really makes a lot of sense, even when I think about my own online habits. People get annoyed when things don’t work, and usually they don’t know how to make them work. So our job as designers is to do that for them. It will be better for a clients, which will make them appreciate us more.

  32. 48

    Great article. Definitely opens my eyes to the detail that goes into a successful web design.I was looking at this one example at And it seemed that they have it right.


↑ Back to top