Learn

Our walk through the usability heuristics is coming to a close — we’ve reached the final two heuristics! These heuristics ask us to consider:

  • How can we help users understand and resolve errors?
  • How can documentation support the user’s experience of an interface?

Help Users Recognize, Diagnose, and Recover from Errors

The ninth usability heuristic is help users recognize, diagnose, and recover from errors: error messages should use plain language (no error codes), clearly explain the problem, and constructively suggest a solution.

In an ideal situation, users seamlessly navigate through a product without issue. While striving to design a smooth experience, we should also consider the possibility of users making errors or needing additional support.

When we design interactions, we should consider the possible errors that could be made. If the user makes an error, the interface needs to notify them and help them resolve it. The error message must clearly describe the issue and provide an achievable solution.

Let’s check out an example of error recognition and recovery from Codecademy’s website. To create an account, we must fill in our Email and Password. However, when adding this information, we may make some errors:

A screenshot of the log in screen from Codecademy's website. The boxes labeled "Email" and "Password" are outlined in red. Exclamation points are displayed in each box to emphasize that there is an issue with the entered information.

First, the interface helps us notice these errors by providing visual feedback. The black boxes turn red, and an exclamation point icon appears in each box.

Additionally, the interface explains what we need to do to resolve the errors. Brief descriptions beneath each box explain what we must change: A valid email must be entered, and the password must have at least eight characters.

With this information, we can update our email and password and successfully complete the signup process.

Help and Documentation

The tenth usability heuristic is help and documentation: The design should offer documentation that allows users to complete tasks or resolve problems.

In general, the more complex the design, the greater the need for documentation. Some simple products may be usable with little to no documentation. In other products, documentation may be essential to ensure that users can understand the ins and outs of the interface.

If documentation is needed, we should ensure that users can readily access and understand it. Users should be able to locate the information they need.

One way to support users is to provide multiple ways to search for documentation. For example, in Codecademy’s Help Center, users can type in keywords, browse articles, browse by category, or message a chatbot.

Screenshot of the search bar in Codecademy’s Help Center.

Screenshot of Featured Articles in Codecademy’s Help Center.

Screenshot of “Browse articles by category” in Codecademy’s Help Center.

Keeping documentation organized and searchable makes it easier for users to find answers to their questions.

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?