/ Book summaries

Defensive Design for the Web [Book Summary]

37Signals (now called Basecamp) is a Chicago-based web application company, famous for having invented the Ruby on Rails web application framework, and the "Getting Real" philosophy, amongst other things.  37Signals are one of the most highly respected authorities on web usability, web design, and web application development. Defensive Design for the Web is a most excellent book, which greatly inspires our web design philosophy at Binary.com

DEFENSIVE DESIGN FOR THE WEB, by 37 Signals

This book introduces the concept of contingency design - design for when things go wrong.  Contingency design significantly enhances the user's experience on your website.

1. Display obvious error messages and alerts

  • Give an error message that's noticeable at a glance.  E.g. show an alert icon.

  • Use colour, icons, and text to clearly highlight and explain the problem area. E.g. indicate the problem area with bold red text, offer possible solutions, don't force visitors to retype data entered correctly.

  • Always identify errors the same way - use the same colours, alerts, fonts, text, and tone, and place errors in the same spot on the page.

  • Eliminate the need for back-and-forth clicking - don't force customers to go back and forth between pages to correct errors.

2. Provide clear instructions

  • Don't use language that might be unfamiliar to your customers (e.g. jargon, acronyms, technical terms, cryptic error codes).

  • Keep text brief and easy to understand.

  • Be polite.  Don't place the blame on the customer;  say please and thank you; don't use all caps (it gives the impression you are shouting).

3. Create friendly forms that are easy to complete

  • Highlight either required or optional fields (e.g. place an asterisk next to the field or use the word "required" or "optional" next to the field).

  • Accept entries in all common formats (e.g. allow spaces/dashes in credit card numbers/phone numbers/social security numbers).

  • Provide sample entries, pull-downs, and formatting hints to ensure clean data (e.g. provide pull-down menus to select dates, or display a "MM/DD/YY" hint to show the required format).

  • Explicitly state limits to characters, number of entries, and so forth (e.g. for a message form, state the maximum length of the message and show a "remaining characters" figure - don't force the client to guess by trial and error).

  • If customers can't choose it, don't show it (e.g. if a product is sold out, don't allow the customer to select it).

  • Validate entries as soon as possible (e.g. with JavaScript on the form itself).

  • Eliminate the Reset button, and disable the Submit button after it is clicked.

  • Assist form dropouts by saving information.  Just because a visitor abandons a form, it doesn't mean he or she won't come back to complete it later.  So save the data as it is entered.

4. Overcome missing pages, images or plug-ins

  • Offer customised and helpful "Page not found" error pages.

  • Successfully redirect near-miss URLs - accept common misspellings, typos, incorrect case, and redirect the visitor to the right page.

  • Use ALT tags for images - it helps visitors with slow (dial-up) connections, visitors who have images turned off, visually impaired visitors, and search engine crawlers.

  • Offer an alternative version of your content to visitors who don't have the required plugins (flash/java etc)

5. Offer help that is actually helpful

  • Answer questions on the same page they arise - i.e. offer contextual help; don't force visitors to leave the page to find answers.

  • Provide a human fallback plan (live help, phone, email support).

  • Answer emails quickly (within 24-hours) and effectively.

  • Help login with tips or email (e.g. 'forgot password' link, "is the Caps Lock light on your keyboard on?" hint, etc.)

6. Eliminate obstacles

  • Don't disable the browser's Back button.

  • Make it fast, not cute - avoid slow-loading pages, large blocks of text, inappropriate wit.  When visitors are in trouble, get to the point and then get out of the way.

  • Don't force registration.  Don't force visitors to fill out a form to receive assistance.

  • Don't block content with ads.  Your site content shouldn't be obstructed by ads or promotional offerings.  Ads should not be "in your face" on top of content.

  • Eliminate unnecessary navigation during multi-step processes.  E.g. in the midst of a checkout process, don't show the site's standard navigation bar at the top of the screen, because you don't want the user to mis-click and derail the entire checkout process.  However do offer a simple link out of the checkout process.

7. Deliver the right results with smart search engine assistance

  • Offer a clear explanation when no search results are found.  If your site offers "close but not quite" alternative results, make sure you explain the gap between the search query and the results displayed (i.e. make it clear).

  • Anticipate common errors and provide relevant results (e.g. plurals, punctuation, case sensitivity, hyphenations, spelling errors, abbreviations, and typos shouldn't derail the search results).

  • Too many search results?  Offer features that let searchers refine and filter results.

  • No results?  Let customers easily expand search criteria.

  • Offer tips on how to improve results.

  • Don't rely on advanced searches - they are intimidating to most visitors.

8. Make sure unavailable items don't become dead ends

  • Be upfront about item unavailability.  Clearly state "out of stock" upfront - don't wait until checkout!

  • If a product will be available at a later date, explain when, provide product details and take advance orders.

  • Offer email notification - don't expect customers to return to your site on a regular basis to check on an item's status.  "Check back at a later date" isn't nearly as effective as "Let us tell you when it arrives".

  • Show similar items that are available.