4 Ways To Communicate the Visibility of System Status in UI
By: Nick Babich
Tags: User Experience, UI, Design, UX, Product Design

Visibility of system status is one of Jakob Nielsen’s ten heuristics for user interface design. By communicating the current state of the system, you make users feel in control with the system, and this sense of control helps you build trust.

Here are four visual feedback methods you can use to communicate the system status:

1. Visual feedback that shows user location or progress

Where I am

No one likes to be lost, but it happens both in real and digital worlds. Making users aware of where they are in the app is essential for creating good navigation experience. Both apps and websites should highlight the currently selected navigation option to help users understand their current location.

Google Bottom Bar Navigation Pattern — Mobile UX Design by Aurélien Salomon ➔

How many steps required to complete this

Knowing how many steps are required to complete a certain operation will help the user estimate the time needed to complete the procedure.

Survey knowledge checking app by SELECTO

2. Visual feedback that confirms user action

It’s vital to providing immediate feedback for all interactive events. Immediate visual feedback will acknowledge that the app has received a user’s action, reinforce the sense of direct manipulation, and prevent a user from making errors (such as tapping the same button twice).

In its basic form, it’s vital to show that the system actually caught the tap/click.

Button hover and active states by Ali Ali

But in some cases, it’s also important to change the state of the button itself. In such cases, visual feedback will also communicate the results of interaction, making it both visible and understandable. Here are a few of such cases:

Clicking on the Like button.

Spread love, not viruses by Charles Patterson

Turning something ON/OFF. The change in the color of the button gives users a signal about the current state of the object.

Switcher XLIV by Oleg Frolov

Bookmarking an item.

Bookmark interaction [SVG animation] by Oleg Frolov

Adding object to cart. In this case, visual feedback will prove that the item was added to cart.

Coffee Ordering Animation (Starbucks) by Nhat M. Tran

3. Visual feedback that shows system status

Show the system is busy doing something

When it requires more than a few seconds for the system to load, it should give users immediate feedback. Depending on the wait time, it’s recommended to use either infinite loading indicators (typically, for operations that take less than 10 seconds):

Infinite Loading Loop by renatorena

Or progress bars (for operations that take 10+ seconds):

Pumping Loading Animation by Allen Zhang

These indicators communicate that the system is working and reduce the level of uncertainty.

For mobile apps, it’s also possible to use animated splash screens during the initial loading. A well-designed splash screen will create a positive impression for first-time users and switch their focus from the fact of waiting.

Logo splash screen by Gleb Kuznetsov✈

Content is loading

When it takes some time to load content, it’s recommended to use a special type of container — skeleton screen. This temporary content container is used to mitigate the wait time and should be filled with real data as soon as the data becomes available.

Skeleton Loader by Ginny Wood

This container works equally well for desktop and mobile products.

Skeleton Loading Animation by Shane Doyle

4. Triggered events

Notifications/Indicators

The purpose of effective notification is to direct user attention to the fact of a new event. It’s recommended to use subtle animations for notifications because animated effects naturally capture user attention — the human eye is hardwired to focus on moving objects.

Notifications by Aleksei Kipin

Request for user actions

There are a lot of cases when a system might request data for user action. For example, when users fill out a form with invalid data. For example, a user creates a password and it’s not good in terms of complexity, provides an invalid email address, etc. It’s always better to tell users about the problem upfront, using appropriate visual feedback.

Inline Email Validation by Derek Reynolds

More control translates to better user experience

Visual feedback might be easily overlooked in the greater design scheme, but it actually holds the entire experience together. When people interact with UIs, they expect predictability and control, and that’s exactly why UI designers should provide visual feedback.

For more information about user interface design, I recommend checking the course UI Design Patterns for Successful Software. This course contains essential information about UI design patterns as well as how to use them appropriately.