Improving UX of progress bars Fast progress bars to enhance user experience

Faster load times…

It is logical, but still worth mentioning: the best optimization of load time is keeping it as short as possible. You should optimize data to avoid unnecessary transfers and keep the size of data as small as possible. It is not always necessary to use a high definition pdf file to show a magazine: web standards like HTML5 and CSS3 are considerably smaller. Progressive loading in the background helps in making contents available before they have been loaded completely.

… or create a pleasurable waiting time

However, it is not always possible to avoid loading of huge data. Some apps show a little film or a couple of introduction screens while sucking the data from the net. This is not only useful to distract users, but can communicate small pieces of information like tips or usage instructions. Learning while waiting.

Instant loading, seemingly

The progress bar itself is also worth considering. Design is not only simple aesthetics, but a crucial influence of how users perceive a web site or app, and how they use it. Design decisions are therefore not only a question of visual style, but regulate users' perceptions. You can use this for your advantage: the right design decisions can data make seem loading faster than it objectively does. Of course, you might object this would mislead users. However, interaction design is about enhancing the user experience (UX), so making the waiting time as pleasant as possible is very legitimate.

Let's take a look at how progress bars can make the loading seem faster. Chris Harrison and his colleagues concentrated on this question in a couple of studies. They successively showed their participants two different progress bars and asked them which one of these seemed faster. Objectively, both progress bars took exactly the same time (5 seconds), but this does not mean that the perception of time was identical.

The pulse of time: pulsating progress bars seem faster

Pulsating progress bars are better suited to make the felt waiting time of users as short as possible. For example, you could make the color of the progress bar pulse in different hues.

Progress bars seem even faster when the frequency of the pulse changes, especially when it accelerates towards the end.

Beware of one color: gradients and animated shadings reduce the subjective perception of time

As Apple's OS X shows, progress bars need not to be one-colored, but can be composed of animated gradients or shadings. It is especially useful to let the gradient move in the opposite direction of the bar itself. Accelerating the animation towards the end creates the impression of faster loading.

Can the effect be measured?

Tiny visual details like this improve the perception of the loading progress. But does this effort really pays out? Yes, it does, and even the numbers prove it: Harrison and his colleagues investigated in another study how much faster the loading progress seemed. Participants of the study could adapt two progress bars until they seemed to be of the same speed. In this study, shaded progress bars seemed about 12% faster than non-shaded.

Conclusion: little "tricks" for a better user experience (UX)

Good interaction design is built on love to the details: little tricks like a pulsating progress bar or animated shadings enhance the user experience to a great deal. Additionally, you can use the waiting time to communicate information to your users. An alternative, which is especially used when data is loaded from the web and the duration cannot easily be determined: a spinning loading indicator in circular form – but this is another stylistic device with different use cases.