An Overview of Defensive Design

All over the Web, at any given moment, something is going wrong. It's not an issue we take lightly, yet it still occurs! No I'm not here to talk about our over dependence upon third party tools or IE6 (specifically), I'm here to talk about site glitches, and how to avoid them.

Occasionally these bugs are small visible glitches, occurring as a result of mismanaged code; or in many other cases, Internet Explorer. Other-times they result from the natural aging process of a site and its ever growing collection of pages. In this article we're going to explore the world of site-based hiccups and how we can ensure that our sites don't become associated with the fail whale!

Introduction

In recent years, we have placed a great deal of effort as an industry, following the topics that get lots of attention. Fashionable subjects include responsive design, user-experience, psychology and the buzzword infused languages we use daily like HTML5 and CSS3. Yet while this is going on, one of the fundamental parts of site ownership, the maintenance process, rarely gets much attention. It's central to usability, it's critical to design, and without it, sites would be a mess. Yet when it comes to reducing error ratios, many sites (even smaller, easier to maintain ones) fall quite short of the mark.

What is Defensive Design?

Combatting these evil forces, be they bugs or reoccurring errors, is an on-going battle that cannot be won overnight. In much the same way as Ash from the Evil Dead franchise, we endlessly charge into action with our trusty code chainsaws and bug bashing boom-sticks to save the day. The process of cleaning sites and ensuring that they're as user-friendly as possible is referred to as defensive design.

Essentially, our goal is to support our sites in times of trouble, purge those errors relating to lost files or the unavailability of resources, ensure that our layouts do what they're supposed to, help the user complete actions, and avoid throwing visitors into a bottleneck of confusion. Defensive design is as much about reducing user confusion as it is about iterating bugs out of the system.

Why does this Matter?

Given that most of the Internet's users are mortals, unwise to the issues that geek superheroes are able to traverse with ease, we need to take care to help avoid causing them undue stress. Visitors are temperamental creatures that could ditch your site in search of an easier to browse option upon suffering one too many errors. If you can provide a site that loads quickly, works effectively, handles errors (as best as can be expected) and avoids alienating the user with roadblocks, you increase your chances of success. After all, a happy and contented user is more likely to remain a customer!

Legacy of the Lost

If there's one thing I can't stand, it's obtrusiveness online. When things go seriously wrong, it can put you off visiting the site in the first place; or if you frequent the domain regularly, bothering to return later on. In this modern age of 24/7 global Internet access; issues like downtime, missing resources or pushy sites that complain because the user doesn't have JavaScript enabled or Flash available on their iOS device shouldn't still be happening. So let's see how you can reduce these issues.

Server Outages

At some point or another, we've all encountered server related mishaps. Whether it's down to DNS issues, overspending your allotted bandwidth, downtime for maintenance, or a simple malfunction that's resulted in the Twitter fail whale. It's the kind of error we cannot afford to ignore because unless we do something, the site becomes unavailable to everyone, s which is quite a scary thought!

Consider the following:

Backup religiously: This is a simple consideration, but it's the most critical. File corruption, data loss and more can happen (to you!), and those who don't backup have the most to lose. You should if nothing else carry out this action on a weekly or monthly basis consistently.
Offline Access: Even with Internet availability as widespread as it is, we cannot expect our users to have access to our sites 24/7. Ensuring that your pages work if a connection is lost, allowing downloads, and offline access will aid those with terminally unstable connectivity.
Use a CDN: Content delivery networks are amazing. They cache stuff that needs repeating and they can reduce your bandwidth costs. If you don't want to suffer an outage because of your host declaring you've used all your bandwidth, this can certainly help your sites.
Status Pages: If you take a site down for maintenance, obviously this should only be done in extreme situations. Whenever a planned or scheduled downtime period occurs, let your users know the score, and provide a status page with timeframes and progress reports.
Social Updates: Social networks like Facebook and Twitter have become extensions of our own sites. Therefore, if the idea of backup hosting isn't your thing and you don't require a 100% uptime safety net), ensure that you keep visitors updated with tweets and comments.

Missing Resources

The dreaded 404 error has become a part of our culture, with pretty much every site suffering one at some stage or another, and every user having met one during their time online. This could include a link to an image that's disappeared since redesigning, or a page that no longer exists in the archives. Ensure that you seek and destroy these broken beasts and fix regular user invoked errors.

