4 Ways To Communicate the Visibility of System Status in UI
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.
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.
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.
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.
- Turning something ON/OFF. The change in the color of the button gives users a signal about the current state of the object.
- Bookmarking an item.
- Adding object to cart. In this case, visual feedback will prove that the item was added to cart.
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):
Or progress bars (for operations that take 10+ seconds):
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.
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.
This container works equally well for desktop and mobile products.
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.
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.
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.
