Visibility of System Status
The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.
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:
- React to user interactions, like clicking a button.
- 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.
Another example. I'm in some of the sections of the Amazon catalog. The categories of books are mixed with filters. That might be okay, but there is no indication of which "department" I am in. The "Department" and "Books" labels are not links. Moreover, there is only one department in books.
Only if you scroll up will you see four mixed menus. And there is no indication of where you are.
How can I return to the full list of categories? No, the categories link will open a sub-menu with categories of books.
Compare to the following example. There are breadcrumbs and highlighted categories in the menu.
Even though it can probably be improved. The breadcrumbs don't show the current page, only previous categories. While in the menu, they show it, which is good.
Another example. Compare the following images. Apparently, the right one shows the current system status.
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, 100ms. 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.