The Challenge
“What bugs you in your daily life? What do you think can be improved to make someone else’s life more enjoyable? Or Maybe you’d like an existing tool to have a new feature that can improve user experience.” Upon first reading the prompt I was very excited. I thought to myself, “Look at all this freedom they have given me!” However, after 15 minutes I was filled with dread. I became wrapped up in finding the “right” problem to solve. The identification of the “right” problem became just as important as the solution. I frantically began opening applications on my phone. In my rush and anxiety to find the “right” problem I was beginning to get frustrated with my search as I kept encountering waiting states. Normally these would not bother me, but I was on a deadline. The spinning wheels, dots and ghost states added to my anxiety. My allotted time slowly ticking away as I waited. A light bulb moment.The problem I would tackle was the one that I was currently becoming increasingly annoyed with, waiting itself. This is a condition found in every application. Technology is faster than ever and we expect it to always work smoothly so when we do encounter a small wait or screen buffer we become discouraged. If the wait is too long sometimes we abandon the task completely and open another application.
I started to dig around and find out what others had to say on the topic of waiting. I was put onto an episode of 99% Invisible, Wait Wait...Tell Me which was a wonderful introduction to the waiting problem and the psychology behind waiting in general. I then went to the Library, yes a brick and mortar building with books to continue my research which is where I discovered the book A *New* Program for Graphic Design by David Reinfurt. This book really helped push me to tackle this concept of waiting. It was this book that introduced me to the designer Susan Kare and her work at Apple. My research began to reveal categories and divisions of waiting. Categories that went beyond Dots, circles, and ghost states. I arrived at four distinct category of waiting: Waiting as Waiting, Waiting as Information, Waiting as Branding, Waiting as Distraction.
Waiting as Waiting
Starting with the obvious lets look at the well used forms of waiting we encounter everyday in digital design: Spinning Wheels, Dots, Progress/Loading Bars, and Ghost States.
Spinners
Susan Kare designed the watch above and it animated in fifteen minute increments to let the user know that the Apple Computer was working. This was all the way back in 1984. I use it as an example here because it is a better spinning wheel then most modern iterations. It is clear what it means and has a level of design and humor that many modern versions lack.
Dots
Dots have become my least favorite “Waiting as Waiting” element. Dots a simple and a lazy solution that has been copied and pasted across so many applications. Dots give zero indication of time or duration of the waiting. This argument can also be made of the spinning wheel, but the spinning wheel has the advantage of being slightly more interesting to look at while waiting.
Loading Bars
These actually have some functionality that the other elements in this category lack, but its main flaw comes in the form of accuracy. The user is informed that progress is being made and supplemental information such as percentage, loading rate, and disclosure of processes occurring help inform the user what is going on behind the scenes. If accurate this is one of the stronger elements within Waiting as Waiting.
Ghost States
Simply put these states provide a hint to the user of what is to come. So when the screen does eventually load the user is prepared for what the content will look like once fully loaded. A nice and useful waiting state. Although it is missing certain attributes that could elevate it out of the Waiting as Waiting category. Most notably the lack of information provided to the user such as time remaining or why the user needs to wait.
Waiting as Information
Waiting does not always have to be empty as you wait for the spinning beach ball of death or the XBOX ring of death to one day stop. The next set of examples takes waiting in a different direction, informing the user about waht is going on in the background or tips and tricks for using a tool in the future. Taking moments of stillness that are normally annoying and possibly anxiety inducing, and engaging the user makes the user less aware of the waiting and puts them at ease of why things are taking longer than3 seconds.
Shazam
Shazam is a wonderful example to look at. Shazam usually gets the information you are looking for incredibly fast. I had to push it to the limit by having Shazam search a room with no music for research and curiosities sake. The results were wonderful/ While the center logo animates to signal the user Shazam is in fact working a series of text messages cycle through a 30 second search window. The first message is a simple "Listening for music." After 10 seconds the message changes and reassures the user it is still working with a "Searching for a match. 8 seconds later the message changes to "Expanding search". This only last s7 seconds before transitioning to the final message, "This is tough" which only lasts for 5 seconds. There is a clear rhythm to this waiting state that knows how the anxiety builds the longer wait. Therefore the message starts to change at a faster and faster cadence.
Turbo Tax
Waiting as Information engages the user by informing them about something relating to the application being used. At the end of each step within the Turbo Tax process users must wait while the system compiles all the data and checks for the best refund possible. The screen lets the user know what is going on behind the scenes.
Waiting as Branding
If you are not informing your user about what is happing on the backend you can fill the waiting state with some form of branding. This was most apparent in Headspace. Their meditations have an incredible take on waiting and being present. Every piece of software must contend with waiting states, why not take advantage and put a little more design work into making the experience part of the Brand.
Risks
Using your Brand as a waiting state does pose potential risks. If the wait is longer than acceptable the user may associate the Brand with long waits. Incorporating Brand Identity intoa loader does not make the wait easier on the user, but it lets the user know that the company cares about the users time because the company took the time to make a unique loader to make the experience more enjoyable. It is small details that make the biggest difference in how the user ultimately feels while engaging with an application.
Waiting as Distraction
Last but not least there is Waiting as distraction. I am sure you can guess what the first example is going to be...and that is a great sign. Waiting as Distraction is a gamble. However, if done correctly this can actually elevate the Brand and the product. The Dinosaur Game you can play when the Internet is out on Google is a beautiful example of this because it takes something that is quite annoying, the internet being down, and provides a little bit of joy. When the internet is not available it can be very stressful. Google has no idea why your internet is down and how long it might be down. Google could have just placed a spinner or a ghost state or a loading bar say searching for Internet, but instead they provided a game for the user to play. The game does not provide a solution for the user, but it serves a greater purpose for Google. It keeps the user on Google even though Google has told the user (to their face) that it can't help them right now other than have a T Rex jump over cacti in the 8-bit desert.
Youtube
Youtube attempted providing a game for the user for a period of time as well. While videos buffered there was a spinning wheel of dots to let the user know it was in fact buffering. If the user pressed any of the arrow keys the spinning wheel would become a line of dots and a game of snake would begin.The user could play as long as they liked and when they felt like returning to the video it would have had ample time to buffer.
DVD Videos
The final Waiting as distraction I want to share with you is something that is slowly going away with the advent of the streaming services era of entertainment. This last example I grew up with and for some reason found enthralling. This was more of a Waiting as Branding, but it slowly evolved into Waiting as Distraction as classes of students and even the employees of the hit series The Office waited with baited breath for the logo to land perfectly in one of the four corners.
In Review
Waiting is an unavoidable part of software that is currently being neglected by many products. This means, as designers, we should be more conscious of how we treat the user when they are forced to wait. I would hate to become the product equivalent of the DMV. Take the time and decide how your product will negociate the interstitial space between the screens we spend so much time designing. Transform something that can be painful and stress out users and create a more enjoyable user experience.