Introductory Guide to Defensive web design

What's the best way to destroy a good website? Access it. At least it's always the same. You have to build a good interface day and night, but in the end unfulfilled die first, the vast majority of visitors, in these interfaces supported by the process to half the time to give up. In most cases, visitors leave because they have encountered a problem that they cannot continue. For example, hit the wrong credit card number or click on the wrong link, or the wrong address. It's not their fault.

What is the exact meaning of defensive design? Richard Winchell

Good design assumes that people make mistakes. Poor design makes a wrong-letter visitor trapped in a dead end. The best professionals are responsible for the smart defensive design strategy (also known as contingency design).

Defensive design means ...

I'm a simple guy. In the web's defensive design book, 37Signals defines the defensive design: "Design for the moment of error."

That's the point, isn't it? The defensive design is expected for both user errors and site errors. It will try to stop those errors and help guide the user back to the right track. The web's defensive design usually focuses on the most common failures: forms, searches, address bars, and server issues.

Defensive design:

Verify the user before the error is dampened,

Extend existing options based on the implied intent of the user,

Protects site visitors from server errors and corrupted links with informational information, and

Assists the user before the error occurs.

Defensive Design: Business perception

Whether you want to develop your own online business or just improve your blog, defensive design is one of the best ways to upgrade--defensive design is not designed to win audiences, instead it helps you better serve your existing audience. The latter is much easier than the former.

It's self-evident. What consumes me Map

Think about it: you can work on marketing, search engine optimization, community building, advertising display and content strategy, and attracting 1000 new visitors. If 5% of the visitors to your online store decide to buy something, then the 1000 new visitors will mean 50 new orders. Alternatively, you can practice defensive design. This means raising your current conversion rate from 3% to 3.5%, as well as adding 50 new orders.

The best way to learn about defensive design? Let's take a quick look at these best practices and provide some hands-on tips.

Embedded and contextual Help

The best contingency design prevents errors from arising. Sometimes a simple hint or explanation can avoid errors and frustration. Instead of having customers go to a separate help area, try to assist them with online or contextual instructions.

Inline help provides pointers to specific items on a page. 37Signals provides embedded help in applications. For example, I don't have to leave the page to find out what the 30-day Basecamp trial needs:

The 37Signals embedded help declares a free trial condition.

The embedded Help text box appears when I stop the mouse in the 30-day free trial. It is easy to read, well positioned, and is clearly related to free trial. Language is also very clear. This is important. Defensive design provides the necessary information according to the situation.

Context help provides guidance on the current page or process. Therefore, the context is not the same as embedded help, which is usually related to the entire page, and does not need to be clicked or scrolled.

WordPress provides contextual help in the application's admin zone. The Get dashboard help message appears when you first open the dashboard. The message may be a little long, but it is helpful and appropriate for a given context. Note the simplicity of the language, plus the option to dig deeper by jumping to an entire document or supporting a forum:

WordPress context helps remind me of useful instructions.

HootSuite uses a simple embedded help box to explain each of its application features and service packs. This box does not require the user to leave the very important login page so that you can see the answer to the basic question at a glance:

HootSuite uses embedded help to explain a variety of features.

These sites have expectations that users may miss specific features and requirements. They then display these functions in a clear direction in context. Don't make assumptions! A field, button, or feature that is meaningful to you may not be useful for ordinary visitors. is to offer help.

Low Speed Connection

Another subtle form of defensive design is responsible for handling slow web connections. Downloads of mobile connections can sometimes be as slow as snails. When this happens, visitors may be forced to search your site for guidance paths without images or flash elements.

37Signals ensures that you can browse all of its contents without images, including interactive elements. To do this, it relies more on CSS and text than on images. Critical navigation, arousal, and flip elements (rollover elements) still work even when backgrounds and pictures are not loaded:

Even without images, users can access 37Signals sites.

A-List apart with no images looks a little small, but everything from the article to the navigation. Users can easily find and read the articles they want to read:

Even without a picture, the layout of the delimited list (A list Apart) remains good.

CNN's homepage does not have the image to be able to maintain the interaction. Visitors can see all the links, search tools, navigation, and content in the same location, as if the pictures were there:

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

For types and layouts some designers still want 100% control, and they want to be free to use pictures, flash, and other slow-loading elements to achieve this. But more and more users are accessing the web via a wireless connection, which is getting faster but less reliable. Plan ahead so the site can still work when the bandwidth is low.

Site Search

Site Search is good, if visitors can actually find something to find. If your site contains a large number of misspelled products, concepts, or services, your search tool will be a test ground for everyone's teeth. Anticipate spelling and typographical errors, and turn site search into useful tools.

Amazon's Site Search tool automatically recommends similar matches. It's provided with Google's "you mean?" Message the same kind of thing, and also displays the correct spelling of the query results:

Amazon modifies the search results to show the product that matches the correct spelling.

Like other websites, CNN offers the most appropriate spelling corrections. It then offers two other sets of options: the most closely-matched headlines and this week's hottest search for the site. Fixes and various results allow visitors to get back on track without performing a second search.

