Visibility of system status is all about transparency and clear communication with the users. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Aah the ATM Machines!
I still remember the last time I tried withdrawing cash at one of the ATM Machines. It asked me to enter my PIN (password), and then I waited for at least 10 seconds, till the new screen appeared. I actually pressed the submit button at least 4-5 times before I got to the next screen. It made me go through the entire charade, only to let me know in the end, that there was no money in the ATM Machine.
There was this other time when I entered the PIN and the amount I was withdrawing only to look at the blank screen. I had a panic attack for 5 seconds (which felt like an eternity) till the time my money finally came out from the machine.
In my many years of owning a debit card, I am yet to experience a smooth money withdrawing experience. I have felt stupid, terrified and angry, every time I have used an ATM Machine.
From the moment you swipe your card, until the moment you take out the money, the whole interface fails to give you appropriate feedback. It does not tell you if your card is swiped the right way, it won’t tell you if you have made any error, heck it won’t even tell you if the money is going to be withdrawn or not.
The Problem with ATM Machines ( and many other interfaces that suck )
PS – It’s not me, it’s you, ATM!
Reflecting now on my ATM experience as a UX Designer, I can sense the reason for the terrible and disappointing experience – Absence of Visibility Of System Status. What is system status you ask? It is everything that tells users where they are in the whole scheme of things with appropriate feedback in a reasonable time.
Your users are creating a password, that is not right – Tell them in advance. Have they made a mistake? Be polite and tell them how they can rectify it. Have they given you money for your product or service? Tell them the order is placed.
No one likes to be lost. One of the biggest fear, we had as children were the fear of getting lost or abandoned. Guess what, those fears are still very real. And there are several UX which make us feel just that- Lost or even worse Abandoned.
The long forms without any progress bar, the poorly written or absent success or error messages, the spammy looking URLs are the ultimate UX disasters. Still, we see these everywhere around us.
How do we ensure our users do not feel lost?
Jakob Nielsen and Ralph Mulich came up with Heuristic Evaluation as a method of usability evaluation in 1990. These guidelines were then refined by Nielsen and he gave 10 heuristics with “maximum exploratory power”. The very first Nielsen’s Heuristic is – Visibility of System Status.
In this article, we will discuss the various methods of showing the Visibility of System Status and a checklist to check the visibility of system status.
Ways to indicate Visibility of System Status
#1. You are here indicator
Imagine reading a book without chapter names, page numbers, and subheadings. Just plain text. You have lent this book from a friend who does not like marking, highlighting and dog-earing the books. And yea, you wish you had a bookmark with you right now, but you do not have that too. Once you have put the book down for a break, where will you start from?
The page numbers in the book, the headings, the highlights, the dog ears, and the bookmarks are all ways for you find your place in the book.
Navigating through a digital interface is no different. The URL on the website, the page headings are all the indicators for your current status on the interface.
Expedia takes care of the visibility of system status so that users are aware of which page they are on out of all the pages. Additionally, the use of appropriate icons makes it more apparent for users to understand their place on the website.
Many websites use the breadcrumbs to help users track their path and understand how they have come so far.
#2. You are making Progress Indicators
In times of Snapchat, Instagram, and Insta everything, it is hard to wait. It is even harder if you do not know when the wait is going to end. Progress indicators act as an assurance for the users about the progress happening in their activity/action. It ensures that the users do not abandon the system or feel frustrated and have a visibility of system status.
There are several methods that indicate the progress :
- The Progress Bar
The progress bar is used when the system is certain about the time it will take to complete the action. If the action can be completed within 10 seconds, the interface may not even need to show the time it will take.
But if the action, the users have taken is going to complete in more than 10 seconds, showing an estimated time is a good strategy. It also relieves them from looking at the screen, and they can go on and do some other job.
- The animated loader
These animated loaders can make waiting less boring. They are also helpful when the completion time is indeterminate.
Source – https://materialdoc.com/components/progress/
- The steps in the process
We once hired an agency to recruit the research participants in Singapore. Since a lot of time and budget was allocated to this study, we wanted the right participants. We created a small set of screeners for them.
The recruitment agency after few days came back to us telling that they were not able to gather many participants. Apparently, the partners showed interest and then dropped out at the time of filling screeners. The agency believed there were some issues with the screener questions.
This got us thinking about the overall experience of filling the screener questions. This time we created a new screener questionnaire, that indicated how many questions are answered and how many are still left. The form now looked something like the one below :
Source – https://www.typeform.com/examples/
Now when the participants started answering the questions, they could see a progress bar with the number of questions answered and remaining. This way they did not feel unsure about the effort this screener was going to take.
The biggest takeaway – when there is multiple steps/questions/part of a process, tell your users which step they are at. This is a great technique, now used by almost every e-commerce website at the checkout.
For long sign-ups and account creation page, the use of progress bars could be a great way to prevent users from abandoning the process.
#3. You have taken an action indicator / Contextual Indicator
Try to select this text.
Did you notice, how when you dragged your mouse or fingers over this text, suddenly the text got highlighted? the mouse pointer to changed from 
to 
.
You know, that now when you press the Ctrl/Cmd+C, your text will be copied. But what if there is no visual indication of the selection of text?
The change in the color of the button, the shadow, the change in the pointer of the cursor, are examples of immediate and very important feedback given to the users to indicate what is the current state of their action.
As soon as you hit C on Photoshop, you know your image is ready to be cropped because you see a bounding area marker, the overlay, and the resizing cursor.
The A good UX must inform their users with an appropriate feedback on their gestures or actions.
#4. You have completed / not completed the task indicator
Just like in any other relationship, your users’ relationship with you and your product depend a lot on how you communicate and share critical information with them.
Let’s say they have encountered a problem or they have made a mistake, how do you tell them that? Are you giving them enough information to help them rectify the error?
This is one of those error messages that still give me all kind of angry feelings whenever I look at it. They let me go through the whole experience of putting in the wrong information, only to tell me later that I made a mistake. Even if they have told the user, the status of the system, the way it is presented remains highly irrelevant to the user.
I have had multiple incidents, where your order is successfully placed message came much after the X amount has been deducted from your account message from my bank.
#5. Don’t leave them hanging
Honest communication and feedback with your users is a hallmark of great UX. Even when the system requires more than a few seconds to respond to user’s action, give them an immediate feedback. Even a small change in color, URL, and the copy can make your users feel safe and assured that the system is not broken. In the absence of feedback, the users feel that the system is broken, or it results in continuously clicking on the same link, hoping there would be some feedback.
- Feedback beyond screen
• Amazon’s Echo displays a ring of light on the device to indicate that it is currently listening or working on the command.
• Vibration and sound is also another method through which users could know if the system is indicating any action
• Trash has a sound. Similarly, on receiving and sending a message, the notification sound acts as a feedback that the action is completed.
- Feedback Message
• Your mail has been sent.
• Your profile changes are successfully saved.
• Money has been deducted or credited.
How do you indicate the system status of your interface? I would love to learn from you in the comment section.
