Visibility of System Status

So, you have an interface, a layer between users and something.

It doesn't matter whether it's a web app, a mobile app, or a physical object. The principle applies to anything, even an airport, cafe, or your own house.

Users should be aware of the current state of the system.

It doesn't mean that users should view your database, logs, recent connections, CPU usage, and other information that is not needed at the current moment. But users should be aware of the things that matter to them.

It means that the interface should:

1. React to user interactions, like clicking a button.
2. Show where users are. Example: What is the current page, order status, and subscription plan?

Again, this doesn't necessarily imply displaying everything at once.

One of the most common mistakes I see is users not knowing where they are in your app. Usually, this leads to navigational issues. For example, I'm on a page, but I don't know how I got there. If I leave it, I probably won't find it again.

Consider this example. Due to complicated information architecture and deep nested pages, there is a mess in the X settings page; you never know where you exactly are.

This is similar to being lost in a large airport with few signs or unsure if you should board the plane or wait for it.

Examples of applying visibility of system status

• Show a notification when a file is uploaded.

  This feature is especially useful in file management systems such as Dropbox, Google Drive, and others. Usually works well in single-page applications. Can be displayed in various ways, for example, as a toast notification.

• While submitting a form, display a progress bar or a loader.

  Unless you use the optimistic approach, consider showing users that their request is being fulfilled. It is not worth it if the request took, for example, 100 ms. In this case it will look like an instant flashing of the loader. But if the request takes noticeable amount of time, system should show users that it is doing its work.

• Use a loading spinner, progress bar, skeletons, or other techniques when fetching data from the server.

  The opposite situation is when you fetch data from the server. In this case, depending on your specific case and layout, you might use different kinds of loaders or skeletons. However, keep in mind that loaders may not always be necessary, especially if the information loads quickly.

• When storing changes, display a "Saving..." indicator. This is particularly important for asynchronous saving.

  This is a lovely candidate for the status visibility heuristic. Text editors and other apps widely use it for auto-saving. Apps like Google Docs display the document's saving state and the last update date.

• While a search is running, display its progress.

  Sometimes a search might take a while, especially for large sets of data. For this case, an infinite loading indicator will tell users that the system is working under your request.

• Show a loading indicator while a webpage or app screen is loading.

  When a heavy application loads for the first time, it may take some time to load all necessary files and data. For example, a single-page application might take a while for the first load, but then it will work fast. Or a landing page that is full of heavy graphics and animation might make use of it.

• Notify users when data synchronization is in progress.

  A typical example is cloud storage providers. If users have a file in a cloud storage, they should be confident whether it is fully uploaded and synced with the local copy or not. If this isn't the case, an indicator should inform users that the file is currently syncing.

• Display an update progress bar when the system is updating.

  System update may take quite a while, and showing the progress bar will be a good idea. Note that it should show the real progress, noе an infinite one.

• Show error notifications when an operation fails.

  When something goes wrong, notify users about it. Pay special attention to the language you use and always provide further instructions so that you don't leave your users at a dead end. This is related to another usability heuristic called users control and freedom.

• Indicate if a heavy process ran in the background.

  For example, when exporting a large number of subscribers in a newsletter, you may either show a message that when the export is ready, the system will email a link with the archive, or, if you do it right in this system (e.g., in OS), there might be an indicator of how well the heavy process is going.

• Inform users when a background process is completed.

  In the case when a heavy process that was running in the background has finished, you may notify users via different methods (email, push notifications, or even SMS).

• Show download progress for files.

  A good example of this is when you download a file in Chrome or other browsers. They will display the number of files you're downloading and the estimated remaining time.

• Indicate the user's position in a queue or waitlist.

  An example from real life: when I go to a bank branch and take a ticket to get into the queue, there is a number of people in front of me printed on the ticket.

• Display battery status, whether it's charging or not.

  Another useful and apparent example of system status is what's going on with your battery, whether it's charging or not. If too little charge is left, you should notify users so that they don't forget to charge their devices.

• Show the current connection status (e.g., Wi-Fi signal, online/offline status).

  As well as the battery status, showing what status the Wi-Fi connection has, as well as the Bluetooth connection, is a common thing in operating systems.

• Notify users about the status of a print job.

  When sending a job for a printer, show its status. Has it started? Is it in progress or has it already been completed?

• Show the status of orders in e-commerce apps.

  In e-commerce apps, users should know all the information about their orders, such as ordered items, order status, price, delivery address, and so on.

• Show the realtime courier location on a map

  This one is a super helpful for delivery apps. Knowing exactly how close the courier is helps you to plan your further actions—if the courier has almost arrived, then you might want to meet them. If the courier is far away, you can continue with your usual activities.

• Show the real-time taxi information.

  Same as in delivery apps, showing such information as location, estimated arrival time, estimated costs, and so on is really helpful.