How To Minimize Errors And Create More Usable Websites: Part I

Errors happen. It’s inevitable that any system will fail at times. Often failures are attributed to human error. Most, though are really due to design errors. As designers what can we do to minimize errors and their effects on our sites and in our applications?

Fortunately we can communicate through a variety design strategies in a way that reduce both the frequency of errors on the sites we build and the magnitude of those errors that inevitably occur.

There are a number of strategies and a lot to cover. We’ll begin today with a look at errors in general, the different types and causes of errors, and offer a quick mention of the strategies at our disposal. Then we’ll look in more detail at the first of these strategies for countering errors, affordance.

The 2 Types of Errors

Errors are actions taken or not taken that lead to unintended results. There are two main types of errors that can occur, slips and mistakes, each with their own subtypes of errors.

Slips

Slips are errors of action or errors of execution. An example I’m sure you’re familiar with is when you find yourself driving to a common destination when you meant to drive somewhere else.

Another example is when you’re adding a series of numbers in a column and the phone rings and you temporarily lose your place and skip a number before continuing to add again.

Slips occur when the action taken was not the one intended and they’re usually the result of the unconscious. They frequently result from a change in the usual routine or the interruption of an action you were taking.

There are two types of slips.

• Action slips result from changes to repetitive tasks. The driving example above is an action slip (PDF), since the error comes from varying the routine.

  We help prevent action slips by providing clear and distinctive feedback and through the use of confirmations, constraints, affordance, and mappings (all to be covered later in this post or parts ii or iii). Sticking to conventions can also help prevent action slips as they maintain the status quo.

• Attention slips result from distractions and interruptions. The number adding example is an attention slip since the slip occurs due to an interruption of your current activity.

  We help prevent attention slips through clear orientation and status cues. You might use highlighting to focus attention where it belongs or make use of alarms to attract attention in critical situations.

We can minimize slips in general by offering clear feedback on the actions people are taking. You want to make messages clear and mention the consequences of the error along with what corrective measures can be taken.

We can position controls in such a way that prevents accidental activation. We can also make use of the principles of affordance and constraints. We’ll get to the former further down this post and the latter in a subsequent post.

Mistakes

Mistakes are errors of intention or errors of planning. Unlike slips, they’re conscious errors that occur when an action is inappropriate.

Choosing to block search engines from crawling your site is a mistake. Forgetting to remove the temporary robots.txt file you set up to block search engines while your site was under development is a slip.

Mistakes can result from stress or decision making biases, for example when a person is biased to select only from one of several immediately visible options. Mistakes can also occur from not enough or poor information necessary to make a decision.

As with slips there is more than one type of mistake.

• Perception mistakes result from incomplete or vague feedback. We can help prevent perception mistakes by improving situational awareness and providing clear and distinctive feedback. Tracking and displaying historical behaviors with the system can also help reduce perception mistakes as they help present a clear picture of what’s going on.
• Decision mistakes result from stress, overconfidence, and decision-making biases. You can reduce decision mistakes by reducing the surrounding noise and increasing the signal and providing checklists and decision trees. Training people in error recovery and troubleshooting can help reduce decision mistakes.
• Knowledge mistakes result as you might guess from a lack of knowledge or poor communication. Using redundancy to communicate a singular message is one way to reduce knowledge errors. Sticking with conventions is another as are the use or memory and decision aides. In training you can offer case studies and simulations.

In general we minimize mistakes by increasing situational awareness and reducing noise. Place controls so they are visible within one eye span when possible and reduce cognitive overload both auditory and visual.

More choices usually leads to more mistakes from overload. Use the principle of progressive disclosure to provide just enough information and feedback to complete the desired task along with links to more information when requested. Multiple confirmations can be used to verify user intention when performing critical tasks.

I mentioned a few design principles above aimed at reducing and minimizing errors. Let’s start talking about some strategies in greater detail. We’ll look at the following design principles:

