Errors: Bad Decisions or Bad Design?

Let’s face it: errors happen all the time. Most errors are caused by what we call human error and they seem unavoidable, but I’m going to make the argument in this article that good design practices can help prevent and even eliminate errors that happen on the web. As for the rest of the errors of the world, I’ll leave that up to someone else.

A quick intro: This is another in our series of “Design Theory” articles. I’ll begin this by talking about some design principles in the abstract; Then we’ll progressively work towards some hands-on examples of how these ideas can be applied to web design.

The Causes of Errors

Whether it’s spilling a carton of milk, making a wrong turn, or incorrectly filling out a web form, errors can all be traced back to human psychology. Several psychological studies have suggested that errors can be boiled down into two camps:

• Slips, or errors of execution.
• Mistakes, or errors of intention.

We’ll discuss both of these in a bit more depth in just a moment, but consider this statement: The actual source of most errors is not complexity or difficulty or the inability of a user… the actual source of most errors is bad design. As one of my favorite design authors puts it:

It’s not complexity that’s the problem, it’s bad design. Bad design complicates things unnecessarily and confuses us. Good design can tame complexity.
– Donald A. Norman

By that logic, fixing or preventing errors isn’t a matter of simplifying our designs, it’s making them better. Sounds easy, sure… but let’s take a look at just what “better” means in terms of design.

Preventing Errors is Easy, Not Simple

So much has been said about “simplicity” being the holy grail of design in the last decade. Entire books have been written about the merits of simplicity, and how “all we really need to do to fix the world’s problems is simplify them”. It’s complete rubbish-talk if you ask me, but here are just a few examples you might hear around the water cooler or coffee shop:

“The iPod revolutionized the portable music player industry by simplifying the interface.”

“Amazon.com became the dominant online megastore by making it simple to buy products online.”

“Facebook beat MySpace out because it was simpler to use.”

I cry foul! The silly thing about these statements is that no one really thinks about what they mean… I mean seriously, the iPod interface isn’t all that simple if you were to describe it to your 85 year old grandmother; Amazon.com didn’t do anything new to simplify the online store experience, and Facebook beat out MySpace because MySpace’s design sucked!

In none of these examples does “simplicity” play any large role in why the company or product was successful. Design did! Sure, simplicity is always a welcomed strategy if you are dealing with a problem or design that is overly complicated, but we need to stop talking about it as if it were the answer to all of our problems.

People throw around the word ‘simplicity’ too often today. What they really mean when they say something is “so simple!” is that it’s “so well designed!”

You catch my drift… the first step to understanding how to fix and prevent errors on the web is to toss your crutch of simplicity to the ground. Simplicity isn’t a magic wand, it’s a hacksaw, and there are more tools that we’re going to need to use to address our design problems. Alright, let’s move on to the juicy practical part of the article…

Error Type 1: Slips

First stop on the error train, Slips. Slips can be described as errors of execution. They aren’t intentional mistakes, but they happen all the time because we humans are so gosh darned clumsy. Here are just a few examples of slips in terms of web design:

• Misspelling your email address, name, or phone number.
• Selecting the wrong check box.
• Forgetting to completely fill out a web form.
• Forgetting to hit “Save” before closing a document.

How to Prevent Slips

As a web designer, dealing with slips is tricky because they happen as a result of unconscious processes and misfires in the human mind. You can’t stop someone from slipping 100% of the time… but much like a grocery store might post a “Wet Floor” sign when they are mopping up a mess, there are things that you can do to make users more aware of their actions.

Using the same examples of slips from above, here are some simple solutions:

• Misspelling your email address. Fix: Validate vital forms in real time to check for errors.
• Selecting the wrong check box. Fix: Limit choices to a reasonably number, and show users a clear list of their choices before making the form submission final.
• Forgetting to completely fill out a web form. Fix: Tell users right away when they’ve skipped a required field by highlighting it or marking it with a clear indication that it’s mandatory.
• Forgetting to hit “Save” before closing a document. Fix: Auto-save the document or field for them… or prompt them to save before they are allowed to close the page or window.

As you can see from these examples, simplicity is just one tool that can be used to help solve errors. In most of these cases, we’re not simplifying the design, we’re actually adding another layout of complexity by adding a “guidance” interactivity layer. Preventing slips doesn’t mean inventing a “simpler way to walk”, it means adding warning signs and better traction floors.

Error Type 2: Mistakes

Mistakes are a different breed of error. They happen when someone intentionally does something wrong. Here are just a few examples of mistakes as they happen in web design:

• A user tries to break a voting system by voting numerous times.
• Someone enters Javascript into a simple text field to insert a malicious script.
• Users are accidentally mis-classifying their industry on a job website (ie: monster.com).
• Site members are trying to upload lots of high resolution images to Facebook.

