All about usability heuristic #1: Visibility of system status
I can bet there were times when you suffered because of a violation of this heuristic principle “visibility of system status”. Don’t believe it, see for yourself below -
Contacted any customer care number for which you had to wait for a long unknown period of time?
Tapped, tapped, tapped a button but to no avail?
Stuck while paying online with no knowledge of what’s going on behind the interface?
And think of all such interaction scenarios where you were unaware of what’s now and next, that all accounts for the invisibility of system status. Hence including this heuristic principle in your designs come into play.
But what exactly this heuristic implies?
As per the NNgroup, Jakob Nielsen’s 1st heuristic principle, “Visibility of system status” states “The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.” Let’s break it down and understand —
“Always keeping users informed…through appropriate feedback” implies keeping users in the loop. For example, when I say “Hey, I’ll come back in an hour from the gym”, that’s enough for my mom to know. I need not update what exactly I’m doing at every moment in the gym (those nitty-gritty details) because it doesn’t matter to her. But surely after that 1 hour of the gym, I should (actually need to) update with the then current status. This provides the continuity of information to her, leading to her satisfaction. Similarly, your business and its users have a relationship that can make or break based on the communication your system does. Therefore, it should inform users of what’s happening at every moment but need not inform them of every small irrelevant detail like when which file got transferred back and forth to the server and all those computer world-specific terms, unless computer geeks are your users.
“…within a reasonable amount of time.” implies almost instantly when the user expects or needs to be informed. For example, as soon as a user receives a call, their mobile rings, and on picking it up, the state changes with some controls coming over. All this needs to be instantaneous, no delays are acceptable there.
so what’s the benefit of using this in designs?
Okay, think about what you expect as a speaker from one who’s listening to you. You speak, speak, speak and the listeners are not responding anyhow (neither a word nor a gesture nor facial expression), what you’ll do then, how you’ll feel? Hmm, not a happy scenario clearly! Similarly, as we communicate with humans, we do with products. And there as well we expect it to communicate back anyhow.
On interacting with anything, anywhere, real-time feedback(status) then act as one or all of the following -
- Acknowledgment of the past interaction performed which leads to satisfaction.
- A clue that informs what’s happening so as to keep the users in control and help them do the next task to reach the goal.
- A trust-builder due to continuity of communication.
“If we want users to like our software, we should design it to behave like a likable person: respectful, generous, and helpful.” — Alan Cooper, author of About Face: The Essentials of Interaction Design
And who is that respectful, generous, and helpful person who doesn’t communicate anyhow with you?
So a good product keeps you in the loop always. Consider elements like loading state, timer, progression bar, state change, etc, that are deployed to make for this heuristic.
who’s employing this heuristic?
Attaching down 4 good examples of where this heuristic has been used.
Example #1
Amazon — As I add a product to the cart, 3 things happen — 1. a bottom sheet with added to cart status and subtotal shows up, 2. the state of the “Add to cart” button changes, and 3. the number of items gets reflected with the cart button in the bottom bar. All this acknowledges the user’s action of adding to the cart, hence giving assurance to them.
Example #2
Google Chrome — As shown above, opened tabs in google chrome depict their state. All tabs no matter what have a standard structure of the favicon and then truncated text. And to show other states, for example loading state, loading animation runs around the favicon as in the 1st tab, and to show a tab that has something playing in it a speaker icon appends to the standard structure as in the 3rd tab.
Example #3
Youtube — Ad count (1 of 2), time (1:00), and skip ad button or next ad in how many seconds, all this when an advertisement plays on Youtube. This keeps us in control as we know how long to wait.
Example #4
Instagram — In my Instagram feed, a suggested post could have been without the label “Suggested post” but it would have hampered my trust in Instagram. So this simple status calling out that this is a suggested post is a trust-builder or maintainer I’d say.
To conclude within one line, the system status (system feedback) should be given timely in the user’s language so that the user can interpret it and take action accordingly.
Here is my list of all other articles on usability heuristics —
Feel free to reach out to me on LinkedIn :)
