Heuristic Evaluation — H2: Match between system and the real world (with examples)
This is the second article of the series — Nielsen’s 10 Usability Heuristics.
The second heuristic given by Nielsen is Match between system and the real world. This heuristic states that —
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
Systems that adhere to real-world conventions and make information appear in a natural order provide a better experience to their users. This is because familiarity brings comfort to us humans.
For example, when you use your own washroom versus when you use the washroom of a friend or a relative, you feel more comfortable in the first scenario as you are familiar with the setup. Similarly, users feel more comfortable using a system that they are somehow familiar with.
The biggest mistake that we UX designers make is considering ourselves as the end users of the product. Because when this happens, we start designing for ourselves. And when we design for ourselves, we start using our own interpretations and understanding of objects and words to create the system, which may or may not match with the end users’ expectations.
When actual end users visit these sites and apps and are unable to understand the words and terms used there, they feel confused and therefore they try to find an alternative or external help to get their task done. Therefore it is very critical that the system speaks the language of the users and matches the real-world conventions.
As we are discussing the real-world conventions therefore our discussion would be incomplete if we don’t talk about Skeuomorphic Design. Skeuomorphic design in its essence refers to a design or an interaction that resembles one from the physical world.
This screenshot taken from ibooks application is a good example of skeuomorphic design. The application is used to display books that are available in the system. This concept is similar to a library book shelf in the physical world.
The biggest advantage of the skeuomorphic design is it’s ease of use as users can use these products and interfaces based on their past experience and existing knowledge. And therefore there is no or very minimal training required for users to use such interfaces.
Here is another example of skeuomorphic design. This is a snapshot of an old web application — Winamp, which used to be one of the most famous music player apps some years ago.
In this image, you can clearly see that the buttons of this music player app resemble the buttons of a real music player. This is a classic example of skeuomorphic design.
Another good example for this could be the desktop calculator app. The interface of the calculator app is inspired from the physical calculator. Although the design is flat and minimalistic, the calculator user interface works just like the real one. Familiar interactions and elements on the calculator interface makes it easier for the users to use it without the need of any training.
By now, you must have understood why this heuristic is crucial in order to create a better experience for your users.
Therefore while designing any system try to:
- Use familiar or natural interactions.
- Implement concepts that your users have been exposed to previously.
- And last but not the least, avoid using technical jargon unless your end users are familiar with them. Prefer using simple words to have better and effective communication.
If you are enjoying this article and want to know more about Nielsen’s 10 Heuristics with real-world examples, follow this link:
Some more examples:
Now let’s look at some of the applications and examples of this heuristic in terms of User Interface. This will help you to better understand the importance of this heuristic for providing a better experience to your users.
Example 1: Whatsapp pin feature would be a great example to understand this heuristic.
In the real world, we process a lot of information day in and day out. This information that we process every day consists of information that we can afford to forget and information that we can’t.
For example, it doesn’t matter if we forget what we ate 2 days back but we can’t afford to miss the deadline for applying to a particular job, we can’t afford to forget that there is an important meeting with a client post-lunch, we can’t afford to forget ordering groceries for our daily needs. For all such pieces of information that we can’t afford to forget, we generally write and pin them up on our boards or desks.
This exact concept was implemented by Whatsapp recently.
Generally, users get bombarded with messages on their Whatsapp application, some from their contacts, some from their work groups, some from their family groups, and some from the marketeers. In this pool of messages, sometimes it gets difficult to find messages from important groups or people in their lives.
Keeping this in mind, Whatsapp has introduced a pin functionality recently. Like the real world, you can pin a contact or a group and subsequently, messages from that contact or group are shown on top of the other messages, thus, making it easier for you to find the important messages without any unnecessary effort.
Example 2:The next example where this heuristic is applied is icons.
Here are some of the icons that are derived from their real-world counterparts.
The trash bin in mac and Recycle bin in windows are derived from the real-life bin which we use to discard the unnecessary stuff. It is because of this resemblance that by just looking at the icon of a trash bin you can understand what it is meant for.
Similarly floppy disk for saving an item, printer icon for printing a document, lens icon to represent the search functionality, and home icon for navigating back to the homepage. These icons don’t need any explanation or training, owing to their match with the corresponding real-world objects.
In the physical world, we generally denote red color to risk, danger, war, etc. and on the contrary, we associate green color to safety, happiness, and prosperity. So that’s why most platforms use red color to display error messages and green color to display confirmation or completion messages. The previous association of users to these colors makes these messages more intuitive and easy to understand.
Example 3: Files and folders is another example where this heuristic is applied.
In the real world, we keep all related documents in one folder. For example, if you are planning to apply for a home loan, you will keep all your home loan-related documents and files in one folder. Keeping related documents and files together in one folder makes it easier to find them.
This same concept is implemented by most of the operating systems as well. Similar to what we do in the real world, folders in our systems are used for the segregation and grouping of data. Different files and documents related to one project are generally put together under one folder. This makes it easier to find them as and when required.
Example 4: Google Maps is another good example where this heuristic is nicely used.
Every location on this world has a coordinate in terms of longitude and latitude. These coordinates are complicated numbers which are difficult for the majority of the users to remember.
In the real world, people use location names to refer to a place rather than coordinates and taking inspiration from this google maps also display the name of the location along with the coordinates in order to make it easier for the users to use it.
Imagine if you would have to remember the coordinates of your home or office while booking a cab, won’t it be a cumbersome thing to do?
Example 5: According to this heuristic it is not just UI elements that should match the users’ real world experience but process flows also need to be in sync with how we operate in a real world setting. Let’s take the example of e-commerce sites and understand how they implement this heuristic.
In the physical world setting, when you go out for shopping you typically follow this process. You enter a shop, you browse through the items kept in the store and if you find something useful or if you like something you put that item into your cart and once you are done with selecting the items you go to the cash counter along with your cart. At the cash counter you enter your card details and complete the purchase.
Same process is followed by ecommerce sites as well. When you want to buy from an online store, you visit their website or app, you browse through the available items and add the ones you like to your shopping cart. And once you are done you enter your card details and make the purchase. This works really well as the system is replicating the real world experience of users online.
Example 6: This heuristic states that the system should speak the language of the users with words, and phrases familiar to the user. This means if you are designing a system specific to an industry you should first understand the terms used in that industry and then use them in your solutions to make it easier for the users to understand.
To understand industry or business specific terms there is no better way than to conduct user research and meet users of your product.
Let me take you through one of my experiences related to this. In one of the product design assignments, I came to know that an important functionality of the product was not getting used by the users. The product that I was working on dealt in online selling and buying of used cars.
This product had a smart price calculator for finding the market price of an old car based on multiple factors. The functionality was excellent but the issue was with the label of the functionality. The product team labeled the functionality as Car Evaluator which was not so clear to the end users.
After conducting user research, I came to know about this fact and suggested that we should change the name to Used Car Price Calculator as it was much more intuitive for the users to understand. The suggestion worked because now the system was speaking the users’ language with words and phrases familiar to them.
So that was all about the second heuristic — Match between system and the real world. I believe that by now you must have understood the importance of implementing this heuristic for providing a better experience to your users.
To learn about the techniques to evaluate and improve the UX of a website/mobile app/web app, follow the link below:
#Usability #Heuristics #Heuristic_Evaluation #Usability Review #Usability_Audit #Expert_Usability_Review #UX #User_Experience #Heuristic2 #Match_between_system_and_the_real_world
