Introduction:
This article explores popular UX design practices which can assist in preventing users from making errors within apps and websites.
Directional cues:
Directional cues are elements of a user interface which prompt the user to a particular action. For example, arrows, pointer or other visual prompts help the user see important content faster and helps avoid unnecessary interactions.
Onboarding tooltips and tutorials:
Onboarding techniques aim to make the user comfortable with a particular product by giving them an introduction to it. One technique is the use of onboarding tooltips, which guide the user to the correct option and avoid misunderstandings. Tooltips tend to appear in modal windows and are prompting messages which are tied to a specific layout of elements or user actions.
Another technique is onboarding tutorials, which is a quick way to introduce an app. Onboarding tutorials use a set of several screens to show first-time users benefits and functionalities of the app. Designers can use this as an opportunity to help users stray away from making errors.
Visualised limitations:
Another way to prevent the user’s waste of time and effort is through showing visual limitations. For example, Twitter only allows 280 characters per tweet, and if you exceed this number, the extra part is highlighted and you are unable to post your tweet unless you cut down. This prevents unnecessary clicks and saves the user’s time.
Text prompts:
What may seem obvious to a UX Designer may be confusing for users. To avoid this hassle, use clear and short text prompts to guide the user. One example of text prompts are the “forgot your password?” prompts on login pages. Like the previous example, always ensure that your text prompts are as specific as possible. Also, you can use usability testing to help specify areas where errors are frequent.
Preview function:
The preview function lets a user review the results before submitting or finalising their choice. For example, if a user is making a choice on various colours, show the preview of that particular colour while the user is making their choice to make sure the user is sure of what they really want.
Suggestions:
Suggestions are another means of helping users avoid unnecessary clicks and helping them find what is most important. An example of suggestions is when the user starts typing up a query and the website offers relevant options.
Clear explanations:
One of the most important aspects of UX writing is being as clear as possible when guiding a user through an interaction. This means simple instructions are vital. Use the below checklist when reviewing your writing, which should be:
- Useful - the copy provides important information and guides them towards important interactions.
- Clear - users understand the message you are trying to convey, meaning that it is not complex nor complicated.
- Concise - the copy is meaningful, has a purpose and has no unnecessary talk.
- Consistent - the tone, voice and style of copy remain constant throughout the interface.
When dealing with errors, avoid diving into technical details and explanations of how you are not in control of such errors. Instead, focus on informing users what is happening and how to deal with these errors.
Inline validation:
Inline validation is the process of informing a user about an error or success of completing an action in the process of them doing so. For example, if a user is filling out a form (such as a signup or registration form), inline validation is really effective because you are updating the user at every step rather than telling them “something went wrong” after everything has been done.
In saying this, these are some important elements to remember:
- Avoid premature validation - premature validation is when the user’s input is deemed invalid before they have finished typing. In essence, the user is reprimanded for making mistakes they haven’t made and forces them to pinpoint errors which do not exist.
- Explain the error - don’t just indicate that the user has made an error and instead incorporate a small explanation of what it is and guide them on how to correct it.
- Use familiar colours and visual markers - globally, the colour red is associated with error. You can also use ticks or thumbs-up to indicate success. Like these examples, make sure to use markers which have a low cognitive load and are easily recognised by users. Using different colours can also help those who are colourblind.
Another way to prevent users from making an error is to make controls inactive until the error is fixed. A good example of this is Twitter. Without some text or an attachment, the button for posting is inactive.
Colour accents:
With colour being one of the most integral aspects of visual communication, UX designers can use it to help users avoid mistakes. You can use specific colour accents to guide the user’s attention into core, interactive details and thus increase the chances of correct clicks instead of getting the user lost between homogenous layouts.
Familiar icons:
Use familiar icons in your interface to make your user feel comfortable and confident. For example, the magnifying glass is globally recognised to be the icon for ‘search.’ Experimenting with this could lead to an increase in errors or mis clicks.
Even though icons are small, they have a large impact on usability. They give users quick, visual clues which are particularly important for those with disabilities, poor reading schools or language barriers. Also, icons can reduce cognitive load as they are processed by the brain faster than words, meaning that they can lead to faster interactions.
Note that even though icons are understood quickly, if the message is not clear the user experience will not be positive. In situations where you are thinking of using a discrete icon, think carefully about its usage. If the icon does not strongly correspond with the intended meaning, the speed of recognition becomes redundant. In these situations, texts can transfer the idea or data more clearly.
Recognisable patterns:
This concept of design practice stems from the previous point. By adhering to familiar, mental models, the users of your interface will be able to avoid error, such as:
- Underline text links to indicate that they are clickable
- Use a cart icon in the header for e-Commerce websites
- Put contact information in the website’s footer because users will be familiar with this.
There are a plethora of options for error-proof actions which are popular amongst users and make interactions simpler.
Progress animation
When users are interacting with a digital interface, they want to know what is happening at every stage. Making users wait without an explanation is a risk of losing those users. Support progress animations with a short line of text explaining what is happening.
Conclusion:
Use the tips in this article to prevent users from making errors in an interface and create a positive user experience.
