One night while driving through a dark desert road, I missed a sharp right turn and ran straight into the ditch. The warning sign, placed shortly before the turn, was barely visible under the cover of darkness.

Think about the last time you intended to take some particular action (driving for instance), but it didn’t go quite as you had planned. In general these are called errors, and it’s fairly common for people to make errors like mine. The consequences of errors are often negative with varying degrees of severity, from a slap on the wrist to a global environmental crisis.

Remember the BP oil spill?

When products are designed following the Principle of Forgiveness, the negative consequences of errors can be mitigated or prevented altogether. Products that are forgiving allow users to feel more confident, secure, and eager to explore unfamiliar territory. Conversely products that neglect forgiveness leaves little room for error. Would you consider driving a car with no seat belts or airbags?

The following strategies can be used to design with forgiveness in mind.

Good affordance

The term affordance was coined by perceptual psychologist James Gibson and popularized through Don Norman’s The Design of Everyday Things. In traditional product design, affordance is the physical quality/property of an object that suggests how it should be used. Objects with good affordance provide strong visual clues for users to determine their functionality.

“When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed” — Don Norman

The classic example of affordance is the design of this door.

Photo: http://ift.tt/2qUOxqs

Affordance is influenced by the physical characteristics of an object. The door handle appears to be something you can grab and pull, while the push plate appears to be something you can push. The door handle affords pulling and the push plate affords pushing. This door exemplifies good affordance because how you think the door opens (perception) matches how the door actually opens (function). Products with good affordance enable users to intuitively understand how it should be used.

In the world of digital products, graphic interfaces have perceived affordance because 2D objects lack the tactile properties of physical products. Perceived affordance is what users expect will happen when they interact with a digital object; they exist only within the digital realm. Clicking an object can have infinite outcomes depending on what was programmed (eg: save, delete, refresh, etc). Good affordance is therefore achieved when an object’s programmed function matches the user’s perception of its function.

The distinction between perceived and actual affordance is rather nuanced. Users interact with interfaces using physical products with actual affordances. The computer mouse affords clicking objects, but the affordance has no inherent value if clicking doesn’t effect the interface (eg: computer is turned off). Designers care more about the perceived affordance of objects like this button:

What happens if you click it? You may think “its gonna wipe out my computer!” That is the perceived affordance, and it may deviate from the button’s actual functionality. Your expectations, even assuming that the button is clickable, are developed through repeated interactions with similar looking objects. When outcomes to actions are predictable, users start trusting products and avoid making errors. Use the following methods to reinforce the perceived affordances of common digital objects.

Follow conventional patterns / metaphors

Designers should follow conventional UI patterns to shorten the learning curve for users. Don’t reinvent the wheel unless absolutely necessary. Check out UI pattern libraries like ui-patterns, pttrns, or About Face.

Use conventional UI patterns to shorten learning curve for users

Metaphors simplify complex ideas. Users interpret visual metaphors by applying their experience with physical products to similar looking digital objects. For example, the trash icon is a metaphor for deletion because users quickly understand how to “throw away” files. Check out icon libraries like Noun Project or Material Icons for inspiration. Objects with dimension (gradients and shadows) generally help reinforce metaphors because they resemble real-world objects.

Make actions explicitly clear

Users typically interact by clicking, tapping, swiping, and dragging objects across the screen. However, taking the same action can have different outcomes depending on the application. On iPhones swiping right can both ‘like’ a match on Tinder or shut down your phone.

Help users build trust in your product by marking actions with clear language. Products should allow users to anticipate the outcomes of their actions through verbal feedback before, during, and after its completed. Pair words with supportive metaphors/imagery/icons to further reinforce ideas. Check out Usability.gov, Material Writing Guidelines, and Hemingway for tips on good copywriting.

Warnings

Warnings are signs or prompts that warn of potential danger in taking certain actions, and they are ubiquitous in the physical world (eg: hazardous road signs, radioactive zone signs, poisonous material signs). When the consequences of actions are severe, warnings need to be designed for universal accessibility by using icons, diagrams, or color. Designers should also consider context (when/where/how users make errors) and provide warnings that are accessible under all conditions. For example, road signs need to be visible under daytime, nighttime, and stormy conditions.

Airline safety cards are available on every flight. Users can interpret the instructions regardless of their native language.

In digital products, confirmations are prompts that warn and verify intention before taking critical actions. You’ve probably encountered confirmations in the form of dialogs. Dialogs are small screens that prompt users for a response, and are also used to warn users when taking irreversible actions. Clearly state the action on the primary button and provide a short explantation of the consequence.

Confirmations are often used for ‘delete’ actions

Another method called 2-step operations requires a preliminary step to complete critical actions. Users are more likely to complete 2-step operations intentionally than actions that only require one step.

Shutting down your phone requires a 2-step operation

Designers should use these methods for critical actions only because they slow down user performance. Don’t inundate users with unnecessary actions for mundane tasks. The last thing you want is for users to ignore warnings altogether. Conversely, not using confirmations at all may aggravate users who make errors that are irreversible.

Safety nets

When errors do occur, its negative effects are minimized by putting safety nets in place. Safety nets are devices or processes that cushion the negative impact of errors. Designers should consider all scenarios in which users make errors and install proper safety nets.

Safety nets allow room for error when using products. Illustration by Koren S.

Digital products with safety nets support the reversibility of actions for users to undo errors. Another method called autosave automatically saves changes to content, which prevents data loss when users forget to save. A similar method called version control is used by products like Dropbox, which automatically stores a historical record of all file versions.

Gmail allows you to undo the ‘delete action (left), Atlassian Confluence supports autosaving (right)

Help

Good products offer documentation, instructions, and other help channels to assist users. Designers should anticipate where errors occur and provide resources to troubleshoot through errors. Since time is crucial, products with live channels for help is much more preferable (phone line, live chat, or in-person support).

People are inpatient — provide live channels for whenever possible