Visibility of system status in design
By: Amanda Conlon
Tags: Usability, User Experience, Design, UI Design, Heuristics

Visibility of system status in design

You are sitting at your computer watching the spinning wheel of death (a.k.a spinning beach ball, a.k.a spinning rainbow, etc), feeling the frustration rise through your body like the black ropy grasp of a demogorgon. It is hypnotizing, you are helpless.

As a poor student with a six year old laptop full of documents, tools and tabs, I see this more often than I’d like and I have a vague idea why it is happening. Maybe I should reset the entire computer but the wheel just spins without really telling me why and I never quite have time to troubleshoot (especially after waiting for the wheel to stop spinning). So I am stuck watching the spinning wheel of death everytime I open my laptop, giving me the opportunity to practice some breathing exercises. The spinning wheel is an indication that something is happening and the computer is working (I think), the same as the pixelated hourglass I remember from the first hand-me-down computer my dad brought home when I was ten. In reality, the spinning rainbow hamster wheel is much less frustrating than watching a frozen screen where nothing is happening. At least I can trust the computer is doing something, other than trying my patience. This icon is an example of a system status and an important component of user experience design.

Rule #1

Photo by Gilles Lambert on Unsplash

Jakob Nielsen created standards for testing the usability of a digital user interface and the resulting user experience through heuristic evaluation, ten principles used to evaluate a design. Heuristic Rule #1 is Visibility of System Status which requires communicating the appropriate amount of information to the user in a timely manner. Feedback and knowledge help users feel more in control and this control leads to better decision making. Feedback can come in all shapes and sizes from a checkbox next to the songs you are adding to a playlist, to a message assuring you a payment was processed, from the little buzz you feel when you tap the home button on your iphone to a process bar that shows how much longer your computer update will take. Usually system status is conveyed by a combination of visual indicators and text but the main goal should be clearly communicating with the user. Have you ever tried to create a password only to get a red error rectangle with no indication of how to fix it? It’s like when your little sister says, “I’m mad at you so I’m not talking to you” leaving you to guess all the reasons why she might be angry until she finally breaks her silence to say “yep”. Usually people aren’t as patient with a product and may end up leaving the site without completing the sign up leading to a lost business opportunity. Feedback exists outside the digital world almost naturally, physical buttons click, engines make noises and lamp bulbs produce light but digital products need to be designed to give feedback.

Just enough transparency

Photo by Ethan Hu on Unsplash

Working as a host at Deschutes Brewery during the hectic summer tourist season was one of the busiest restaurant jobs I have ever worked. When I was the designated “list” host I would spend an entire eight hour shift doing nothing but rapid fire greeting people, asking for their name and quoting a wait time before handing them a buzzer to carry around for the next two hours (yes, people would actually wait two hours for a table). The standard practice was to give an overestimated time range thus lowering expectations and making happier customers when they were seated faster. In my experience, customers seemed to feel reassured at restaurants were they were given buzzers since they were holding a physical token and didn’t have to worry about missing their name being called. Inevitably, some people would always come back for an update not trusting my spot on estimation skills of a 1 hour & 45 mins to 2 hours. I did become pretty good at estimating these wait times based on a few factors I was always crunching in my head; I was the indicator of system status as well as the buzzer. No one knew what was going on behind the scenes but I knew about the backed up kitchen working in 90 degree heat, the server who called in sick or the table that decided to invite a few friends to pull up chairs after they paid their bill. This is where transparency comes in. As a host, I wasn’t going to give the customer all these details but I could let them know that the kitchen was really busy that night or the Portland Beard Festival just finished to make them feel a little better about their long wait. I would offer them the option of grabbing a beer at the (packed) bar or looking for a book at Powell's Bookstore down the street while they waited. This is the perfect parallel to what happens in a user interface compared to what is going on behind the scenes, we only see what is on the surface and what the computer or the designer chooses to show us.

A little history

Photo by Federica Galli on Unsplash

This real world system connects to a fascinating podcast episode of 99 Percent Invisible where Roman Mars explains the interesting history of status updates in the early days of computers and the internet. In 1981, Xerox released the first office computer called the Xerox Star. Even though it was one of the fastest computers at the time, people still thought it took forever. Jason Farman, an expert in this area, believes the perception of slowness actually had to do with the loading icons. Unlike the ferris wheel of death we have today, the Xerox Star had a static hourglass and similarly Macintosh had a wristwatch that was always stuck at 9 o’clock. These icons gave no indication of how long you would need to wait. Around this time, the progress bar was born to give users a sense of control so they knew they could grab a coffee while they waited. This gave them control over their time. The progress bar was a huge success with only one problem, it was too accurate. Like in a restaurant, it was dangerous for me to give an exact estimate for wait times because something might happen to slow things down. With a loading bar, sometimes the process would be fast at first only to slow down right before the end leading to even more frustration. It all comes down to expectations. So they redesigned the loading bar to start off slow then speed up at the end regardless of what was actually happening, leaving users pleasantly surprised when an update was faster than expected.

As many companies started to invest in better status indicators, services like travel websites were struggling since they needed their customers to wait while they processed large amounts of data to generate ticket information from multiple sources. Kayak.com decided to give customers just the right amount of transparency to keep them patient and let them know the website was working hard, so instead of a progress bar they showed the customer what the algorithm was doing as it searched. This transparency assured the customer the website was working and saving them all that work themselves. This concept was proven again in restaurants with open kitchens, where researchers found that customers who could see chefs working showed more patience for their food to arrive and even described it as tasting better. Transparency gives customers and users the knowledge to understand processes that they may take for granted, helps them empathize with computers and restaurant workers and primes them to leave feeling informed and satisfied.

May I offer you some feedback

Photo by Kai Pilger on Unsplash

Technology has come a long way since the 80s and we now have a lot more to think about than progress bars. Visible system status involves the users in the experience by communicating clearly and can add a satisfying element of delight if done right. As the world becomes more digital these indications are changing and evolving and sometimes they seem so natural we don’t even notice them. Smart phones intentionally build in haptics like the buzzes, vibrations and taps when buttons are pressed or sliders move to subtly reinforce actions on the screen of a solid device. These are feedback mechanisms that let you know you have turned your phone to vibrate or that your device is woke (just kidding). They are almost imperceptible feelings but make your phone feel alive and responsive. Netflix tells you exactly what happens to your videos after you click thumbs up for the first time, Google Drive shows the status of your documents as they upload, and the little green light on your laptop camera lets you know it is on. Tokyo has designed an amazing solution at pedestrian crossings by incorporating call and response bird sounds with alternating chirp signals to improve accessibility. Transparency can mean the difference between a stressful experience or a productive one. On a recent flight through an airport in New Zealand, I noticed that the monitor to check my gate said either “relax” or “go to gate”. Seeing “relax” after scrambling to put my shoes back on at the security screening shifted my mood immediately. These are all ways technology has been designed to communicate back to us.

Photo by Lenin Estrada on Unsplash

Feedback in technology is just another form of communication and is becoming more and more important as we expand our relationships with ever-changing devices. As we move toward designing for voice interfaces, immersive experiences, smart homes, the internet of things and unknown advances in technology, I’m excited to work towards an evolution of system status updates to further benefit the user. Maybe someday the spinning wheel of death will be replaced by something like “go make some tea, this is going to take a minute”, or “breath in, breath out” like the Calm breath bubble, or maybe trivia like the local news uses during commercial breaks to leaves you on the edge of your seat. Most importantly, technology will need a clear language of concise communication whether that is through words, symbols, status bars, buzzes or sounds. Technology will need to respect a user’s divided attention, keeping them engaged or empowering them to walk away.