If you’ve ever opened a Snapple bottle and heard that signature pop, you’ve experienced Nielsen’s visibility of system status principle in your real life. The satisfying pop signals to the consumer that their drink has been opened for the first time.

This kind of feedback is often an intentional move by designers. When beginning the UI design process for digital products, I review the work of Jakob Nielsen, a human-computer interaction expert who developed the most widely-used set of heuristics for user interface design, including this visibility of system status principle. In order to deepen my understanding of each of his ten principles, I want to dive deeper into real life examples which demonstrate today’s best UI practices.

Principle #1: Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Presenting users with the status of the interface they are interacting with keeps the user in-the-know. It prevents confusion about what the system is doing. The most obvious example of a visible system status is any type of progress bar or loading indicator. When you open the web application Slack, for example, you are presented with two types of indicators that inform the user that their application is loading.

The circular progress bar gives a visual, percentage-based indicator of how much more time a user must wait for their screen to load. This particular UI is a great example of a skeleton screen, which lets the user know where information will be found once the screen loads.

Making the system status visible in a UI lets the user know what’s going on within the system through visible feedback. Slack’s system gives the user feedback upon opening the application.

Another common example of the visibility of system status principle is found when users submit forms or publish content online. When a user presses a button, they expect the system to respond, and give appropriate feedback that correlates with the action taken. Here’s an example of a Google Form after a user submits a form:

After clicking the “Submit” button at the bottom of a form, the user is given a message indicating their response has been recorded. The message is concise and clearly describes the action the user performed within the system.

For OIT’s design system, I incorporated this principle when designing a loading indicator for the web. We use progress indicators to let users know the app isn’t stalled and to give them some idea of how long they’ll be waiting. By including the DHS seal in the center of the progress indicator, the design also provides an opportunity for branding.

Visibility of system status is a fundamental principle of any UI because it communicates with users in ways they expect. We can use this principle to design UIs that build trust with the user through clear and timely feedback.