How to manage user expectations with progress bars
One of the most common and crucial forms of user feedback is a progress indicator. A progress bar ensures the app is working and making progress. Good design will reduce user uncertainty, offer a reason to wait, and reduce users’ perception of time. Waiting is a funny thing. Studies show people overestimate how long they wait by about 36%. A continually moving progress bar that steadily increases will make people feel like things are slowing down. So how do we manage the user’s expectations?
Occupied time feels shorter than unoccupied time. Journalist, Daniel Engber, described this in his TED talk, How the progress bar keeps you sane. “It turns the experience of waiting into this exciting narrative that you’re seeing unfold in front of you.”
So, progress bars are instrumental for design. When do you include one?
If the wait time takes longer than one second, use an indicator. Default loading icons that everyone is familiar with, like iOS’s spinner or the Spinning Wheel of Death, have unfavorable associations. Make something new, with a way to indicate the progress of time, and the user will stay engaged. Also, allow the user to navigate away from a long loading time, or let them pause or stop to give users control.
In his blog, Rusty Mitchell detailed a Facebook test that showed when they tried to indicate loading to users with a unique animation; users blamed the app. But when they saw the iOS app animation, they would more often blame the system itself. So when load times are very long, or outside the app’s control, the familiar spinner may be the way to go.
The examples above are all indeterminate progress spinners and bars. These should work when it is not necessary to convey how long a process will take. For everything else, there’s a determinate style.
A determinate indicator should always go from 0% to 100% and never go backward. Even if several events are happening, use a single sign to represent the whole levels of progress. One way to achieve this is through a simple linear animation. If the process takes more than 10 seconds, instead use a percentage based animation. If it is possible to determine the time or if it is a very lengthy wait, provide a general time estimate as well.
If you do use animations, start the movement slowly in the beginning and speed up over time. Like we saw in the earlier study, users observe constant speed as slowing down. By having the rate move faster as you approach the end, users will perceive a shorter overall wait.
Progress is not just for loading or wait times. If percentage indicators are not applicable or if you can break the wait time into concrete measures, indicate the number of steps to help users form an estimate of time. Good times to choose a stepper are when there are several forms, a user survey, or a checkout process.
Finally, if it’s not clear by now, don’t use a static symbol. A message like “Loading…” or “Processing your results…” without an accompanying animated indicator is static and gives no dynamic user feedback. It often gives the perception that something is wrong or broken. Something more meaningful, interactive, and entertaining will signal to the user everything is working as expected.
As we’ve discussed, progress bars help reduce waiting fatigue and keep users engaged. Good design provides feedback. The progress bar can be illustrated as defined or indeterminate, and with looped, linear, or progressive animation. And you may choose where to make it unique or system-oriented. Percent-done, general time estimates, and steppers also convey progress to the user. Follow these steps, and you’ll have a good understanding of when and how to use a progress indicator.