• Affordance is the idea that the physical characteristics of a design influence its function.
• Mapping is the relationship between design controls, their movements, and their effects on the element(s) they control.
• Nudge is a method for predictably altering behavior without restricting options or significantly changing incentives.
• Constraints are methods for limiting the actions that can be performed on a system.
• Confirmations are techniques for preventing unintended actions by requiring verification of the actions before they are performed.
• Forgiveness is the idea that designs should help people avoid errors where possible and minimize the consequences of errors when they do occur

Again we’ll talk about affordance immediately below and the other 5 strategies in parts ii and iii.

Affordance

Affordance is the idea that the physical characteristics of a design influence its function. Some objects and environments are better suited than others at performing certain functions. A round wheel rolls better than a square wheel. The round wheel has better affordance for rolling than the square wheel.

Designs perform more efficiently and are easier to use when their objects and environments have greater affordance with their intended function, when the affordance and intended function of an object are in greater unity.

Consider a door. Handles afford pulling and flat plates and bars afford pushing. If your door is meant to be pulled design it with a handle. If it’s meant to be pushed, design it with a flat plate or a bar.

If you came upon the doors below would there be any question how to open them? Handles are made for pulling and so you approach the doors, pull the handles, and the doors open.

Again with the door below you would walk up to it and immediately know how to open it. The sign is unnecessary. Is there really any question what you need to do to open the door. You see the bar clearly meant for pushing and you push the door open without any thought.

Now consider the door below. It has handles, but it has them on both sides. Do the doors swing both ways? Are you supposed to push to open or pull? Do they work the same on both sides? You’ll probably be able to open these doors, but perhaps only after a momentary pause to think about how.

On a website a list of links, either horizontal or vertical, have greater affordance as a menu or navigational system than a string of characters in the middle of a paragraph.

Mimicking physical objects on a website or application can enhance usability by increasing perceived affordance. The idea is to mimic real and familiar objects with great affordance within the abstract context of a web page or software application.

For example using an image or code to represent a 3-dimensional button leverages knowledge about buttons as things to be pushed and makes use of the greater affordance of buttons for pushing.

The main lesson from affordance is to design objects that don’t need instruction about how to use them. You push buttons. When you approach a door with a handle you know to pull to open it. If you need to provide instructions for the use of a design or elements within the design, your elements and design as a whole have low affordance.

When affordance is done well it becomes hard to imagine how a design element or the design as a whole could be used in any other way.

Then again even great affordance along with a sign offering instructions might not work at the Midvale School for the Gifted.

Additional Resources

Here are some additional links to content I collected while researching affordances for this post.

• Affordances and Design
• Affordance, Conventions and Design (Part 2)
• Mouse Cursor Affordance
• Increase Your Usability and Website ROI with Perceived Affordance
• Affordance (Boagworld Podcast)
• Gibson’s Affordances (PDF)
• Affordances (PDF)

Summary

Ideally we never want someone to make an error when using our designs. Unfortunately it’s inevitable that errors will occur. We can’t anticipate every possible cause of failure and even if we could, we likely still couldn’t prevent them all.

What we can do is design our sites using strategies that reduce as many errors as is reasonably possible and minimize the consequences of any errors that occur as much as we can.

Errors can occur for reasons both unconscious and conscious. Each type will have different strategies to counter them, though many strategies we use will work to prevent both types of errors.

So far we’ve looked at one way to help users avoid errors. Increasing affordance in our elements and design as a whole is a good starting point for making our designs more usable and preventing errors.

Over the next couple of weeks we’ll look at more strategies for developing more usable sites. We’ll consider mapping, nudging, constraints, confirmations, and forgiveness. Through these design strategies we’ll help guide users toward a correct action, help keep them from an incorrect action, and do what we can to minimize the damage when an error can’t be avoided.

Overall we’re trying to build a better user experience, by making people confident in their use of our site and encouraging them to spend more time with our designs so they can complete their tasks without worry.

We’ll continue next week with a look at mapping controls to the effects of those controls and how to nudge users toward the most beneficial actions.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.