Good error messages are important, but the best designs carefully prevent problems from occurring
in the first place. Either eliminate error-prone conditions or check for them and
present users with a confirmation option before they commit to the action.
This one is especially important when it comes to working with forms. Having proper validation is good; having
natural language explaining errors and mistakes is also good.
Many methods, including hints, autocompletion, asking fewer fields, and remembering previous options, can achieve this.
From personal experience
A long story about how I lost money and what could be done to prevent it.
I use a bank application to pay my utility bills. To do so, I enter my special code for paying for gas and electricity.
The app saves the code so that I don't need to enter it again.
But the application is really buggy. When I open the screen, I can see whether I have any debt or not; usually it shows
zero debt. But if I enter my code again and search once more, I might see that I have some debt. So I get used
to re-entering the code every time.
Then, it started showing me two records, both with zero debts. Both records were associated with the same code. Despite
having the same first name, each apartment owner had a different second name. And if I click on each record to see
detailed information, I will find that these are two different people.
But I didn't notice it and I thought that it shows me two records because it was a bug. So I paid whenever I had some
debt.
So what happened? I paid on 10th February. Then, on 25th February, a woman called me saying that I have a debt and they
were going to turn the gas off. I wondered why I always pay twice per month?
So it turned out that I paid for myself and for another person for the whole year or so.
Despite their different names and Armenian alphabet writing, both records display and highlight the same gas code. I'm
not sure why, as it appears to be a bug, but the appearance of the second record remains a mystery to me.
For electricity, it's much simpler. I made a TYPO once, and one digit in the code was incorrect. But it belonged to
someone else. When I paid for the incorrect code, the system remembered it and started showing me two numbers.
Since it was a TYPO mistake, I didn't notice it.
How could we prevent it?
When I make two transactions per month, for different addresses and different people, the application should at least
once warn me and ask if it's intentional or not.
It might be reasonable to let me add an apartment and link two codes to it. The app must be fixed so I don't have to
search every time to see if I have debts.
If they cannot add such an entity as "apartment", the overall UI should be more prominent so that I could see the full
owner name, address, code, and notice if something is wrong.
But even if every bug is fixed, I still might want to pay for someone else. A warning would be very beneficial.
Something like, "You have already paid this month; are you sure?" or "You are going to pay for another person, is that
correct?" or even better, "It looks like you made a TYPO; the code is almost the same. Could you confirm that you want
to pay?".
You got the idea.
Examples of applying the error prevention heuristic
There are many options, but the core idea is to prevent users from making a mistake.
Inline Validation
While filling out a form, users get real-time feedback (e.g., "Password must include a special character") instead of
waiting until after submission. While it's considered a validation error, it's not a mistake that the user has made; on
the contrary, we tell them whether password rules are satisfied before the user submits this form.
Pre-filled Data
For example, you can auto-fill the country based on geolocation when users are entering their address or phone numbers.
Yes, users can use a VPN, but in this case it's a trade-off; they know that other sites will show them a wrong country
code.
Reasonable Defaults
If you have a complicated form, chances are there are some values that will suit the most users. Setting reasonable
default values is another good step to prevent making mistakes for non-experienced users.
Restricting Input with Masks
If used properly, masks can sometimes be useful for inputs that require a specific format.
Providing Hints
One of the most universal and easy-to-implement methods is to simply provide hints when needed. There is no need to go
crazy and put hints under each input, but if it makes sense, then it's a great way to prevent errors. Note that a good
practice is to show them right away, instead of hiding under icons.
Catching possible problems in advance
Gmail shows an alert if you mention an attachment in the body of your email but you haven't attached any files.
Another example from Kit: when you make a newsletter issue and put links
inside it, Kit checks whether they are accessible or not and shows an alert if a link is broken.
Key Takeaways
Design interfaces that prevent errors before they occur
Eliminate error-prone conditions where possible
Provide clear confirmation options for important actions
Use appropriate constraints and validation to guide users
