Forgiveness: Your Design Has to Handle Mistakes…
Humans make mistakes, a lot of mistakes. Thus, designs of all kinds have to expect mistakes and react with forgiveness. No matter how hard you try, you won't always be able to prevent people from making mistakes when using your designs. Let me prove this with an example.
There's No Cure for Stupidity?A while ago, an older local lady tossed a five-figure (according to her) amount of money into a charity bin. She said she had inherited the money and had hidden it in a shoe. To top it off, she only noticed her mistake a week after she threw the shoe into the container. Is this an example of a mistake that only the affected person could have prevented? Either way, it is clear that the standard design approach won't let you get around these stupid mishaps. Would a sign at the container have helped? "Please make sure not to throw money into the charity bin"? Or should these bins basically work via double-opt-in? "You want to throw something into the container? Are you sure?" On the first attempt, the items are pushed back out of the container. They're only kept in on the second try. Hard to mimic, and surely difficult to advocate for acceptance aspects.
Forgiving Design Even Works For Absurd MistakesNonetheless, even here, we can still prepare our design for human mistakes. A forgiving design, which is what this article is about, could have been accomplished with the following sign: "If you have accidentally thrown something into the charity bin, please call us within two work days under the phone number 123456." This probably wouldn't have helped the lady from our example either. After all, she only noticed her mistake a couple of days later, but, in general, this kind of message could definitely be successful. Naturally, the processes behind the message need to be installed. It wouldn't help if the lady called the number, just for someone to tell her that nothing could be done about it. And, where did she even get that number from in the first place?
Forgiving Design is a Mix of Guidance and Safety WebAs you can see: forgiving design is a mix of good guidance in advance, and sensible safety webs being there if need be. Imagine yourself driving in your car towards a sharp bend. How could we protect you from making mistakes? Here, it would make sense to lower the speed limit, and notifying the driver that there's a sharp curve ahead - early and multiple times. Within the curve, there should be solid crash barriers as a safety web in case the previous guidance failed. [caption id="attachment_104252" align="alignnone" width="1024"] The crash barrier is a perfect example of a forgiving design element. [/caption] (Image by Ulrich Dregler from Pixabay) Some mistakes are so grave that we talk about human failure. Remembering two trains crashing in Bad Aibling, Bavaria two years ago. The underlying process was obviously suffering from grave design errors. Neither a sufficient inherent control function nor sensible safety nets were provided for the case of emergency. This example is just meant to clarify which enormous significance careful design has, and why it should definitely be forgiving. For forgiving design, there are a few tips, and while they may seem a bit retro, they never lose focus on the human.
Tip #1 | Affordance: Design With a Prompting TouchThe best practice for forgiving design is considered working with a clear affordance. The most common example for this is a door with a handle on one side, and a mere metal plate on the other. This way, the door prompts the user to pull on one side and to push on the other. The design itself has a touch of affordance. Additional interpretations or instructions are redundant in this case, though this case is not always this simple to create. [caption id="attachment_104255" align="aligncenter" width="1024"] You can also take affordance too far. [/caption] (Image by Bruno /Germany from Pixabay) The days of design with affordance being rather simple are over, though. Those were the days of skeuomorphism, where app designers tried to make digital products look as similar to their real-world counterparts as possible. As a result, we had calendar apps with a leather look and ring binding, or switches that actually looked like switches, and worked like them. From the perspective of affordance, those were the golden days. The flat design brought a much more abstract way of design into our lives. At least, nothing here can be derived directly from our everyday life. However, the modern human has gotten so used to digital media that the new elements (also known as microinteractions) are easy for him to get used to. Just recently, I wrote this article describing why microinteractions are becoming increasingly more important. [caption id="attachment_104251" align="aligncenter" width="1024"] When your design is that confusing to the user, you should go back to the drawing board. [/caption] (Image by Maddy Mazur from Pixabay) In order to not make things harder than they have to be, designers should use established UI patterns. Examples for that could be Google's Material-Design-Guidelines, or patterns from Zurb or Bootstrap. Additionally, it is also true that modern UI elements are more like to be recognized the more they resemble everyday objects with the same function. Here, shadows, gradients, textures, and anything else that could help users relate can be useful. In order to increase the affordance character, you should give clear names to actions, and not leave the guessing to the user. It is very important that your actions don't collide with the standard behavior of the operating system. The iPhone's swipe gestures are a very common sandtrap.
Tip #2 | Allow Users to Revert Accidental ActionsYou know this from the Office applications, as well as Photoshop. How often have you removed accidental Photoshop steps? This special form of forgiving design is the best safety web you could integrate. If nothing is final, the user will have an easy time getting used to your control concept. [caption id="attachment_104253" align="aligncenter" width="1024"] Unsolved problem: getting the toothpaste back into the tube. [/caption] (Image by Steve Buissinne from Pixabay) Of course, not all actions can be absolutely reversible. Where that is not possible, forgiving design should be considered from a guidance perspective. If the user has to make an irreversible decision, slow down the interaction by breaking it down to two steps, and making the user confirm it with a "Do you really want to do this? This action can not be reverted.". Here, it is important to give a clear label to the action, leaving no room for doubt regarding the effect of the decision.
- The Term Affordance in UI-Design | Philipp Holzer
- Designing for Forgiveness | Jules Cheung
- Design principle: Error & Forgiveness | Anton Nikolov
- Principles of Design: Forgiveness | Adam McGee