From the Bookshelf: Defensive Design for the Web

There are some cool renovations taking place at PINT. To make way for construction, we were forced to review our bookshelves. Remember books? So do we. But how many of these tips, tricks, and other words of web wisdom have really have held up after one, two, or…ten years? Which books deserve a new home in the dumpster?

For the first (and possibly only) installment in this series, I looked through Defensive Design for the Web: How to Improve Error Messages, Help, Forms, and Other Crisis Points by the guys at 37signals (aka the people behind Basecamp). The book was published in 2004. I probably walked past it on my way to find an SAT study guide at Borders (RIP). Does it stand the test of time?

Design for the Web

The book is broken down into 40 guidelines for better contingency design. Contingency design is the practice of preparing for what things might go wrong, so that you  are (or your system is) prepared when they inevitably do…and your users don’t close their browser never again to return. The guidelines start at Chapter 2, so we’ll start there.

Spoiler: Most of the guidelines actually hold up! I’ve also included some notes as to why, what’s changed, or which design patterns we’re using to handle these issues today.

Chapter 2. Show the Problem

Guideline 1: Give an error message that’s noticeable at a glance

Still relevant? YES

Notes: Thankfully, some form of noticeable error messaging is now a common practice. Surely there are still some violators out there with their camouflaged or (gasp) lack of error messages. If you are one such violator…buy the book! It’s $0.01 on Amazon (plus shipping).

Guideline 2: Use color, icons, and text, to clearly highlight and explain the problem area

Still relevant? YES

Notes: We’ve only gotten better at employing all of highlighting methods to indicate problems. Way to go, technologists.

Guideline 3: Always identify errors the same way

Still relevant? YES, mostly

Notes: Consistency is great for a lot of reasons, and especially for creating predictable and recognizable patterns for users. They key is to ensure consistency doesn’t override sense. Identify errors in a way that’s most appropriate for the given error, in a way that is easy for users to understand and learn.

Guideline 4: Eliminate the need for back-and-forth clicking

Still relevant? YES

Notes: Just typing out ‘back-and-forth clicking’ gives me the creeps.

Chapter 3. Language Matters

Guideline 5: Don’t use language that might be unfamiliar

Still relevant? YES

Notes: Using language that’s meaningful and easy to understand for the given audience helps users find what they need faster! What’s not to like? This may open up questions of localization and segmentation, but those are smart conversations to have.

Guideline 6: Keep text brief and easy to understand

Still relevant? YES

Notes: 2015 update: Keep it even briefer and MORE easy to understand! …because smartphones.

Guideline 7: Be polite

Still relevant? YES, as long as you are helpful first.

Notes: Your error messages could also be comically rude, or coy, or chic…as long as you have a clever copywriter that keeps these messages consistent with your brand. But messaging should be helpful first.

Chapter 4. Bulletproof Forms

Guideline 8: Highlight either required or optional fields

Still relevant? YES

Notes: By now, most users know that an asterisk indicates a required field. Text labels for optional fields are also pretty standard at this point. However, today it’s even more common that all fields are in fact required, since we now aim for as few form fields as possible. In this case, it’s common, but not universal to note “all required fields” above the form.

Guideline 9: Accept entries in all common formats

Still relevant? YES

Notes: See also guideline 10 🙂

Guideline 10: Provide sample entries, pull-downs, and formatting hints to ensure clean data

Still relevant? YES

Notes: Clean data is good, usable data. And the less doubt on the part of the user, and the less time spent formatting, the better. Provide clear guides to save time on input and validation. Only use “pull-downs” (aka drop down menus) when they’re appropriate.

Guideline 11: Explicitly state limits to characters, number of entries, and so forth

Still relevant? YES

Notes: More details = less trial-and-error = happy users

Guideline 12: If customers can’t choose it, don’t show it

Still relevant? YES, but it’s more like “If customers can’t choose it, make it look like it can’t be chosen…and communicate why”

Notes: The idea is that, depending on the context, you might still be show an unavailable item (e.g., sold out tickets). However, you should let the user know it’s unavailable before he/she can go through the process of trying to purchase that item. Disabled states, or “Sold out” messaging (with details, if you have them) are helpful in these cases. There are so many options to keep your users informed and happy.

Guideline 13: Validate entries (as soon as possible)

Still relevant? YES

