UI/UX Errors: Don’t Blame the User, Re-Evaluate Your Design Strategy Instead

The term “user error” implies that it’s the user’s fault when they do something wrong.

But in the vast majority of cases, the fault actually rests with the designer for having created an interface that is confusing or makes it too easy for the user to make a mistake.

The solution to user errors is not to blame the user or try to train the mistakes out of them. The solution is to redesign the product in such a way that it prevents errors from occurring in the first place.

There are lots of practical ways to do this, and we’re going to cover some of the most effective ones in this article.

Preventing errors

First, let’s talk through some preemptive ways you can help users avoid errors.

1. Install guardrails

Provide helpful constraints so that users can’t make a wrong choice. It’s not always a good idea to limit options for a user, but when there are clear rules for what works and what doesn’t it’s good to have guardrails in place to prevent mistakes.

Examples: Phone number or credit card fields that don’t allow alphabetic characters. Airline sites that don’t allow you to pick a return date that falls before your departure date.

2. Offer suggestions

Like constraints, suggestions can guide the user toward the correct use of your product. They can help avoid accidental errors, find what they want, and remember what options are available.

Examples: Google search results offering suggestions for spelling errors. Uber showing recent locations as possible destinations. Autocomplete with contextual suggestions while the user types.

3. Choose smart defaults

Good defaults are helpful because they teach users what a reasonable value would be for the given input. Pre-populating fields with the most common value or a personalized one provides context and helps them see when they’re on the wrong track.

Examples: Using geolocation to determine what the likely departure location is on a flights app. Presets like Tomorrow or Next Week in a reminders app.

4. Follow conventions

Jakob’s Law says “users spend most of their time on other websites.” Your users have been trained by thousands of other sites and apps to expect things to work in a certain way. Not following these recognizable patterns often leads to errors.

Examples: Placing navigation menus in standardized places. Adapting content to typical scanning patterns.

5. Make actions clear

Your design should communicate how it can be used. That means that any affordances—ways in which you can interact with the interface, like pushing a button—should have indications of how they can be used. If that isn’t clear, users may make mistakes trying to interact with it, or skip it entirely.

Examples: Explanatory labels on form fields. Links and buttons that look distinct and clickable.

6. Preview results

Users might sometimes be unaware of the full impact of actions they’re making. Letting them review what their changes will look like helps them see into the future and solve their own problems before they happen. This also allows them to play around and experiment without actually breaking anything.

Examples: Previewing an email before sending it out, or a blog post before publishing, or a page before printing. iOS showing you a preview of zoom settings before you submit the changes.

7. Give real-time warnings

Giving subtle, contextual warnings while a user is actively making an error can help them to quickly and accurately correct it. Install these warnings in areas where you know users are likely to make mistakes.

Examples: Red highlights and negative numbers on Twitter when you’ve surpassed the character limit. MailChimp showing you whether or not you’ve met each password requirement with a checkmark as you’re typing a new password.

8. Confirm high-stakes actions

A confirmation dialogue is a straightforward way to give the user a chance to pause and double-check their action. Keep in mind, though, that these confirmations disrupt a user’s workflow; if they get asked “Do you really want to do that?” after every decision, the user will get annoyed and (worse) will eventually ignore these dialogues altogether. So only use confirmations on dangerous or destructive actions like deleting important information or assets.

Examples: Facebook double-checking with the user before permanently deleting a conversation from Messenger. Gmail asking you if you want to include an attachment when your message mentions it.

What to do when a mistake happens

No matter how much you try to prevent it, users will still make mistakes. Our job as the designer is to provide a safety net to make errors less costly and to try to prevent the user from making the same mistake again in the future.

1. Support undo

Being able to undo recent actions is helpful and satisfying for users. This is a direct counter to errors and makes the user more confident since they know a mistake can easily be fixed. Note that features like trash can also work like an undo because they allow you to revert changes by retrieving deleted items.

Examples: Email clients with the ability to undo sending an email. Multi-level undo actions in document apps.

2. Provide error feedback

Clearly communicating the error is essential if you want to educate the user about what happened, what they can do about it, and how to avoid it in the future. A good error message will also the mistake seem less like a failure on the user’s part and more like a cue for adjustment. Be friendly, positive, engaging, and helpful.

Examples: Understandable inline form validation. A useful 404 page.

Design practices to implement

Following these practices helps you figure out where users are likely to make mistakes and plan ahead.

1. Do user testing

User tests are the most reliable way to reveal obstacles, problems, and disconnects between mental models. Set a user on a task, and it’ll become immediately obvious when they struggle, fail, or get frustrated. Then you can either plan error prevention measures or (better yet) fix the design itself to help them avoid these mistakes.

2. Utilize metrics

Metrics can be a cost-effective way of figuring out where your users are running into issues. Where are your users bouncing? Where are they spending unusual amounts of time? At what point are they leaving a workflow? Record the answers and utilize all the tactics above to prevent errors.

Tying it off

You may have noticed that most of these things also lift the general level of UX across the product. For example, offering suggestions helps the user get to results faster, previewing results allows for more user experimentation, and performing user tests reveals more than just error-prone areas.

Try applying these principles in your next UX project and see if it makes a noticeable difference.

Originally published here.