Consider the following:

Seek and Destroy: Dealing with missing pages or files begins with hunting down the gremlins on a regular basis. You may spot them when you're clicking through your pages, or you can look to tools like your analytics package or automated error finders like Xenu Link Sleuth.
Information Architecture: If there's one-thing designers are guilty of, it's not maintaining their sites' archives and allowing old pages to fall into disrepair. If you redesign a site or make any significant updates, ensure that dead links redirect appropriately to their new location.
Third Party Links: This is one of the primary causes of link rot. If you link to someone else's site and they choose to redesign (or spring clean), links to pages may evaporate. While we cannot force others to follow our lead, be ready to delete dead links or remap their location.
User Created Bugs: Love them or hate them, your user dictates their journey around a site. If a visitor tries to access pages that don't exist by making a typo, errors will occur. Friendly URL's and redirects can help avoid this, as can monitoring your traffic logs for error trends.
Friendly 404 Pages: As we all know, the default browser error messages aren't very friendly. Most people won't understand what a 404 error is, let alone how to resolve it. By building custom error pages, you can point them in the right direction and offer some useful advice.

Unsupported Technology

While languages like HTML have provided an open, mostly compatible way to ensure that our work functions for everyone, other technologies have not been so lucky. In some cases, the issue is down to the adoption levels of a proprietary system, in others; it's just down to the fact that the thing we rely upon can be disabled. In all cases, we cannot afford to ignore the problems this can cause.

Consider the following:

Beware of Flash: While HTML5 is helping to provide a good solution to this issue, Flash isn't as popular as it used to be. With Adobe cutting development from many handheld devices and iOS having nothing to begin with, gracefully degrading alternative content is required.
Unobtrusive Scripts: We have become addicted to JavaScript. Beyond the lovely surprise that scripting didn't have to be used for evil (anti right-click scripts) and the crazy success of jQuery, we now depend on it daily. Just ensure that those without it can browse the site too.
Image Alternatives: A picture might say 1,000 words, but to the visually impaired or a search engine, it's going to be about as useful as a chocolate teapot. Ensuring that all your images contain alternative text is essential if you want to be safeguarded against such usage issues.
Visitor Feedback: Maintaining a site is a tough job, because in the majority of cases, bugs are unintentional after effects that we fail to notice before going live. Encourage your users to let you know if they spot bugs or errors, as they'll likely spot things you'll miss entirely.
Document Formats: Defensive design isn't just about patching code. Ensuring that your files continue to remain visible in future years is also essential. Always offer multiple formats for your text and multimedia and don't be afraid to upgrade the selection as you upgrade a site.

Sustainable Layouts

It seems that many Web designers are secretly cheating on their spouses, huddled in front of their computer monitors giving doe eyed looks at responsive Web designs and thinking about how much they're in pixel love. In this age of design lust, it only makes sense to cover some of the issues we need to defend our visuals against.

Responsive Flexibility

Defensive design isn't just about the obvious bugs that annoy our users to the point of drawing their computers a nice warm bath. It requires us to think outside of the box and try to avoid the kinds of common complaints, which can break a layout or render a design unusable. There are many general issues relating to the aesthetic of a page, which can be resolved with just a little common sense.

Consider the following:

Avoid Device Design: We live in an era in which all sorts of tools are being used to access our sites. From tablets to televisions, phones to PDA's, we need to ensure that our sites work on as many platforms as possible. To reduce issues, make your site responsive, it really helps.
Suitable Multimedia: Audio and video can bring added layers of depth to your site and help to portray content in a more engaging environment. If you do offer such functionality, be sure to offer transcripts for those lacking the ability to use the media or lacking bandwidth.
Printer Friendly: It might shock some of you but people still print pages! Yep, for all of those tree burning masses, you'll want to ensure that you offer a print friendly layout that will trim away all of the stuff that's useless and non-functional on paper: like adverts and navigation.
Inconsistent Views: How people experience your site may differ depending on what they're using to browse the Web. To avoid layouts breaking on devices like phones supporting tilting content in portrait and landscape mode, be sure to use media queries to adjust as necessary.
Confusing Objects: Underlining text and coloring it blue is never a good idea if that object is not a clickable link. Additionally, hiding a clickable link amongst a bulky mass of text is equal in its ability to confuse users. Ensure that visitors can identify where they need to click next.