CNN returns the matching result of the spelling closest, in addition to the headline news.

These examples are expected for both spelling and typographical errors, although sometimes visitors submit unusual queries: "Java" instead of "coffee (coffee)" or "Band (band)" Rather than "ring".

By making its search results transparent, Zappos offers an elegant solution. The site will check your query and display the directories and concepts mapped by the search. In addition, users can choose to remove any directory from search results:

Zappos explains how they released the results and let you fix them.

So if you submit a wrong query, Zappos may also show me the wrong results, but it will also show me why the results are wrong and help me point out better searches.

If you're just tossing a small web site in your spare time, these automated search suggestions and mapping tools may seem remote. But it is not. Such tools as Google's customized search will get you started. If you're a tech freak, a solution like Lucene with a complete set of libraries will allow you to do the "you say" matching job and get you to do the matching. Or you can write your own script to identify common spelling mistakes and handle them the way you want them to. What you want depends entirely on you.

Form Checksum error Handling

Forms are the first major incentive for customers to hate tooth and teeth. Filling out a form requires a lot of work-it forces you to perform the toughest combination of actions: Click-Tap-click, and usually take out your wallet to look for other information like credit cards. Typographical errors, missing fields, or incorrectly formatted phone numbers can cause visitors to fall into a vicious circle of re-enter-commit-and re-enter-and each time only one error is corrected. Smart defensive design is a clear direction from the start (see the previous embedded help).

But mistakes are inevitable. Therefore, defensive form design does the following:

Keep Guest Data

When you return a form to the user to fill in the missing data, the site should keep the data in the filled data field. Visitors should fix the error without having to lose the entire form.

Highlight errors with clear graphics and text

Correcting and completing data items should be obvious and easy.

Don't let the visitor feel like a criminal.

It's not flattering to tell the user that "you didn't finish the form correctly" with all uppercase messages.

Wufoo highlight errors, and what the user did wrong explanation, the Web page refresh will also retain the data, which makes the modification becomes very easy. The only problem with the design is that "creating your account has encountered a problem" because it didn't tell me any useful information. More descriptive news would be better.

Wufoo highlights the error, but clearer text can be helpful.

FreshBooks is beautiful and concise. Even better, it doesn't give users the impression that they didn't have a test:

FreshBooks's form information is simple and friendly.

Complex and simple form layouts can provide great feedback and get users back on track, as shown in the SEOmoz and MailChimp screenshots below.

SEOmoz's form will tell you when two fields don't match.

MailChimp uses JavaScript for embedded checksums so that you can correct errors before submitting the form:

MailChimp before you click "Submit" to verify, save time.

When a user tries to remove his subscription list from his account, MailChimp also presents another interesting technique for Web Form protection design. The tool requires the user to manually enter "DELETE" to confirm the operation. A good example of making sure that the list is not removed. At first glance the technology may seem a bit annoying, but for users who mistakenly delete sensitive data, it certainly minimizes the chance of error.

MailChimp ' Enter ' delete ' mode. Can solve the user some headache problem.

A good contingency design never stands in the way. In all of these examples, each error is highlighted. In addition, the location of the error description is located in the vicinity of the error area, so visitors can easily find and correct the error. This will keep the form compact, keep the line of sight flowing, and allow the visitor to continue with the task undisturbed.

"Page not Found" error

On the Internet, the expiration link is like a sweaty calf. The site administrator may have moved the page or knocked the URL in the wrong link, or the visitor may have overlooked a slash in the address. Whatever the cause, the last thing the user would like to see is the vague, unfriendly message that follows:

A bad 404 page. It's kind of depressing, isn't it?

A good web site will have its own "this page is not found" area, they will provide the option to explain what happened, or even add a little humor in, otherwise this may become a frustrating experience.