Notes: We’ve designed so many graceful validation interactions in the past ten years.

Guideline 14: Button up: Eliminate the Reset button and disable the Submit button after it’s clicked

Still relevant? YES,  but…

Notes: Reset buttons or “clear fields” buttons are less common in forms today. They are really only relevant in specific situations. If refreshing the page will clear the fields, you probably don’t need an additional button to do that. If there aren’t many fields, it’s really not worth the risk of having a user accidentally erasing all of their inputs. If there are many fields in your form, and needing to clear all fields is a legitimate use case, a clear button might be useful – but it’s important to make the button action as clear as possible to minimize accidental erasures. But to the author’s point, yes: if something has already been submitted, or cleared, that should be communicated to the users.

Guideline 15: Assist form dropouts by saving information

Still relevant? YES

Notes: Auto-save FTW.

Chapter 5. Missing in Action

Guideline 16: Offer customized “Page Not Found” error pages

Still relevant? YES

Notes: You can make them clever or cute, if you want to. Seize the opportunity to mitigate user frustration and display your ability to be clever or cute.

Guideline 17: Successfully redirect near-miss URLs

Still relevant? YES

Notes: Humans make mistakes: help a girl (i.e., person) out.  

Guideline 18: Use ALT tags for images

Still relevant? YES

Notes: ALT tags have benefits for usability, accessibility, and SEO.

Guideline 19: Don’t shut out visitors with old technology: Offer alternative versions and technology upgrade information.

Still relevant? YES

Notes: It’s hard to accommodate all old technology, considering the rate at which devices evolve. But if you can’t accommodate, at least provide a gentle reminder to your user that his/her browser (or…relevant technology) version is ancient.

Chapter 6. Lend a Helping Hand

Guideline 20: Answer questions on the same page they arise

Still relevant? YES

Notes: We’ve definitely made some strides with predictive messaging in the last ten years. Think about the way mobile apps now clearly tell you: “This does not let the app post to Facebook,” when you are setting them up. Anticipatory messaging works wonders for the socially anxious mind. The more people understand about what the outcome of their action will be, the more likely they are to take that action.

Guideline 21: Offer an easy-to-use “Help” section and provide clear links to it

Still relevant? YES, but…

Notes: There is a trend away from explicit help pages, and towards other forms of helpful documentation. Lengthier documentation with clear navigation makes sense for more robust products, whereas simple FAQs likely answer questions for the majority of users on smaller sites. Ideally, you’ll employ UX research and best practices to:

• Understand where users might need help
• Make things as clear as possible in the first place
• Address user questions as they arise (see guideline 20).

A good solid “contact us” form or chat window are also important options for assisting users who are still having trouble, despite your attempts at designing the most intuitive experience possible.

Guideline 22: Let customers help themselves through online forums and training sessions

Still relevant? YES , but…

Notes: See our notes for guideline 21, related to helpful documentation. If a forum makes sense for your product, that’s great. However, moderating a forum involves significant labor. Forums are also helpful for branding and customer service. By monitoring major/relevant tech forums and answering questions about your product or service, you can help folks out and remain aware of key issues that you may want to address on-site.

Guideline 23: Provide a human fallback plan (help via chat, phone, or email)

Still relevant? YES

Notes: Services like this are improving all the time. At PINT, we’ve set up Intercom.io for clients who want in-product chatting, for instance.

Guideline 24: Answer emails quickly and effectively

Still relevant? YES

Notes: Enough said.

Guideline 25: Help login with tips or email

Still relevant? YES

Notes: 2015 update: People still forget their passwords all the time! A password reset link sent to an email account is probably the most common strategy for addressing the issue. The examples in the book are a cute throwback to the web security glory days. Suggestions back then included emailing customers their passwords. That cannot happen today. In 2015, security is probably the most important aspect of the process.

Chapter 7. Get Out of the Way

Guideline 26: Don’t disable the browser’s back button

Still relevant? YES

Notes: A more 2015-relevant guideline might be: “Don’t make users start all over if they use the browser’s back button.” Internet users are less tolerant of long forms than ever. Erasing all of the work someone just did might be the worst possible thing you could do.

Guideline 27: Make it fast, not cute.

Still relevant? KIND OF

