Applying Defensive Design for the Web

Applying Defensive Design for the Web

You’ve probably encountered a time when you were eagerly shopping on the web – getting that great last-minute deal – only to encounter a dead end because you mistyped one character. Nothing is more frustrating that having to abandon the process because of a simple mistake.

Defensive Design for the Web

As someone who works on websites, you probably anticipate these errors every once in awhile, but don’t design specifically for when these issues surface. How do you learn to circumnavigate these roadblocks in the user experience? The answer is through defensive design.

What is Defensive Design?

Defensive design is often defined as “Design for when things to wrong.” Defensive Design is like having a contingency design plan when things go wrong. As the web and its capabilities expand, we must protect ourselves from the inherent usability issues that arise unexpectedly.

Under the ideals of defensive design (also called contingency design) the perfect website not only looks good, but includes 404 pages that are professional and informative, search engines are intuitive and customizable, and error messages lay out in detail what the issue is.

Defensive design makes logical sense, too. You can employ all the latest search engine optimization techniques and marketing tactics to drive traffic to your site, but nothing is as effective as having a defensive design strategy in place to prevent the loss of conversions due to a faulty UI.

With defensive design, you can be sure forms, search fields, address bars, server problems and the problems therein have been addressed beforehand, resulting in plenty of happy visitors.

Here are some common examples, best practices, and tips for learning defensive design.

In-line Help

The web is saturated with information that many web application designers strive to reduce the amount of instructional text that appears in a certain user interface. However, you’re always going to run into circumstances where people want an explanation – especially when it comes to them giving you data.

In-line help offers pointers on specific items on the page. For example, when a user clicks or tabs to an input field, the relevant Help text appears beside or below the field. This avoids the hassle of having to send them to another page.

Google
Google incorporates in-line help when introducing new features. Text is always concise and provides good context for the situation. You have the option to close the dialog box, read it later, or learn more if you desire.

Google

Amazon
Amazon makes use of the “What’s this?” inline help feature. For those who are confused or just want to learn more, the option is there to do so. Inline help elements lessen the burden of having to filter through information in Help sections of a website by having the answers right at your disposal.

A link posing the simple question “What’s this?” is another example of in-line help. Typically situated near the header of a feature, this link is small and doesn’t distract existing customers who are already familiar with the feature.

Amazon

Writeboard
Descriptive labels and explanations help users understand the purpose of each question on this form for Writeboard.

Writeboard

Embedded instructions are the last common form of in-line help. This technique is used to guide the user through the screen that isn’t necessarily intuitive. For instance, have you ever wondered why forms ask you certain questions that may seem irrelevant? By placing sentences explaining the feature it’ll help the user understand the intended outcome of their actions.

You should anticipate users’ missing information or not understanding an area of the user interface. By providing clear directions as supplemental information, you take away the guesswork that comes with browsing your site.

Search Bar

The search bar has been one of the most powerful tools available on the web since the beginning. While the search bar can lessen the time you spend looking for an item, the risk of having users misspell words or make typos is abundant. The good news is even if you’re running a small website, there are free tools to help prevent these obstacles from the start. One is Google’s Custom Search, which allows you to create a customized search experience on your site.

Overstock
Overstock.com recommends close matches automatically. This feature, like Google’s search tool, displays results for the correct spelling of the query.

Overstock

Zappos
The search feature on Zappos allows you to remove features from your selection in filtering out relevant search queries.

Zappos

Slow Connections

Anticipate not all users having the fastest connection. Even if you have the luxury of an incredibly fast connection, there are always those who are connected to a slow network. With this in mind design your website’s important elements using HTML and CSS.

Regardless of the connection, you’ll know all your visitors will see the most pertinent information. Only after this is taken care of can you spice up the page using jQuery, Flash, and JavaScript.

Especially in the era of wireless and mobile browsing, it’s important to plan ahead to have a website that responds to a host of users.

Error Pages

Nobody wants to encounter a 404 error page, but if the occasion arises you might as well have an informative and well-designed one to ease users and not scare them away. Here are some tips for designing 404 pages:

  • Explain the Issue: Ease the stress of the user by telling them the most common reasons they’re seeing this 404 page. Perhaps a simple misspelling that can be changed quickly will do the trick.
  • Speak in plain language: Injecting a little humor or a light-hearted approach to the situation can ease the frustration in the user’s mind.
  • Include tools to remedy the situation: Having a search bar on the 404 page, or including contact information so the user can tell you about the problem can help get the user back on track.

Brightkite
Brightkite’s 404 error page tells the user what the problem could have been – in this case, a misspelling.

Brightkite

iStockphoto
iStockphoto’s approach is light-hearted and still contains instructions on how to proceed.

iStockphoto

Frye / Wiles
Again, humor is injected into the 404 page for frye / wiles. These attempts make light of the situation and make a frustrating situation easier.

Fryewiles

Swiss Miss
Creative techniques are abundant for 404 error pages, such as the treatment used on Swiss Miss’ page.

Swiss Miss

Apadeloup
Apadeloup presents another creative solution to the 404 page. The design studio also directs you on how to proceed.

Apadeloup

Forms

Perhaps one of the biggest areas of complaint is that of the form. After all, it’s the one that requires the most work on your part. Typos, incorrectly formatted phone numbers, or missing fields are grounds for immense frustration on the user’s part. Defensive design works to address these issues that may arise when filling out forms by providing clear directions (i.e. Inline Help).

Highlighting the Issue

Ease the trouble in the users mind by gently calling out the mistake in the form through highlighting. This makes fixing the error that much easier.

Typepad
Typepad highlights the necessary fields after submitting an invalid form.

Typepad

MailChimps
MailChimps signup form provides useful inline help while filling out the form.

MailChimps

Preserving Data

Nothing is more frustrating than having to fill out the form again due to a simple error. Retain what is filled in and have the user fill out missing parts.

Twitter
When you return to the login page on Twitter, your username and password are preserved. This is even more convenient for longer forms where you are susceptible to errors. If space is at a minimum, you may try including form labels inside the input fields. This solution works best for shorter forms. Once the label disappears you can’t refer back to it when reviewing the form either before or after submission.

With defensive design, it’s easy for the user to pinpoint the error right away and move on with the process. Simply highlight the error near the relevant field and you’re good to go.

Twitter

Further Resources

Conclusion

Great customer service is the backbone of any successful business, online or offline. Making the conscious decision to plan for and employ techniques that’ll aide in a more positive user experience means the difference between a happy visitor and one who abandons the site, never to return.

Putting in a little more legwork up front guarantees a more successful user experience – one where visitors form positive impressions of your business – which can only be good for business growth. Do you feel defensive design should be readily practiced from the get go, or issues should be addressed as they arise?

For those who practice defensive design, how has it affected the overall quality of your website? Let us know in the comments!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.