UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Heuristics

Dipendra Singh
UX Planet
Published in
7 min readSep 20, 2021

Intro

Hello there, back for more design-related stuff. Well, I have something special for today. Heuristic and its principles to ensure better usability of a product. After reading this, you will get a good idea of how to pinpoint issues within a product, so that they could be resolved.

Let’s dive in.

So!

What are heuristics?

Following what I learned through my mentors and some research —

They are the thumb rules or you can say common sense, developed within people, due to past experiences and learnings, which enables them to understand anything new, and to take actions based on that.

For example, take this branch shown below, now imagine, it is in your path and you have to move it away. All of you will have a heuristic idea of where to hold and where to avoid contact because of your previous experiences and learnings.

A branch with sharp thorns on it
Photo by Julian Paolo Dayag on Unsplash

So, we all came to an understanding that, we figure out new things based on our heuristics. It is also true with everyday products, we see around us, like a button is there to be pressed, a handle to pull, push or hold, a hook to probably hang something. We all have learned these interactions with time and now they are part of our thumb rules.

These rules dictate the usability of a product, may it be Physical or Digital. So, how can we ensure and evaluate any product’s usability?

There are many ways, one of which is the 10 Heuristic Principles by Nielsen and Norman group for better usability. These principles mainly focus on digital User Interface Design.

10 usability Heuristics for User Interface Design by Nielsen Norman Group

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation
  1. Visibility of System Status

When you allow the user to know, what’s happening in the system, for every instant of the interaction.

For example — we all have seen the loading bar or the rotating wheel on our phones requesting us to wait for a while, loading is in progress. Imagine if it was not there, how on earth will someone know that he/she should wait. You will be in a dilemma if, the system is working or not.

Photo of mobile phone with loading bar saying, please wait
photo by Castorly Stock from Pexels.com

2. Match between system and the real world

When you use language, symbols, and other interacting mediums in such a way, which are familiar to the user.

For example — You may have seen the Cart icon in various e-commerce websites like Amazon and Flipkart, where your purchasing items are kept. It is very easy to understand the function of this cart function because we all are familiar with it.

photo of a mobile with icon of a cart, inside e-commerce application
photo by PhotoMIX Company on pexels.com

3. User control and freedom

We as people, continuously do things that we suddenly want to be undone or changed. We learn new things also by using methods like hit and trial, experiments, inspecting, etc. Now, if we get a clear and quick way out, of our current actions we feel a sense of control and freedom in performing them.

For example — Take the widely used shortcuts; Undo and Redo, they allow you so much freedom to experiment and give better control over the outcome. You can also take the backspace key, the cancellation option in our reservation ticket, the back option on web pages, and much more as examples.

Screenshot of pc screen showing Undo and Redo actions
Screenshot from my pc

4. Consistency and standards

It is easy on our brain when we face similarities, but it gets uncomfortable to see abrupt changes frequently. For that reason, products are made in such a way that similar things are kept together in one place and the same pattern is followed inside the product and also in its extensions, series, updates, and everything relatable.

This approach maintains consistency and standards within the product and also among other, similar products.

For example — We all are familiar with this power button, you will find it on many physical devices as well as on digital platforms also. This power button is one of the standard designs followed worldwide.

A power button similar to one, seen on computers
created by me on Figma

5. Error prevention

We perform two types of errors one which is unintentional (Slips) and another which is intentional (Mistakes). A good design uses constraints, guide maps, warnings, and other means to ensure the prevention of both, to as much extent as is reasonable and possible.

Example of Slip — When you put salt in your shake instead of sugar.

Example of Mistake — When you put extra salt in your dish because you thought it would be ok but it turns out to be, not ok.

Digital example — The warning popup you see before you take some action that could result in loss of data or another serious impact.

Warning popup while trying to replace a file
screenshot from my pc

6. Recognition rather than recall

Recalling sometimes can be very frustrating, have you ever tried to remember the lyrics of the song you forgot but do remember the tune or feel of it? name of the movie, whose scene you are discussing with your friends, the meal you had yesterday, the pin or password of some website you forgot… I think you got the idea.

A good design replaces the necessity to recall with recognition.

For example — The Youtube history option allows you to recognize the video that you saw a day before yesterday, rather than recalling it, which could have been very hard for you.

Youtube screenshot showing history
screenshot from my pc

7. Flexibility and efficiency of use

In games, you have an option to choose the sensitivity for better control (customization). This principle focuses on increasing productivity and the ability to customize the product.

For example — Shortcuts, ya! they make our lives so easy. You have the flexibility to perform a task in multiple ways (good for both a novice and an expert) and at the same time, the efficiency of work increases exponentially.

Screenshot of Figma shortcuts
screenshot from my pc

8. Aesthetic and minimalist design

There should be a limit to how much content is exposed to a user and in what manner. This principle focuses on providing information that is just sufficient, not more nor less, and also in a presentable way.

For example — The Google search page

screenshot of google search page
screenshot from my pc

9. Help users recognize, diagnose, and recover from errors

Have you ever seen some machines start showing you an error with the name ‘some gibberish’ that you don't understand? such as an error 404. In such cases, users get confused and frustrated. Instead, products should convey the message in a way that users can understand.

A good design not only converses in a user-friendly way but also guides them to recover from errors.

For example — See the text in red highlight, in the image below, it tells you that you entered an incorrect password. It also provides you with two options first is to sign in with google instead and the second is to select forgot password at the bottom in case you want to recover it.

screenshot of login page showing that password is incorrect, try with google
screenshot from my pc

10. Help and documentation

Almost every product today comes with a manual, which is documentation of all important information, a user needs regarding the product. Have you seen apps and websites with a help section, where you find all the information related to them and FAQ? Also, some of the digital products provide an onboarding process where the user is made familiar with the interface and the way to initiate important actions. All of this comes under Help and Documentation.

Example — Below is the link to the medium help center you can check out. It is a good example of help and documentation

So, guys how was it? learned something new, awesome.

I’m also working on heuristic evaluation on a website. Here is the link.

Thank You, guys… till the next time.

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Write a response