Learn

On to a couple more usability heuristics! Next up, we’ll review heuristics that ask us to consider:

  • How can the design minimize potential user errors?
  • How can the design ease the user’s cognitive load?

Error Prevention

The fifth usability heuristic is error prevention: The design should help the user avoid making errors. This includes removing error-prone conditions or providing a confirmation step before users commit to the action.

When designing, we should first focus on preventing high-stakes errors. Then, we can work on minimizing any smaller issues. We can help prevent errors by including warnings, supporting actions like “undo”, adding helpful constraints, and using default settings strategically.

For example, if you’re booking a round-trip train ticket, constraints may prevent you from selecting a departure date that precedes the return date. The default number of passengers may be set to “one” to prevent you from paying for more tickets than you need.

Let’s check out another example from Codecademy’s website. To prevent you from accidentally deleting your Codecademy account, there are a few error prevention strategies in place.

First, when you select “Delete Account” from the account page, your account will not be instantly deleted! Instead, a warning pops up, explaining that account deletion is irreversible.

In addition to this warning, the site will only allow you to delete the account after you log in again. This extra log-in step makes it harder for you to mistakenly complete this action.

Screenshot from Codecademy’s website. From the account page, the “delete account” button is selected. Then, a warning appears that explains this action is irreversible. The site says you must log in again in order to continue with the account deletion.

Recognition Rather Than Recall

The sixth usability heuristic is recognition rather than recall: The design should limit the need for the user to remember information that is required to use the interface. Elements, options, and actions should be visible so the user can readily recognize them.

Generally, it’s easier for us to recognize information rather than remember it. For example, if you’re learning a new language, you may be able to recognize foods listed on a menu. Without the menu, it may be challenging to recall the words for these foods.

We can reduce the memory load required to use the interface by ensuring that the user can locate and understand the various options. As an example, a user may learn about the product from an onboarding tutorial. Any information needed to use the product should be accessible outside of this tutorial — the user should not have to remember it.

Another way to limit the information that users must recall is to provide help in context. For example, when signing up for a Codecademy account, we must add an email and a password.

If we select the information icon above the password box, a list of password requirements is revealed.

Screenshot from Codecademy’s account sign up process. The information icon above the password box has been selected. This opens a list of password requirements that help the user recognize how to build a strong password.

These password requirements are fairly common, but the site decreases our memory load by reminding us what goes into a strong password.

Instructions

On the right, review the wireframes and read the descriptions. Determine which usability heuristic each design is breaking.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?