ThinkGeek the entire navigation bar onto its 404 page. It also provides a search form, so if I know what I'm looking for but I don't know the URL, I can submit a query to find it (assuming trick doesn't work ...)

ThinkGeek tried to do a trick, but not by that means alone.

The Climate Wisconsin approach is simple, with two options for its 404 pages. It's easy to digest quickly, and visitors can immediately make a decision about the next action:

Climate Wisconsin ' 404 error page is concise but on the nail. However, adding search functionality may be more useful to users.

You don't need to make 404 pages into artwork. Just make sure the detour is necessary, as follows:

By branding your brand on the page, tell the user I'm still here and reassure you.

At the very least, link back to the home page.

It's best to offer specific options to get users back on track.

Server error

Sometimes you just encounter kerploiee. It's a technical term, and when the server gets tired of the day-to-day monotony of life, it no longer launches pages, gives you a back-up, screams creepy, and then completely fails to deliver content, data, information, and everything.

Typically, users receive messages like this:

Standard 500 server error. Panic from the best of times.

Imagine you're a visitor. What does this page tell you? Is the world on the verge of chaos or do you have to find something called a "Server error log"? This thing can almost mean a catastrophe. Either way, you'll have to delete the site from the list.

A good contingency design is responsible for everything, including server failure.

This is the Carsonified page. He it explains what's going on and lets you send a message to its developer Elliott Kember:

Carsonified did a good job of it, and he introduced a little bit of knowledge about the person who made the mistake.

Food Receptacle is less entertaining, but it certainly ensures that users know they are still running. Like any good 404 pages, it gives users a number of ways to get back on track:

Even if the Web server dies, the user still knows food receptacle eternal life.

Brushfire Digital explains the error, provides navigation and contact information, and again ensures that you know it is still:

Brushfire Make sure you understand that responsibility is not yours, but that it is theirs.

You still don't need to create a piece of art. Just make sure that the visitor knows that the error may not be their fault and that you are dealing with it.

Detect vulnerabilities in your defenses

Some defensive design issues are easy to point out: bad tables, wrong messages, and embedded help are obvious. But you can use some basic web analytics to point out subtle problems and their solutions.

Checkout funnel

You can increase sales immediately by allowing more existing audiences to buy. This is much easier than getting more visitors. So check your checkout funnel to see if there are places where many new customers give up their shopping baskets. In this case, more than 70% of the visitors to the basket dropped the checkout process. Total sales conversion rate is 1.7%:

Break the checkout funnel. The first step is to lose 70% of the potential customers.

By the way, this is a true story. The problem is clear: the customer gives up on the initial checkout page. We think the reason for this may be the layout problem of the page. It gives visitors a strong impression that they have to sign up to settle the bill. Therefore, we adjust the page, add embedded help, modify the layout, make the customer's checkout options clearer. The first page's basket waiver behavior dropped dramatically, and the overall sales conversion rate improved to 3% (I wanted to show the results and the pages, but the confidentiality of the clients did not allow me to do so).

Fail Link (page)

Sometimes, the famous third party website will link to you here. And sometimes it's not true that they're linked to you. While a good 404 page will help, you will still lose a large number of visitors-the link they clicked comes from a site they trust. Once the target site shows a "Page not found" error, the visitor is likely to click the "Back" button. In a perfect world, you put a customized page on the URL of a link and use it gently to guide you to the right place. Alternatively, you can set a 301 redirect to redirect from the invalid URL to the correct page. But how do you find these links? If you use a Host analytics solution like Google Analytics, it won't let the 404 error report run out.

A quick glance at Google Webmaster Tools (Google Webmaster tool) or a little analysis of Web server logs can help you find these problems. Look for pages that repeatedly display 404 errors. In the following example, the Google Webmaster tool shows a link with 404 errors appearing in 29 different places. This is an invalid link and is praying for redirection or Web page conversion:

Failure link in Google Webmaster tools. 29 pages? This link needs to be redirected.

Such analyses and revisions are designed to be defensive even when you do not cause problems. Once again, he lets you win users without having to get new visitors, take orders and get ahead. Because you have improved your current customer experience.

Avoid common errors

Put on your visitor's shoes and walk a mile, you can easily avoid some of the most common defensive design mistakes.

False assumptions

Never assume that a visitor will give it to "point out." Do not assume they are familiar with your site. Your visitors choose a lot-the internet is a big place. To cater to their tastes, prepare to deal with every conceivable mistake. The fewer assumptions you make, the more secure your design will be.

Counterfeit 404

When setting the 404 error page, make sure that the server submits a 404 error code If a page does not exist. Some developers and web hosts do not redirect users to the 404 error page, but instead redirect to a temporary or permanent redirect page.

Failed snails. Todd Bernard Maps.

This type of redirection submits 302 or 301 code, which usually tells the search engine to index your error page with many different URLs. I don't want to repeat the painful details of the normalization and why it's so bad. Please remember my words: Get a 404 error code out there must be a reason. Please make good use of it.

Restricted landing page

Visitors will come to your site via links, search results, or other means. So it makes every page a potential landing page. Therefore, all of these pages should be well practiced in protective design.

Bad version

Carefully compose and edit your own version of embedded help, error messages, and other unexpected events. Your visitor's patience has been limited. Solve the problem, this is your chance, maybe even start to build a good relationship with them. Make every word effective.

Browser Compatibility Limited

Every contingency should work in all browsers. This help is not very useful if visitors need the latest browsers to see embedded help, right? Using incremental enhancements ensures that everyone can benefit from every element of the page.

Beneficial to the brand, business

Almost any brand can benefit from good customer service. Defensive design allows you to provide a good service effortlessly when the customer needs it most. It promotes sales and makes customers like you. So hope for the best and prepare for the worst.

It is worthwhile to plan for the user's errors and vulnerabilities. If you've ever managed a website, you'll know that there are bumps on the road. While putting all these defensive design measures in place requires extra work, it also means more satisfying visitors. This means that the business can grow from the audience you have in hand.

Source: http://article.yeeyan.org/view/%E5%8D%9A%E8%B4%A4/197966