Guide Users to make the right choice
Example of design that exemplifies Error Prevention:
Closing a window on Mozilla Firefox.
Everytime I try to close a window of Mozilla Firefox, a smaller window pops up asking me to confirm my action (basically, whether I really inteded to close my window including all the tabs). This design examplifies Error Prevention, because it is very easy for a user to click the top left X by mistake, for example when trying to minimizing the window instead. By specifically asking if closing the window was my intended action, Mozilla saved me and my 50+ tabs open multiple times.
Example of design that negates Error Prevention:
Harvard Crimson Cash add value feature.
Let’s see what happens when I want to add money to my Crimson Cash account at Harvard.
1) Here’s the first page I find on the website, I (and most of the users) immediately press “agree”, without reading anything.
2) Then I find this page, where I need to input the special 8 digits from my Harvard ID card. Thus, I spend time searching for my card, reading and writing the numbers, and finally choosing how much money I want to add.
3) Next, I find the typical page where I need to write my billing address.
4) After all of this, I find myself at this page, which asks for my bank account numbers. What?? Where is the option to pay with a credit card? I click on the back button of my browser, but the data doesn’t load anymore, so I need to start all over again.
5) When I go back to the initial page, I see what I had initially missed: at the top of the page, I can select “Bank Account” of “Credit Card”. Thus, I click credit card this time.
6) I now have to redo all my previous steps, re-writing everything, with all the pages being the same as before. The only page that changes is the last, where instead of bank account numbers, it asks for credit card information.
This design choice for choosing bank account vs credit card strongly negates error prevention. It is true that I made a mistake initially, by not changing the selected paying method from to credit card. But the website did nothing to lead me correctly, and actually wasted my time by making me input everything twice. There is nothing that prevents users from making that initial error.
The design of Harvard Crimson Cash website could be improved very easily to make it conform to Error Prevention. Instead of asking the user to make the choice at the beginning, it could first request all the other steps. Then, in the very last page, the website could have a switch through which the user can go from bank account to credit card payment. This will present the user to make an initial wrong choice and waste time.
Design Improvement Sketch:
Last page should look like this:
After the user clicks on credit card, it will go directly to this: