Nobody likes to commit mistakes in the first place. Not committing an error is the ideal situation, but it’s not always possible. Mistakes are an integral part of user experience as well. Designers must consider all scenarios wherein a user can commit a mistake/error and lookout for ways to prevent users from making at least some of those errors. In today’s article, we will discuss a set of design practices that help in preventing users from making mistakes.

Before diving into the design practices, let us categorize the types of errors. There are primarily two kinds of errors – 

Slips – these occur when users intend to perform one action, but end up doing another (often similar) action.

Mistakes – these are made when users have goals that are inappropriate for the current problem or task; even if they take the right steps to complete their goals, the steps will result in an error.

Directional Cues

One of the best ways of preventing mistakes is by offering directional cues. Directional cue is an element of user interface that gives a visual hint on specific interaction or content to let the user see it faster and easier. Just like the road signs and signposts. They guide a visitor or user to the essential elements, text lines, and call-to-action elements. This makes the conversion reachable and users’ reach to the solutions of their problems quickly. Arrows, pointers, and other visual prompts help to navigate users through the interface and make it easier to avoid unnecessary clicks and interactions.

Helpful Constraints

While it’s not always a good idea to limit users’ choices, in cases where there are clear rules that define acceptable options, it can be an excellent strategy to constrain the types of input users can make. For example, booking a flight typically involves selecting the dates of travel, and there are a few rules that govern which dates are acceptable. One of the primary rules is that a return flight cannot happen before a departure. If users aren’t limited in the dates they can choose, they may slip and accidentally select a set of dates for their flight that doesn’t follow the rules. A helpful constraint here will force users to pick a date range that fits.

Visualized Limitations

One more way to prevent the user from wasting their time and effort is by showing the visual limitations, if they exist, right in the process. One of the classic examples is Twitter. There is a limitation of 140 characters per tweet, and the platform shows you clearly if you exceed that number: the extra part is highlighted with color, the number of additional characters is shown, and the button of the tweet becomes inactive. Such an approach saves users’ time and effort and prevents unnecessary clicks.

Text Prompts

UX designers know much more about user interfaces and interactions than an average user. While that’s a great advantage, when they design interfaces, it may act as a barrier at times. Something that may be obvious to a designer, may appear confusing for users. The function behind the particular field or button may seem crystal clear to the designer, but not for users of an app or a website. Short and clear text prompts are very helpful in such cases. Usability testing will help you to find the pain points where it’s needed most of all. One of the popular examples is text prompt in the search field or simple clues in the fields of a contact form.

Clear Indications

‘You have made an error’, Something went wrong, ‘can’t proceed’ – these are error messages, but not helpful error messages. A good design clearly highlights where the error has been made and what is the error. Let’s take the example of Facebook. When you enter a wrong password or username, it tells me exactly what errors I have made. Facebook flags the exact mistakes I made by warning me, very visibly, that I’ve entered a wrong password or username. Such real-time feedback reduces the cognitive load on users’ part. It also helps in creating an overall good UX for them.

Onboarding Tutorials and Tooltips

Onboarding is a set of techniques and interactions to comfort the user. It provides a brief introduction to the product or service. One of the ways to quickly introduce the app to the user in onboarding tutorial, a set of several screens that are shown to the first-time users and explaining the benefits and functionality. You may show some crucial things that differentiate the interface from others and potentially lower the chances of errors that could arise later.

Tooltips are another onboarding technique that significantly reduces errors. Tooltips are prompting messages tied to particular layout elements or user actions. They usually appear in modal windows rather than separate screens. Tooltips present a proactive way to guide the user to the right option and avoid misunderstandings.

Forgiving Formatting

Some tasks do require users to type very detailed or precise information, but forcing people to provide this information in a particular format can be a poor user experience. If you are asking users to input numerical information into a form, be flexible, and format that information in a way that is easily scannable (by humans, not machines) to prevent mistakes.

While your website’s database might not allow non-numeric characters to be stored in a phone number, you surely want your users to notice typos when they enter their phone number. One solution is to let users type in a way that’s natural to them, rather than forcing them to use the format that your application expects. Do some behind-the-scenes data scrubbing to remove parentheses or other characters that users may type, rather than frustrating them with an inflexible format. Even better, format the users’ input as they type.

Conclusion

A good design is all about enhancing the user experience. Users will commit mistakes, but if designers follow the above-mentioned design practices, the chances of errors will be reduced substantially. Do you want to know more about sound design practices? Talk to our design experts.

Want to know more about UI and UX. Read our article about how they are connected