Cross-Browser Support

Web browsers have become the bane of many designers' lives. We spend days putting some code into a beautiful format, only to on occasion spend additional hours, frustratingly pleading with the browser that won't do as it's told. If you're the designer, you might want to say “to hell with it”, but if you're a user and you follow the same philosophy, that's one visitor you've lost to a visible glitch.

Consider the following:

Popularity Rules: If a site is going to withstand the test of time, it must ensure that it works amongst the variety of browsers available to users. Always test your site within the most common ones (Chrome, Firefox, Safari, Opera) and the annoying ones (Internet Explorer).
Unsupported Code: When dealing with languages like SVG that suffer persistently mixed levels of support, ensure that you include relevant alternatives. This may require including another language (like VML for IE6-8), but it's worth the effort to avoid missing features.
Web Standards: More of a best practice than anything else, it pays dividends to validate the code you write and separate structure, style and behavior. Not only will it help reduce the likelihood of code glitches occurring, it'll also help you maintain pages with relative ease.
Legacy Support: We've already mentioned the need to test in popular browsers, but if you use Internet Explorer, you'll know that each version behaves like a totally different browser. Ensure you maintain a support cycle for old browsers (if there's enough people using them).
Broken Scripts: If you use server-side scripting, beware of the error messages that can pop-up on the user's screen if something glitches in the code. It would be more useful for scripts to email you any error reports generated and provide a friendlier user error notification.

Accessibility Needs

While user-experience design seems to be hogging most of the glory in respect to getting coders and designers alike excited about how to keep the customers happy, accessibility in many cases often gets swept under the rug. It's a scary statistic that the majority of sites today are still inaccessible and this has to change. Especially as such issues could block an entire demographic from your site.

Consider the following:

Text Only Situation: Ensuring accessibility credentials requires effort, but a good start is to ensure that everything falls back to a textual alternative that can be read by screen readers. Download the text browser Lynx and see how your site works in an extreme environment.
Sympathetic Design: One of the reasons why sites tend to fail to help users achieve goals is because the emphasis tends to be upon glossy visuals. As you fortify your site, critique and justify everything on the page, removing or simplifying what fails to do its job smoothly.
Helpful Alternatives: Accessibility dependent users tend to have a lower margin for error in site defensiveness. If something fails to be accounted for, it can render a critical part of a site totally useless. If you can offer more than one method of achieving a required task, do so!
Documentation: When things go wrong, visitors will demand answers, they don't want to feel like they're alone and helpless. If your site is quite complex or if you're providing a Web app, ensure that you document every feature and provide useful aids for resolving errors.
Usability Testing: When you launch a new site or service, the opportunity for bugs to occur is often greater because large parts of the property have not yet been put through their paces. To iron out initial bugs, invite beta testers and undertake regular usability testing by default.

Reducing Input Errors

While the aesthetics of our site are important, it goes without saying that issues relating to form input and page interaction are often the most damaging to the user. We can get away with a site not looking its best in IE6, but if a visitor can't even utilize a contact form without errors occurring, you may as well turn yourself into the usability police to be arrest without bail. Dealing with input issues may seem scary, but as you'll now discover, it's really just about thinking in terms of practicality.

Intelligent Feedback

Computers aren't very smart, let's be honest. In terms of Web development, the closest we can get to achieving intelligent feedback is to examine what the user is doing, and try to make a prediction based on how others have used the service. The principle behind this technique is simple: if you can identify where errors commonly occur, you can assist the user by forcing them to take extra care.

Consider the following:

Auto Completion: As search engines have proven, the power of the people can reduce the potential for spelling mistakes. If you provide a site-based search, help users find what they are looking for by suggesting potential matches and previews for what they've typed so far.
Auto Correction: If you've spent much time looking at YouTube or Facebook comments, you probably already fear for the future of the English language. When asking for data, try to fix common typos and be forgiving of the caps lock and spaces in things like credit card entry.
Error Highlighting: When asking users to enter a specific type of information, accidents will happen from time to time. Whether you use JavaScript or a server-side solution, or both if you want maximum compatibility, be sure to point out exactly where the issue resides!
User Confirmation: Some things that a visitor undertakes are more important than others. Changing a profile picture for example isn't as worrisome as paying for something. In cases where errors can't be afforded, request users check their entries in a post-submission page.
Alert Messages: The biggest mistakes often occur in an instant, like clicking on the wrong button. If a site has a delete (or other critical) feature that could be disastrous if erroneously activated, always ask the user to confirm the action. Especially if there is no undo button.

On-Page Assistants

While providing users with some feedback during the input process is helpful, it also makes sense to provide additional support to users to help them understand what is required of them before they commence data entry. While intelligent feedback focuses on spotting and resolving errors as and when they occur, assistants try to explain the process better, to avoid it occurring in the first place.

Consider the following:

Data Shortcuts: In recent years, there has been an upsurge in the number of browsers and products offering auto-completion and helpful aids to ensure that accurate form filling takes place. Ensure that your form inputs have suitable ID's that these products will recognize.
Content Hinting: This is a very straightforward route to ensuring users don't make mistakes. All you need to-do is pre-populate fields with a default value that disappears upon click or data entry, and offer a descriptive explanation of what the field requires (not just a label).
Link Whitespace: Especially on small screens, mistaken click are quite common. If you've got big fingers and try tapping with precision on a tiny object, it makes sense that you may miss the mark. Ensure links have suitable whitespace to avoid accidents (like deletion) occurring.
Selective Entry: One of the things I admire about drop-down (select) menus and checkboxes is that they limit the potential for mistakes by offering a selection, without the user needing to type a specific value into a box. If you can use these in preference to text entry, do so.
Digital Signposts: While form filling takes up a big part of the input error spectrum, poor quality links can also make errors more frequent. To avoid sending users to a page (or site) they didn't intend to reach, label links appropriately and avoid mystery meat navigation.

Delayed Correction

As we've stated before, errors happen and no matter how much assistance you give a user, they will always find a way to either ignore your helpful hints or cause a glitch that puts them in a pickle of a situation. As such, in addition to the pre and post data entry process, it's important that visitors can amend their details, undo mistaken actions and be empowered to “help themselves” when possible.

Consider the following:

Undo Actions: When we make a mistake like hitting a delete button and ignoring the alert asking us to confirm an action, we immediately feel guilt, shock and fear that we've lost the data forever. Offer an undo button to return to a previous state to avoid permanent loss.
Default Resets: When users are given the ability to configure something, they seem to have a tendency to play with the interface or functionality and learn by trial and error. Due to this admirable browsing trait, you should let defaults be restored from a session or template.
Post-Production: How many times have you signed up for something, only to find that you made a mistake on the form and now cannot seem to remedy the situation? Rather than just blocking entry fields, allow users to alter (and if needed verify) and rectify issues they spot.
Back Button: Every browser has one, and we use it regularly. The back button has become the ultimate undo feature for the Web generation. Sites that block this button, except in cases where transactions like payment might reoccur, need to stop and let this tool to-do its job.
Contact Details: When all else fails and bugs occur, users want to be able to get in touch to report the problem. If you don't have a contact method (or worse, don't monitor it), ensure you fix this situation, as it's usually the final port of call before a visitor abandons your site.

The Neverending Story

If you talk to a software developer, one thing they'll inevitably tell you is that no product, no matter how simple is ever 100% bug free. The second someone makes that claim, a user somehow manages to break the application, even if it is as simple as "hello world". Inevitably, you cannot defend your site against the on-going issues of errors in one single swoop. As your site evolves, you will need to keep revisiting and repairing as you work to ensure that what was here today isn't broke tomorrow!

The truth is, we live in a digital universe that's infested with link rot, missing content, broken and obsolete code, and the situation only seems to be getting worse. While there isn't much we can do about the sites that time forgot, you could and should improve the situation for your users. Take the time to spot check your site, look back through those archives, keep cross-browser testing and never take anything for granted, especially as your users will critique you for serious failings.

In terms of customer service, you can be forgiven for having errors in your products as regardless of how hard you try, things can go wrong. But don't take that as a sign to give up and let the bugs keep coming, as it's how you deal with them that matters the most. If you work quickly to resolve an issue, visitors will likely feel better about you and your site; as you're rewarding their feedback with fixes rather than punishing them with continued errors. But if you don't make your site defensive, you might silently lose visitors, and that's not something any of us should be willing to settle for.