Learn

When designing digital products, the ten usability heuristics provide a starting point for creating effective interactions.

We’ll start with two heuristics that help us consider:

  • How will the user know if their actions are successful?
  • How can the interface align with user expectations and prior knowledge?

Visibility of System Status

The first usability heuristic is visibility of system status: The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

As users complete interactions, they need clear, timely feedback from the interface. Without feedback, they will not know if the system is processing their actions.

Feedback takes many forms in a digital interface. It can be subtle, such as an icon becoming darker and bolder after we select it. Feedback can also be more obvious, such as a pop-up message that states how long the system needs to process an action.

Check out this example of the Focus Timer from the Codecademy website. When we select the up arrow, the number of minutes increases. When we select the down arrow, the number of minutes decreases. The number changes according to our actions, which provides feedback that the system is receiving our actions.

Gif of the Focus Timer from Codecademy’s learning management system. When the up-arrow is selected, the number of minutes increases. When the down arrow is selected, the minutes decrease.

Match Between System and the Real World

The second usability heuristic is match between system and the real world: The design should use language that is familiar to the user. Information should be presented in a natural and logical way based on real-world conventions.

This principle reminds us to avoid using technical jargon or complex sentences. Instead, we should use phrases that are clear and easy to understand. The language we use should match what our users know. For example, sound-mixing software for expert music producers will use a different vocabulary than a similar program for young students.

Additionally, we want to align the design with the world around us. Digital products don’t exist in a vacuum! We should consider what users expect from an interaction based on their life experiences. For example, when ordering at a restaurant, we may request a substitution based on dietary needs. Similarly, a food delivery app could provide the option to customize a dish before adding it to the bag.

Check out the chatbot from Codecademy’s Help Center:

Screenshot of the chatbot from Codecademy’s Help Center. At the top, there are introductory messages from the bot explaining how to use it. Then, there are a few concise options (e.g. “paid but can’t access”) that the user can select to start the conversation.

This chatbot follows the “real-world match” heuristic in a few ways:

  • The opening message says: “Hi there, I’m Codecademy’s support assistant. Choose an option below or describe how I can help in a few words.” In the real world, a conversation starts with a greeting and some context.
  • The chatbot displays pre-selected issues users can choose: “paid but can’t access,” “refund,” and “cancel subscription.” These descriptions use clear, understandable language instead of industry-specific jargon.

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?