Notes: Let’s break this down: in my professional opinion, I would say the author is mostly right to favor speed over design. You definitely don’t want to slow your site’s performance for cuteness. But it’s 2015: why not make it fast AND cute? You know it’s possible, I know it’s possible, and the users know it’s possible. Just don’t let the cuteness detract from the usability. If a user chooses to take a moment to look at an adorable photo before moving on to do whatever they were originally trying to do…well, you can’t stop them.

Guideline 28: Don’t force registration

Still relevant? YES, mostly.

Notes: The idea expressed in the book is to not put help documents behind a login screen or paywall. Make it as easy for users to get help as possible.

Guideline 29: Don’t block content with ads

Still relevant? YES, but…

Notes: Sadly we’ve also come a long way with ad placement in the last ten years. If your goal is to generate ad revenue …you’ll probably have to make some concessions on this one. Sometimes it means placing ads above the fold, or literally on top of the enlightening content that your contributors slaved over. No one loves that, but business goals are business goals. But prepare for some unhappy users if there is no way to close (or silence!) the pop up ad.

Guideline 30. Eliminate unnecessary navigation during multi-step processes

Still relevant? YES

Notes: Guideline 30 supports the idea behind the strategy of funnelling. If you need a user to complete a process before moving on to use the site/product, it’s best that the process is the focus. Minimizing distractions is key.

Chapter 8. Search and Rescue

Guideline 31: Offer a clear explanation when no results are found or inexact matches are shown

Still relevant? YES

Notes: Use a “no results found” opportunity to mitigate stress. Decide what’s most helpful or relevant. Did your user misspell something? Maybe you can suggest alternatives, or other products they might be interested in seeing. If it is unlikely that they mistyped, you might want to provide contact information for your support team. The best course of action is based on the interests and needs of your particular users.

Guideline 32: Anticipate common errors and provide relevant results.

Still relevant? YES

Notes: See notes for guideline 31.

Guideline 33: Too many results? Offer features that let searchers refine and filter results.

Still relevant? YES

Notes: Filtering options will depend on your product, and topics for which your users search. If users window shop more often than they shop for specific products, presenting search results in an easy-to-browse fashion can be helpful. At the very least, helpful pagination goes a long way.

Guideline 34: No results? Let customers easily expand search criteria.

Still relevant? YES

Notes: If it’s possible that the user searched with very specific criteria, you might suggest ways to broaden the example. If they searched a database for people aged 18, you might suggest they look for users between 15-20 instead. Again, it depends on exactly why and for what a user is searching in the first place.

Guideline 35: Offer tips on how to improve results

Still relevant? YES

Notes: This is just one more strategy for helping users and avoiding dead ends. The example in the book is intended to help users refine searches that are too vague and yield too many results. Today having “too many results” isn’t really an issue, as long as they are presented in a logical and navigable way.

**Guideline 36: Don’t rely on advanced searches. **

Still relevant? YES

Notes: In fact, since general search technology has improved, many relatively simple sites have eliminated advanced searches all together. Advanced search is also less prominent on major search engines than it used to be.

Chapter 9. Out of Stocks and Unavailable Items

Guideline 37: Be upfront about item unavailability

Still relevant? YES

Notes: 2015 update: It’s still annoying to fall in love with something on the internet, and then find out that you can’t have it.

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

Still relevant? YES

Notes: Provide the necessary information to keep users in the loop:

• Informed
• Empowered
• Able to take action based on full information

Guideline 39: Offer email notification

Still relevant? YES

Notes: Ten years later, email is still great and widely used. But now we also have other notification options like text (SMS) or in-app/push notifications. Each have their own benefits, but if possible, ask the user his or her preference first. That way, your information gets to them via their preferred medium, as fast as possible. They will be more likely to read and respond to messages they’ve opted into receiving, as well.

Guideline 40: Show similar items that are available.

Still relevant? YES

Notes: Bottom line: Dead ends are annoying. If a user can’t get something they want, show them some other things that might scratch that itch.

Web Design Strategies in the Future

The conclusion of the book outlines some ways in which you might glean information from users and your system to improve your contingency design strategies. We are better equipped with analytics, support, and user research tools than ever. This is probably a big part of why we’ve been able to improve these interactions over the past ten years.
Understanding users more thoroughly continues to give us direction and inspiration for improvement. We’ll check in again in another decade. Got any predictions?