As much as we might wish it weren’t so, we know errors are going to happen on our sites and in our applications. So far in this series of posts we’ve looked at the different types of errors that may occur along with some strategies for guiding users to take correct actions. This week we’ll finish up with a discussion of strategies designed to prevent errors and minimize the effects of errors when they do occur.
Once again here’s a quick reminder of all the strategies we’ve been looking at:
- 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 design element(s) they control.
- Nudge is a method for predictably altering behavior through design context 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
We’ve already covered the first three strategies above. Now it’s time to look at the last three beginning with the use of contstraints.
Constraints
Constraints are about limiting actions that can be performed on a system. For example disabling or hiding options in a form that aren’t currently available. I’m sure you’ve encountered a form that requires you to check the box agreeing to terms of services. The form’s submit button will be inactive until that box is checked.
Validation performed on the front end via JavaScript is a constraint designed to prevent incorrect or incomplete form submissions.
Another example is a jigsaw puzzle. The pieces will only fit together in certain ways thereby limiting how they can be put together. For the most part you can’t put the wrong pieces together, because they simply won’t fit.
There are two main categories of constraints.
- Physical constraints
- Psychological constraints
Physical Constraints
Physical constraints redirect physical motion in specific ways to reduce the sensitivity of the input to minimize unintended actions. They also prevent or slow dangerous actions. There are three types of physical constraints.
- Paths redirect linear or curvilinear motion in a channel of groove. A scrollbar for example limits motion to one of two directions. Paths are useful when the control variable range is small and bounded.
- Axes convert motion to rotational motion. They provide a control surface of infinite length as the rotation can theoretically continue forever. Axes are useful controls when real estate is limited or the control variable length is large and unbounded. Think of the wheels on a car or gears in machinery.
- Barriers absorb or deflect forces. They halt, slow, stop, and redirect. Barriers are useful for preventing accidental and undesired actions. You simply prevent an action from occurring so an error from that action can not be made. Again think of the inactive submit button. It provides a barrier to form submission.
Psychological Constraints
Psychological constraints leverage the way people think about and perceive a design as well as the world in general. They can be used to improve the clarity and intuitiveness of a design. Like physical constraints there are three types of psychological constraints.
-
Symbols influence behavior by communicating meaning through language. An icon for example. Symbols are useful for labeling, explaining, and warning through the use of visual, aural, and tactile clues. An alarm going off during a forced entry into a building is a symbol warning to stop.
-
Conventions influence behavior by making use of learned traditions and practices. Red generally means stop and green generally means go. We’ve learned both over time and associate those colors with certain behaviors.
Conventions are useful for creating consistent systems that are easy and intuitive to use. Blue, underlined text on a web page is a convention for a link. When you land on a page you’ve never visited before you know the blue, underlined text is (or should be) a link based on past experience.
- Mappings influence behaviors based on perceived relationships between elements. We’ve already discussed mapping so I’ll just say here that they are useful for implying what actions are possible based on the visibility, location, and appearance of the controls.
Constraints can simplify the usability of a system and reduce errors by limiting the actions that can be taken. If the system doesn’t let you make an error, it’s kind of hard to make that error. When the system requires you to take your desired action, the system becomes quite usable.
Confirmations
Confirmations are a technique for preventing unintended actions by requiring verification of the action before it is performed. “Are you sure you want to delete this file” dialog boxes are one example. Email and password verification on forms are another example as are the emails we receive to confirm a purchase.
Confirmations are primarily used to prevent slips. If you think you do want to delete that file you’re going to ok the confirmation, but if you mistakenly attempted to delete the file the confirmation will give you an opportunity to correct the error before the file is actually deleted.
Dialog boxes like this should generally ask a question with a yes/no choice and should avoid the ok/cancel choices as they can be more confusing. Apparently the above images didn’t follow that advice.
Confirmations naturally slow task performance as an extra step is required before an action is performed. In fact that’s the idea since they’re used to prevent actions that may not have been intended. Because of this they should be used for critical or irreversible operations only.
No one wants every action they take questioned and if confirmation boxes are used too frequently people will ignore them and just click through making them useless.
Another way to provide confirmations is by developing actions as a 2-step process by including a preliminary or intermediary step.
For example 2 people need to turn a key to launch nuclear weapons. The extra person and extra key require confirmation, which is clearly a good thing where launching nuclear weapons are concerned. This 2-step confirmation process is often referred to as arm and fire, given the previous example. It’s mostly used with hardware controls.
Confirmations can be a great way to help minimize errors by giving the user a chance to abort unintended choices. You have to be careful not to overuse them or you run the risk that all confirmations will end up being ignored.
Windows Vista had the problem where too many confirmations were used for security. Users started clicking through the dialogs without reading them and even turning off their security completely. Ultimately something designed to make the system more secure led to less security.
Another example of a 2-step process is the trash can on operating systems. Files aren’t truly deleted when places in the trash. Another step is needed to delete them, though even then they are still recoverable with some effort. WordPress took this route with version 2.9 when it introduced trash. When you delete posts. pages, comments, etc. they are placed in trash giving you an opportunity to recover them if you deleted them in error.
Forgiveness
Forgiveness is the idea that designers should do what they can to help people avoid errors and where unavoidable minimize the consequences of errors. Some errors are inevitable, but they don’t need to be catastrophic.
The idea of forgiveness includes most of the strategies we’ve discussed to this point.
A forgiving design provides a sense of security and stability to an interface. It leads to a willingness to learn, explore, and use a design. If you’ve ever watched someone use a computer for the first time there’s an uneasiness in doing things for fear they will do irreparable harm to the computer. Sadly this is often due to things like cryptic dialog boxes and it leads to being afraid to explore and learn.
Once people get past this initial fear they usually learn how to use the computer and it’s software much more quickly as they’ll click on things without knowing what will happen in advance.
They’ve gained confidence that their actions won’t cause permanent damage because they’ve learned the system is more forgiving than they first thought. Their frame has changed from the computer being something easy to break to one that forgives mistakes.
There are 6 common strategies for building forgiveness into a design some of which we’ve already discussed.
- Good affordance by adding characteristics of a design that encourage correct use.
- Reversibility of actions such as adding undo functionality to make sure actions can be reversed in case of error.
- Safety nets and redundancy to minimize the consequences of catastrophic actions.
- Help to provide information to assist in basic operation, troubleshooting, and error recovery.
- Confirmations that require verification before an action is performed.
- Warnings through the use of signs, prompts, and alarms to warn against dangerous actions.
The first three items listed above are most preferred. If you have good affordance, reversible actions, and safety nets designed into the system it will minimize the need for help. confirmations, and warnings.
When affordance is good people are less likely to need help. When actions are reversible, confirmations become less necessary since slips can be easily recovered. When safety nets are built in warnings become less important as danger is minimized.
That’s not to say the last three strategies shouldn’t be used, but rather that the former three mean less dependence on the latter three.
Building forgiveness into a design is very important as it helps reduce the frequency of errors and reduces the severity of those errors that do occur. In many ways forgiveness is a summation of all the strategies we’ve been looking at in this series of posts.
If your design elements have good affordance, if your controls are mapped well to their effects, if you carefully nudge users toward correct actions you improve the forgiveness of your system.
If you help prevent errors through the use of constraints and make sure users really want to take certain actions before performing those actions then your design is more forgiving.
As users learn your system is forgiving and helps them avoid errors and minimizes the impact of errors that do happen, they gain trust in your system and gain confidence in exploring it further. Ultimately they use your design more.
Summary
Errors happen. No one wants them to happen, but they do. It’s impossible to predict every possible error that may occur and people will make mistakes and slips despite our best efforts. What we need to understand is that many errors are preventable and most errors are the result of poor design and not poor users.
We can design our sites, applications, and systems using strategies that reduce as many errors as is reasonably possible and minimize the consequences of errors that do occur as much as we can.
Through the use of good affordance, good mapping, gentle nudging, intelligent constraints, and occasional confirmations we build forgiving systems and we make our designs more usable. We help people use our designs in ways that lead to less problems.
We also build a better user experience (PDF), by making people confident in their use of our designs, encouraging them to spend more time with our designs so they can complete their tasks easily and without worry.
I hope you’ve enjoyed this look at errors and ways to prevent them and minimize their consequences. As designers we should be doing all we can to create more usable designs and create more enjoyable experiences for the people who interact with our sites and applications.
Download a free sample from my book, Design Fundamentals.
0 comments