Nielsen Norman Group

World Leaders in Research-Based User Experience

Visibility of System Status (Usability

Heuristic #1)
Summary: Communicating the current state allows users to feel in
control of the system, take appropriate actions to reach their goal,
and ultimately trust the brand.

By Aurora Harley Topics:

on June 3, 2018 Heuristic Evaluation, Human Computer Interaction, Web
Usability

Download a free poster of Jakob’s Usability Heuristic #1 at the bottom of

this article.

The first of Jakob Nielsen’s ten heuristics — visibility of system status —

relates to so much more than user-interface design. At its essence, it is
about communication and transparency, which are critical to many
aspects of life. People strive for predictability and control, and, in most
cases, more information translates to better decision making.

Wherever you are, whatever you are doing, take a few moments to look
around and note the various types of systems around you, and how they
:
 communicate their current status. Your phone or laptop display how much
battery life remains; your email application tells you how many unread
emails you have; a sign in the subway indicates the next stop (or, if
you’ve missed the last one, how many minutes until the next train arrives
at the station). All these nuggets of information allow you to accurately
assess the current state of the systems you interact with.

Definition: The visibility of system status refers to how well the

state of the system is conveyed to its users. Ideally, systems
should always keep users informed about what is going on,
through appropriate feedback within reasonable time.

Knowledge Is Power
Only by knowing what the current system status is can you change it —
that is, you can overcome the gulf of evaluation and figure out what you
need to do next in order to reach your goal.

For instance, when you drive a car, you need to continuously see its
speed to decide if you need to go faster or slow down. Those who have
ever driven a car where the speedometer was broken can attest to the
fact that it’s quite difficult. When this happened to me, I felt at the mercy of
the cars around me, as I attempted to keep pace and blindly trust that
they were going at a reasonable speed. A lack of information often
equates to a lack of control.

Appropriate Feedback
Whenever users interact with a system, they need to know whether the
interaction was successful. Did the system actually catch that button
:
 press or was it busy with something else and it ignored it? Did the item
get added to cart? Did the request go through? (One reason users have
these questions is that they have been burned before by technology that
didn’t work properly. However, even when the happy day of bug-free
technology arrives, people will still wonder if they really clicked or tapped
correctly.)

Appropriate feedback for a user action is perhaps the most basic

guideline of user-interface design. It serves to keep users informed of the
current status and to allow them to steer the interaction in the right
direction, without wasting effort.

Such feedback can be as simple as a change of color once the user has
clicked on a button, or a progress indicator when a process needs a little
longer to finish. These indicators communicate that the system is working,
and reduce uncertainty — preventing users from, say, tapping the same
button multiple times because they weren’t sure if the first time worked.
:
 Changing the color and adding a checkmark to buttons on a selection screen
communicates that the system has registered the user’s choices (le7).
Progress indicators reassure the user that a longer wait is normal, and that
the system is still working (right).
:
 In this video clip from our mobile eyetracking study, the user has clicked on a
button and is unsure whether a new page is actually loading because there
is no feedback. The hollow red circle shows where the user is fixating on the
screen. We can see that she looks back and forth between the button and the
top of the screen, where a progress indicator for the page load typically
appears, to assess whether anything is happening. (In most browsers, hover
over the video to display the controls if they're not already visible.)

Providing immediate feedback for interactive events allows users to

quickly identify the source of errors and fix them as soon as they were
made. In fact, immediate feedback is one of the main benefits of direct
manipulation, an interaction style in which users can act directly upon
different UI objects. In contrast to direct-manipulation UIs, command-line
interfaces do not display the current state of the system, nor do they give
immediate feedback. Programmers know how difficult it can be to locate
the source of an error in an interface which lacks immediate feedback;
they often have to resort to tools such as breakpoints and stepping to
understand how the state of the system changes with each action
:
 specified in their code.

Do you want your users to feel like they’re using DOS or Unix? The real
difference between these ancient command-line UIs and modern GUI
designs is not the presence of colorful icons. It’s visibility of system
status.

The Amazon Music app on iOS allows users to directly manipulate the order
of items within a playlist. Users are aware of the system status at all times,
:
 and thus can easily identify and correct an error.

Even when users cannot see the effect of an action because the system
does not have a screen (like is the case for voice-only devices such as
Amazon Echo and Google Home), a minimum feedback that the
command was heard is essential. Amazon’s Echo displays a ring of light
on the device to indicate that it is currently listening or working on the
command. This on–off type of indicator isn’t as good as a running timer,
for example, but at least the user can be assured that the system heard
the command and the timer was set in the first place.

Compel Users to Action

Modern systems are often complex, and it is unreasonable to assume
that all the variables that describe the state of a system can be
communicated to the user. Many backstage components, such as what
JavaScript files are downloading and executing to make a site work, are
of little interest to users. Yet, occasionally backstage aspects can actually
play an important role frontstage.

Take, for instance, the case of inventory size. How much stock is
available for a product is usually not relevant to users and should not be
displayed. Yet, there are two exceptions:

1. When the stock is low: If people know that there are just a few items
left, they are more likely to act immediately — following biases such
as scarcity and social proof.
2. When there are no items in stock: This information can save the
users the effort of trying to add to cart products that are no longer
available. (Losing the immediate order is preferable to losing
:
 credibility for future orders, which will never be placed if users feel
that they cannot trust you.)

The J.Crew site displays a notification that there are “Only a Few Le7!” when
the user moves the mouse over low-stock sizes of a product. Some sizes are
already sold out, and thus shown crossed out in light gray.

Communicating how far away a user currently is from qualifying for free
shipping or another type of deal can also encourage additional
purchases.
:
 NatureBox.com: A banner across the top of the page communicates how
much more money the user needs to spend to qualify for free shipping.

To communicate backstage events that may impact users, you can use
either notifications or indicators. Modal dialogs are also used to inform
people of state changes that can significantly affect them.

Communication Creates Trust

When, in a real-life relationship with a person, that person withholds
information from us or makes decisions unilaterally, we start losing trust
and feel that the relationship is no longer on equal footing. The same
thing happens when we interact with a system.

When we understand the system’s state, we feel in control — we can rely

on the system to act as expected in all circumstances. The predictability
of the interaction creates trust not only in the mechanics of the site or the
app, but also in the brand itself.
:
 Sites and apps should clearly communicate to users what the
system’s state is — no action with consequences to users should be
taken without informing them. When an external event or the passage of
time caused a change in the state of the system, explain it in brief but
understandable terms.

For example, what should happen when a user revisits a previously

created wish list that now contains items that are out of stock or no longer
sold? The worst user experience would be if those items simply
disappeared from the list, with no explanation why. How about a
notification at the top of the screen? This would be only slightly better
because it would not help the user remember what items had previously
been on the list to find suitable replacements. Both of these methods take
control away from the user and degrade trust — users may stop relying
on the wish list if the items in it sometimes disappear on their own.

A better way to build trust is to explicitly communicate the current

system’s status — which items are no longer available — and then allow
the user to either remove them from the list or keep them visible for future
reference.
:
 Lo7.com continues to display out-of-stock items in wish lists, with
appropriate messaging to communicate the status of the item to the user.

Conclusion
The visibility of system status is a basic tenet of a great user experience.
At its core, this heuristic encourages open and continuous
communication, which is fundamental to all relationships — whether with
people or devices. Users who are uninformed about the system’s current
status cannot decide what to do next in order to accomplish their goals,
nor can they figure out if their actions were effective or if they made a
:
 mistake. Don’t blindfold your users!

Downloads
Jakob's Usability Heuristic #1 Poster (PDF)
Jakob's Usability Heuristic #1 Poster, A4 Size (PDF)
Jakob's Usability Heuristic #1 Poster, Letter Size (PDF)

Share this article: Twitter | LinkedIn | Email

Copyright © 1998-2022 Nielsen Norman Group, All Rights Reserved.

: