Heuristics #1: Visibility of System Status- Simplified by the examples.
The Jakob Nielsen’s 10 heuristics will be served as a series or as episodes to you all. I will publish each heuristic a week- Every Thursday.
Jakob Nielsen & Rolf Molich in the year 1990 developed these methods after serving & teaching years of their life as a Usability Consultants. But the final set of heuristics was released by Nielsen in the year 1994.
What does the heuristic evaluation mean: It is a method that helps to identify or to point out the usability problems in the user interface(UI) of digital products like software, mobile applications & websites. It is extra beneficial if it’s done in the early stages of the design.
Why we need the heuristics: To identify the design problems in the user interface. This usability method does not require user testing which saves money and time. It only needs one experienced human who has a strong background in doing the heuristic evaluation.
I hope it’s cleared now what are heuristics and why we need them? So let’s move further to discuss the first heuristic principle- Visibility of System Status.
We as human being grown in such an environment where we are continuously receiving feedbacks and responses for our every action. In fact, human needs feedback to make decisions. Without getting feedback the human will get frustrated, irritated, or felt left out. And we don’t want our users to experience similar emotions.
Responses can be received within a reasonable time, can be within a fixed period of time, can be positive, and can be negative too. The response is necessary, it doesn’t matter we are getting it from the system(non-living
or people(living beings).
Let me give you a few basic examples that show the relation between action & reaction:
- When a baby cries(action) the mother feeds(reaction) the baby.
- When the kid argues(action) over silly and unnecessary things, father scolds(reaction) to stop doing it.
- Pressing(action) up arrow on the elevator displays us towards which floor it’s moving(reaction).
This principle is very close to newton’s third law but with few changes:
For every action, there must be a reaction.
Definition: Users should be informed about what is going on while interacting with the machine or a system or a thing through continuous feedback within a reasonable time or can be within a fixed period of time.
Feedback can be in the form of Visual, Audio & Haptic.
Now you will see the list of examples showing the system status from real life as well as the things we use in our day to day basis. System status can be shown in various ways- progress bar, loaders or spinners, breadcrumbs, chips, toast-notifications & thank you messages, etc.
Progress bar:
A progress bar can be used to show a user how far along he/she is in a process.
Example 1, Gmail application- iPhone
Here you can easily see the series of feedback designed for the user to
show the status. It divided into 3 parts- Sending(uploading the files), Finishing(completing the upload procedure) & Done(files have been successfully uploaded).
Example 2, WeTransfer- Website
In WeTransfer, while transferring the files it will show the circular progress bar along with the percentage as the first feedback and after finish transferring, it will reflect the status by saying “You’re done!” which means
it acknowledging the user that your files have been transferred successfully.
Example 3, Microsoft Bing wallpaper- Win application
See how Microsoft Bing showing it’s installation progress in the first screen and after successful completion, they responded to their user by “tick mark” icon & the message saying “Thank you for installing the Bing wallpaper”.
Example 4, TechCrunch- Website
In TechCrunch, as the user moves towards the end of the news the “circular cross” is getting filled and then transforms to “tick” at the end. In the image, you can see the stages from empty to fill.
Loaders or Spinners:
A loader or spinner is used when we don’t want to show the wait time or load time.
Example 1, iPhone spinners
The spinner you’re seeing in the image is the default spinner in the iOS. System asks the user to wait until the data will be available.
Example 2, Dribbble- Website
You can see in the image how dribbble has used its famous “Ball icon” as the loader.
Example 3, Microsoft- Windows OS
The search function in the WinOS will show the determinate loading bar while asking the user to wait.
Example 4, Amazon- Website
Amazon used the spinners to load their products.
Example 5, National Geographic- Website
Here they have used a new kind of loader called skeletal loader. It progressively loads the content as you can see in the image. It’s now very popular and most of the companies using this loader including Medium, LinkedIn & Facebook.
Breadcrumbs:
It is a secondary navigational system to move back and forth between the hierarchy of the pages. It indicates the user’s location on the websites. It mostly used in the websites where the products or pages are in large number. Mostly the breadcrumbs can be seen in e-commerce websites and the companies deals with selling of the products or items.
Example 1, Walmart- Website
Here you can see the entire journey of the user, who reached to the specific page of the Samsung phone.
Example 2, Flipkart- Website
Example 3, Amazon- Website
Example 4, Patagonia- Website
Chips:
It is a visual component used to display the information or to show some kind of action or filter.
Example 1, Housing- Website
Housing has used chips for its filter process. On a single tap or click, the user can select or deselect the chip as per their need.
Example 2, Gmail- Website
Gmail has used the chips for the contact’s email address.
Example 3, Walmart- Website
Walmart has also used chips for its filter process. Users can directly remove the applied filter by canceling on the chips.
Toast Notifications:
It displays the small message which was performed by the user or needs to be attended. The toast notification visible time varies from a short period to a long span of time. It totally depends on the requirement of that product.
Example 1, Microsoft Windows
In Win10 OS, when the user received any notification or performed any action the toast message will appear on the bottom right side. It fades away automatically after 2–2.5 seconds.
Example 2, Toast Messages- Gmail, iPhone & Zerodha
Gmail: When the user signed in to the Gmail application by using specific email id, it will show a toast message with the email id displayed on it.
iPhone: In iOS, the user will shown to the various notifications of the apps in its toast tray.
Zerodha: If the user entered a wrong pin, they will get the toast message showing the message that you entered an incorrect pin.
Example 3, Campaign- SaaS
Once the user has added the campaign successfully, the toast message appears with the message. It will disappear automatically and can also be removed on tapping the cancel icon.
Thank you Messages:
Thank you messages are a kind and lovely gesture to our users who had spent their time & money and believed on our ideas and product. It works as a good gesture and plays very important role in the user journey. It conveys that the form or the product or whatever action they performed, gets successfully done!
Example 1, Thank you messages- Amazon, Paytm Money & LinkedIn
Amazon: After talking to the customer care, they asked the user to provide feedback on how good the customer service executive was in handling the query.
Paytm Money: After submitting the feedback about the application, they will display a thank you message with the smiling chatbox and tick mark.
LinkedIn: After applying to the job, LinkedIn acknowledges the user that their job application was sent successfully to the respective company.
Example 2, Bewakoof- Website
After ordering the clothes, Bewakoof acknowledges the user that their order has been placed.
So above are the real product examples that I tried to show you guys! You can also get these reactions daily in your life if you mark it in detail and train your mind to look at each and every reaction around your surroundings.
This was my first article. I hope I delivered it to the point. I will post the second heuristic principle exactly after a week. Stay tuned!
Will appreciate your feedback, love & comments.
Wear your mask 😷, wash your hands 🧼 & maintain social distance 📏.
Namaste 🙏.
Reference to know more about Heuristics & UX: https://www.nngroup.com/articles/ten-usability-heuristics/
