Skip to content

Principles of Design: Forgiveness

Designs should help people avoid errors and minimize the negative consequences of errors when they do occur.

This is an interesting and important principle to get right. It doesn’t matter how many hours you spend testing your work eventually something will go wrong. The most usable sites are the ones that minimize the consequences when errors do occur.

Have you ever been on a registration form and found that once you submitted the form and it didn’t work that you have no idea what you did wrong? I sure have. It is one of the most frustrating things to experience online. You have to scroll back through your inputs and try and figure out what you forgot to input or what you put in incorrectly. In that example, a forgiving site would be one that provides warning signs or prompts letting you know you did something wrong so you can fix it.

A few months ago I was at the government website to pay some back taxes. It was extremely frustrating and I was not able to figure out how to make a payment online until I called and they explained how their system worked. Take a look at this screenshot:

When I was filling out this payment form I put in all of my credit card and personal information and I clicked on the button in the bottom right corner that says “Submit”. In my mind, that should have submitted my payment. Nothing happened. I didn’t receive an error message or prompt of any kind. After trying for 5-10 minutes I concluded that the site was broken and picked up the phone. In reality, the secret to this payment page is that there are 5 different pages of information that they require. There is a small button in the top left that says next. If this page had some kind of warning message that pointed this out when you clicked submit, it would have been much more forgiving. As it is, it’s a disaster for usability.

So, how do you design your pages to be forgiving? There are 3 main things you can follow to ensure your website is forgiving to your users.

Create good affordances

An affordance is a characteristic of the design that influences a correct action. The most obvious one that comes to mind is a door that has a handle versus one that has a flat slate of metal. One affords pulling the other affords pushing. This is a preventative measure that will help a user from inputting incorrect information or clicking the wrong button.

Reversibility of Actions

Reversibility of actions is pretty self-explanatory, it means that your actions can be reversed. A great example of this that I use every day is the undo history in Photoshop. If I do something that I don’t like or didn’t mean to do I can go back in steps and get my work back to what I want.

Warnings and prompts

Warnings and prompts are prompts that show up and let you know if you are about to do something or have just done something that would throw an error. This is most seen in a contact form. If they forget to fill out a required field it would through a red notification that you forgot to fill it out.

What kind of websites have you been to that are forgiving or which ones are frustratingly unforgiving?

you may also like

Utah’s Premier Ways That Digital Marketing Could Increase Your Company’s Bottom Line

Have you thought about how important digital marketing could be to your business? Perhaps you are wondering…

7 Reasons Why A Website is Necessary for Your Small Business

Does your small business have a website? Are you thinking about having a website created for your…

5 Key Factors Why You Should Do a Website Redesign

In a recent study, as many as 67 percent of people cited a website’s design as the…

ada-and-wordpress

What is ADA Compliance, and Why is It Important for Your Website?

We all do so many activities online on a regular basis. Being online is so interwoven into…