Learn

Let’s explore a couple more of the ten usability heuristics. We’ll cover principles that examine:

  • What gives users a sense of control when they use a product?
  • How can design conventions support user expectations?

User Control and Freedom

The third usability heuristic is user control and freedom: the design should allow users to cancel or back out of actions done by mistake. Users should be able to freely navigate through the product without getting stuck.

When we use digital products, it’s common to change our minds. For example, after adding an item to an online shopping cart, we may decide not to buy it. Furthermore, we may complete actions by mistake, such as selecting “print” when we actually want to download.

As designers, we should plan ways that users can efficiently back out of mistakes or unwanted processes. For example, we can provide user control by including “back” and “cancel” buttons and allowing actions like “undo” and “redo.”

In the “Chapters” section of Codecademy’s website, we can find chapters of coders around the globe. If we find a chapter of interest and select “Join us,” a pop-up with more information appears.

This message provides more details about the joining process and includes a “Go Back” button. We may not be ready to join the chapter, so it’s helpful to have a way to cancel this action.

Screenshot from the Chapter’s section of Codecademy’s website. The “Join us” button was selected. Then, a pop-up with more info appears. There’s an option to continue as well as a “Go back” button that allows the user to back out of this action.

Consistency and Standards

The fourth usability heuristic is consistency and standards: Users should not have to wonder whether different actions, words, or situations mean the same thing. Designs should adhere to platform and industry conventions.

Following industry standards means using conventions that are standard in digital products. This is helpful to the user because they can leverage prior knowledge when they open a new interface. We want to minimize the amount of new information users must learn to interact with the product.

There are many standards to keep in mind, but one to consider is icon usage. Here’s a screenshot from Codecademy’s website. There are three icons: a magnifying glass, a bell, and a bookmark. If you want to check notifications, which icon would you select?

Screenshot of the navigation icons at the top of the Codecademy website. There are three icons: a magnifying glass, a bell, and a bookmark.

Even if you’re new to Codecademy’s site, you may associate the bell with accessing notifications. This icon is standardly used with interactions that involve notifications.

In addition to following industry standards, our product should follow internal standards. This means that interactions should be consistent within the platform.

For example, Codecademy’s site follows an industry standard by using the bookmark to indicate a “saving” interaction:

Screenshot of the navigation icons at the top of the Codecademy website. There are three icons: a magnifying glass, a bell, and a bookmark.

The site follows an internal standard by always associating the bookmark with saving resources. The bookmark icon is present on any page that has a saveable resource. The term “resources” is always used to refer to what the user is saving

A screen shot from Codecademy's website. The user found an article they want to save. When hovering over the bookmark icon, a label appears that says "Add to saved resources"

A screenshot from Codecademy's website. If we select the bookmark icon, a modal appears that says "Saved Resources" and displays titles of recently saved articles

The consistency of the icon and the word “resources” clarifies that any interaction with the bookmark icon on Codecademy’s site is associated with saving a resource or accessing saved resources.

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?