10 Ways Designers Can Prevent User Errors
The Nielsen Norman Group outlines ten usability heuristics for user interface and interaction design. One of these principles involves clearly informing users when they make an error and how to correct it.

However, an even better method for handling user errors is to stop them from happening at all. This is known as Error Prevention.

Error prevention in UI design refers to ways designers can create interfaces to help users avoid making errors. Instead of waiting for users to make errors and then informing them of their mistakes, designers can anticipate common errors and intentionally implement design elements to help prevent users from making these errors at all.

In this article, I will outline the basic principles of error prevention along with examples of how I implemented these principles when designing CareMessage's web application.
"The term “user error” implies that the user is at fault for having done something wrong. Not so. The designer is at fault for making it too easy for the user to commit the error. Therefore, the solution to user errors is not to scold users, to ask them to try harder, or to give them more extensive training. The answer is to redesign the system to be less error prone."

1. Confirm Consequential Actions
One of the simplest ways to prevent errors is through a confirmation modal. These modals act as a form of design friction, as they force users to slow down and make a decision.

Confirmation modals should be used to confirm actions with the most consequential errors, especially actions that cannot be undone.
When uploading a file with appointment data to CareMessage's web app, users choose between creating or deleting appointments.

Accidentally selecting delete would be very consequential and frustrating. Thus, when users choose "delete appointments," they are asked to confirm their decision.
2. Warn Before Errors Are Made
If possible, informing users about potential rules and restrictions ahead of time can prevent errors. This saves users time from having to submit a form, read and understand the error message, and then correct their mistake. If users are aware of these conditions initially, they can avoid making those mistakes.
Instead of waiting until after users submit a form to inform them that they wrote too many characters, showing a character counter sets expectations and lets users know what the limitations are. This saves users time and avoids potential frustration.
3. Include Helpful Constraints
In scenarios where there are rules that restrict the choices a user can make, design elements can be used to only allow valid choices. By not allowing incorrect choices to be made, any potential errors from making an incorrect choice are avoided.

A common example of this can be seen when choosing dates for something in the future, like a flight or hotel stay. Because a flight can only be booked for the future, dates in the past on a date selection calendar should be disabled so they cannot be selected. This avoids the scenario of a user accidentally selecting a date in the past and then needing to correct their error.
When CareMessage users schedule a message, they must choose a date that is in the future. In this example, it is September 2, so all dates before then are grayed out and cannot be selected.

This is also useful if users want to schedule a message on a specific weekday. The calendar helps users confirm that the date they choose is on the weekday they intended.
4. Use Forgiving Formatting
Some information, like credit card and phone numbers, must be input by users in a certain format for your system's database (i.e. without spaces or symbols). However, this format may be difficult for users to scan and check after they type it, making it more likely that they will not notice a typo.

Within a input form, information should be broken into small chunks that are easy for users to scan, even if it is not stored in that format within your system's database. This makes it easier for users to find and fix errors before submitting a form.
Automatically breaking a phone number into small chunks as users type it in makes it much easier for users to review the information they inputted and check for errors.
5. Remove Memory Burdens
While designers would love to have 100% of a user's attention at all times, realistically, users are humans who are likely multitasking and will get distracted or interrupted while using your product.

Especially in multi-step workflows, users may need to be reminded of some contextual information or may forget if they already completed a task. Interfaces need to be designed such that it is easy for a user to step away, come back, and immediately recall their progress.

Displaying contextual information within interfaces reduces the amount of information users need to remember, which makes it less likely that they will make a mistake from forgetting something. This also saves users time and effort from unintentionally completing the same step multiple times.
When importing patient data into CareMessage's web app, users select their desired action and then see the list of required and suggested fields to include in their file. This helps users remember which information they need to include without relying on users to have this information memorized.

After this upload step, users move to the second step of the file upload workflow, where they must match their file headings to the required fields. Once again, the required fields are clearly listed on the page, helping users remember which fields they need to have. To provide even more clarity, the required fields are checked off as users map them, and the "Next" button is disabled until all required fields have been matched.
6. Follow Design Conventions
Jakob's Law of UX reminds us that “users spend most of their time on other websites.” This means that your design does not exist in a vacuum and should match design patterns that are common across other apps and websites.

Leveraging common design patterns helps remove friction and enables users to accomplish their goals faster. Deviating from these standards increases the likelihood that users will make errors.
When users see these green and red horizontal ovals marked on or off, the expectation is that it is a button that will act as a toggle. Users expect that clicking a green "On" toggle next to a message will disable that message. To provide even more clarity, when the message is disabled, the content is hidden because it won't be sent.
7. Choose Good Defaults
When confronted with a page or form for the first time, users may feel overwhelmed or unsure of the best way to use it. Default selections can be used to guide users and offer helpful suggestions, which helps avoid user errors.

Default selections should be aligned with a user's goals. If your product analytics show that 90% of users make a certain selection, selecting that option by default will save them time. Designers can also reduce risk by defaulting to less consequential options.
When creating a new user profile within this app, users can select between a "Staff Member" or a "Supervisor" role. Within a customer's account, the majority of users are Staff Members, with only a few acting as Supervisors.

Staff Members are restricted in what information they can access, while Supervisors can see everything. Since this app includes patient health information, it is less risky for users who accidentally skip this field to mistakenly make someone a Staff Member than it would be to mistakenly give someone access to data they shouldn't legally see (in a Supervisor role).

Thus, "Staff Member" is selected by default.
8. Communicate Affordances
Within an interface, the intended use of each object or element (its affordance) should be very clear to users. Signifiers, or ways to indicate an object's affordance, should be included to communicate how an object can be used.

The clearer it is to a user on how an interface should be used, the less likely it is that they will make a mistake when using it.
Signifiers express to users that this blue oval is a button. In addition to following typical design conventions of what a button looks like, when users hover over the button, it moves and its shadow grows. This signals to users that this is an interactive element that they can click.
9. Preview Results
Allowing users to preview their input before triggering an action helps ensure the information is correct. This builds user confidence, especially around actions that are less straightforward or have more severe consequences if mistakes are made.
In this example, users can input tags when creating RSVP appointment reminders which will eventually be filled with patient data. There is also a non-customizable part of the message that is automatically added at the end.

To help set expectations and ensure users feel comfortable with how their message will be formatted, they can click "View Message Preview" within the template creation form to see the tags they inputted filled with sample data. This helps users see the full text of their message so they know exactly what to expect.
10. Offer Suggestions
Providing relevant suggestions to users helps them accomplish their task faster and avoids the risk of them making an error. When searching for something specific, users often make typos or misremember the name of the item they are seeking. Offering suggestions helps jog user's memories and decreases the chance of them making a typo or other error.
Most people will not spell "Anesthesiology" correctly from memory.

When searching for a specific message template in CareMessage's web app, users can see a list of suggestions as they type. This helps users find what they are looking for faster and more efficiently.
User interface designers should make an intentional effort to design interfaces in ways that decrease the opportunity for user error. Error prevention saves users time and avoids potential frustration, which means they will be more satisfied with their overall experience and more likely to return to the product.