It’s important to consider that mistakes aren’t always malicious, even if they are intentional. My own mother, for instance, might attempt the last one on the list (trying to upload several hundred huge photos to Facebook), but she’s not making the mistake on purpose… she’s just lacking the knowledge that it’ll likely take her days to upload those photos on a slow internet connection.

How to Prevent Mistakes

Preventing mistakes, much like slips, is easy to do once you’ve identified the type of error that you’re dealing with. Let’s return to our original examples:

• A user tries to break a voting system by voting numerous times. Fix: Implement a script that limits votes to one-per-IP address.
• Someone enters Javascript into a simple text field to insert a malicious script. Fix: Make it so only raw text can be used in the text field.
• Users are accidentally mis-classifying their industry on a job website (ie: monster.com). Fix: Send people through a series of decision-trees so they can find their proper classification rather than guessing.
• Site members are trying to upload lots of high resolution images to Facebook. Fix: Have the uploading script check file sizes before actually uploading the files, and let users know the estimated upload time.

As before, the fixes are relative easy in terms of design. In most cases, a simple text-message or workflow redesign will be enough to either inform users of the potential mistakes, or prevent them altogether. Again, the solution here isn’t to reduce simplicity, it’s to add another layer of design that intelligently guides people around error prone actions.

The Third Layer: Practical Solutions to Prevent Errors

The next couple tips are some practical examples of design practices that should help you eliminate the occurrence of errors. This isn’t just for web forms though… the overriding principle is that…

To cope with situations where errors are frequent and users are frustrated, the first step is to consider adding a “third layer” to your design.

But what is this “third layer” that I’m talking about? First, let’s take a look at how most designers approach website design:

In this model, the Core Functionality layer is what you might call the wireframe of the site. It includes the general layout as well as the core content and functionality of the site.

The Visual Design layer represents the skin, or styling. This can be anything from colors, typefaces, images, etc. It’s the visual layer that you wrap over the content to make it look pretty… if it’s done correctly, this should also be helping to make your site more user-friendly by making it easy to read and navigate.

Now let’s look at the model with the third layer:

Now, the model includes a third Guidance layer. This layer represents the “helper” elements within your site.

Third Layer elements might include:

• Tooltips and Modal Windows – Allow users to get more information without leaving a page
• Form Validation – ideally, this should be immediate. Read more.
• Visual Indicators & Status Cues – let users know where they are in a step by step process or when there is an error.
• Simple Text Reminders – letting people know what they can and can’t do
• Intelligent Simplification & Restructuring – remove redundancies and confusing elements from your design
• Decision Trees – help people find what they are looking for
• Checklists - help users understand what they have and don’t have
• Historical Displays – help users see changes over a period of time to boost their perception
• FAQs - this one is more of a content strategy than a design strategy, but it’s useful enough to include on our list (especially if combined in a search or decision-tree system).

It’s important to note that this third layer doesn’t necessarily mean that your design needs to become more complicated… adding tons of new elements isn’t always the solution unless you can do it in a clean, unobtrusive way. Remember, these helper devices are intended to help people avoid errors… if all you are doing is cluttering up a page design with extra junk, you’re actually increasing the likelihood of errors by confusing users. The key: add what’s needed to help the users in the least impactful way. If you were speaking to them in an actual voice, speak calmly – yelling won’t fix anything ;)

Forgiveness

Preventing errors from occurring has as much to do with increasing users situational awareness of what’s going on around them and reducing the visual noise on a page. So often, designer assume that a website user will have the same level of knowledge that they have… this is fine if you truly know and trust your target audience, but in the vast majority of web projects, this is a dangerous assumption to make.

Building in forgiveness into a design is an easy way to lessen the blow when users do make mistakes and slip-ups. Forgiveness, in this context, refers to the elements that will ease the severity of an error when it happens.

For example: This might mean disallowing a user from completing an order form unless they have entered a verified mailing address.

Forgiveness also comes in the form of letting users fix their own errors when they happen. How it will work in practical applications will be up to you… but as an abstract design principle, this means building in ways for users to edit information and correct mistakes.

These are things that we tend to take for granted in the world of Facebook profile editors, CMS systems like WordPress and the like, but when you are creating a design from scratch, it’s truly important to consider where forgiveness will need to fit into your projects.

Conclusion

That’s it for this article! If you guys/gals are interested in more of these theory and principal driven articles, let us know and we’ll be glad to bring you more of them. I personally think that the theory behind web design is easy as useful as practical tutorials for how to create specific design elements, but as this is a crowd driven site, we’ll be listening to what you guys have to say!