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?