{"id":10877,"date":"2017-07-17T12:12:57","date_gmt":"2017-07-17T11:12:57","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=10877"},"modified":"2017-07-17T12:12:57","modified_gmt":"2017-07-17T11:12:57","slug":"design-principle-error-forgiveness","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/design-principle-error-forgiveness\/","title":{"rendered":"Design principle: Error & Forgiveness"},"content":{"rendered":"

Making errors is an integral part of the way we humans live. We trip over when we are learning to walk and we press the wrong buttons when we use new UI. This fact is very unlikely to change soon.<\/p>\n

As Designers, we must have that in mind when designing. Our designs must be aimed at preventing errors happening. Design must minimize the negative impact of errors when they occur and provide a way to reverse them if possible.<\/p>\n

<\/div>
<\/svg><\/div>

\"We trip over when we are learning to walk and we press the wrong buttons when we use new UI.\"<\/p><\/span><\/blockquote>\n

Let\u2019s take a look at some of the main error categories that we need to pay attention to, when designing.<\/p>\n

Slips, Lapses and\u00a0Mistakes<\/h2>\n

Slips happen when you walk on ice.\u00a0:) In other words, when people perform an action and the result is not what was intended due to misstep.<\/p>\n

A good example, are typos when texting on my phone and I\u2019ve tapped the wrong letter because my fingers are chubby. Or, when I try to handle Instagram with one hand and want to reach the far corner action icon suddenly the base of my thumb presses the home icon.<\/p>\n

Lapses are a brief failure of concentration, memory or judgment. In a world, where the average person has short attention span lapses are frequent type of errors. Most of the cases they happen due to distraction either in the user interface or in the environment the user is using our product. Other times is just due to the passage of time.<\/p>\n

An example of a lapse could be the failure to pay automatically my membership subscription because the system didn\u2019t notify me that my credit card has expired. It could have sent me an email to input my new card but it didn\u2019t. Now, it\u2019s my fault for not remembering it!<\/p>\n

Mistakes occur when the user has incorrect knowledge or an incorrect assessment of a situation. This develops a mental model that leads to an error most of the cases. People are goal orientated and if the system\/app does not provide them with correct information\/guidance they do mistakes. Usually, that leads to trial and error approach. Unfortunately also to not so good user experience.<\/p>\n

For example, I\u2019ve been tweaking my profile settings for 10 minutes. When I am finally done, I click on my profile to check out the changes only to find out that they were not saved and everything is lost. 10 minutes of my life lost forever!
\n\"But slight mistakes accumulate, and grow to gross errors if unchecked.\u201d
\nSo let\u2019s see what can we do to design in a way that prevents such mismatches between the people\u2019s expectations and our products.<\/p>\n

Prevention and forgiveness (Ctr+Z)<\/h2>\n

Our designs must help people avoid errors and protect them from harm if errors occur. Here are a few strategies to achieve that.<\/p>\n

Affordances and constraints<\/h2>\n

\"\"<\/a><\/p>\n

<\/div>
<\/svg><\/div>

\"Our designs must help people avoid errors and protect them from harm if errors occur.\"<\/p><\/span><\/blockquote>\n

<\/p>\n

Image source<\/a><\/p>\n

Use the knowledge your users have of other products and designs to establish a baseline for your design. That\u2019s why it\u2019s a good idea to use already established usability patterns. Buttons should clearly communicate that they are buttons, doors should clearly indicate if you need to pull or push and etc.<\/p>\n

Avoid assuming that your user knows how to use your product, user test it! Save the user from inputting incorrect information or clicking the wrong button. Design UI that communicates clearly what the purpose is and provides guidance for the user to complete her\/his task.<\/p>\n

Previews for a glimpse of the\u00a0future<\/h2>\n
\"\"<\/a>

Nike shoe configurator with preview of how the show looks<\/p><\/div>\n

<\/div>
<\/svg><\/div>

\"Use the knowledge your users have of other products and designs to establish a baseline for your design.\"<\/p><\/span><\/blockquote>\n

<\/p>\n

Allow users to compare where they are going before they make the final decision. Enabling the user to preview the changes that will occur is a powerful technique to prevent unexpected results.<\/p>\n

For example, applying effects in Photoshop provides a preview option so the settings can be adjusted before the effect is applied.<\/p>\n

Alarms and checklists<\/h2>\n
\"\"<\/a>

UI image by Michael Hutchinson<\/p><\/div>\n

<\/div>
<\/svg><\/div>

\"Allow users to compare where they are going before they make the final decision.\"<\/p><\/span><\/blockquote>\n

To\u00a0deal with short attention spans and lapses use clever alarms and checklists. Setting a reminder\/alarm at the right time to inform the user that an action is required can provide your users with great UX and save them from errors.<\/p>\n

Whenever possible, save the user from the trouble of keeping information in their short-term memory. Use task lists or checklists to eliminate the condition of remembering all the tasks that need to be done.<\/p>\n

<\/div>
<\/svg><\/div>

\"Enabling the user to preview the changes that will occur is a powerful technique to prevent unexpected results.\"<\/p><\/span><\/blockquote>\n

Remember, people use products in the real world which is full of distractions, especially valid for mobile apps. Make sure to design with the usage context in mind.<\/p>\n

Confirmations and\u00a0warnings<\/h2>\n

Sometimes, people don\u2019t realize the red button they\u2019re about to press means that everything goes to hell. Ask for confirmation in cases where making a choice can lead to a mistake or harmful result.<\/p>\n

<\/p>\n

\"1hW-F01He-0PsqkERmkHMoA\"<\/a>

Confirmation window asking you if you really want to leave the page without saving your settings is a must if you don\u2019t have auto save!<\/p><\/div><\/center><\/p>\n

<\/p>\n

<\/p>\n

\"Save the user from the trouble of keeping information in their short-term memory.\"<\/p>\n

Use alerts when something is about to go wrong. Make sure the warning is clear and communicates useful and actionable information.<\/p>\n

Forgiveness<\/h2>\n

The power to undo is tremendous! Whenever possible design the product to forgive mistakes and allow the user to reverse any actions that led to them.<\/p>\n

Whenever possible create a safety net. Version control, parachute systems and archive of the deleted folders in your cloud storage, all of these can be lifesavers (literally in some cases).<\/p>\n

Final thoughts<\/h2>\n

Designs that account for errors and are designed to be forgiving provide security and stability. Users are happy when they feel secure and safe. They can explore and use our designs without worrying or feeling dumb that they do all these errors.<\/p>\n

Users enjoy using forgiving products and once they\u2019ve experienced forgiving design they don\u2019t settle for designs that don\u2019t offer that.<\/p>\n

This post was originally published on Antons's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Making errors is an integral part of the way we humans live. We trip over when we are learning to walk and we press the wrong buttons when we use new UI. This fact is very unlikely to change soon. As Designers, we must have that in mind when designing. Our designs must be aimed at preventing errors happening. Design… Read More ￫<\/a><\/p>\n","protected":false},"author":117,"featured_media":10884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-10877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n