“This article is loading…please wait.”

Use waiting time smartly

Nobody likes to wait. Especially not for a server that is too slow; over and over again. Therefore, we would like to give you an overview of what you can do to make an application appear faster and use the waiting time to your advantage.

Image © Xu Haiwei, Unsplash

Why is waiting time perceived negatively?

Often it is because we have certain expectations, while we are not sure if and when our expectations will be fulfilled. Waiting triggers uncertainty because we cannot control this time and thus, are forced into a passive state of uncertainty.

What happens if we are exposed to passive waiting state for too long? We feel uncomfortable as our time is being stolen and become nervous, angry, lose trust and eventually, interest. An initially positive feeling of anticipation turns into frustration. This is pure poison for any digital application — whether a website, an app or a desktop application.

Is a technical improvement worthwhile?

If you now think: I’ve got leading developers in my company who permanently strive to maximize performance, why even consider other strategies? Then you should bear in mind that a time saving of less than 20% is not explicitly perceived by the user [1]. An effect also known as the Weber-Fechner law.

“Use the waiting time!”

“Use the waiting time” is our magic formula at this point. Accept that waiting is unavoidable in some places. As described at the beginning, waiting creates uncertainty in us when we feel passively exposed to the waiting time. In addition to passive waiting, there is also active waiting (Figure 1). In this case, a process runs in the background and the user has to wait for the result, but he or she feels actively involved in the process. Perhaps even better: he or she does not even enter the conscious state of waiting.

Fig. 1: Active vs. passive waiting

Compared to active waiting, passive waiting is perceived as about a third longer [2]. And therefore, we need to keep the passive waiting as short as possible.

Remain attentive!

Fig. 2: Human attention span in the digital environment

As shown in Figure 2, a waiting time of up to 0.2 seconds is not perceived as such. You perceive this short period of time as instant.

Up to one second we perceive an interaction, but still no waiting. From one second on we start to realize: aha, we have to wait, our thoughts wander off, we become impatient. In short: the condition is no longer optimal. From 5 seconds on it becomes really critical: why does it take so long? We are annoyed and lose the desire to continue.

Therefore: Let us give the user a feeling of active participation, influence, security, anticipation and trust instead of unsettling him or even alienating him. How does that work? In the following we will show you the techniques and possibilities step by step.

Are progress indicators the rescue?

They give us a good feeling that something is happening and that we are getting closer to our goal. At best, they inspire trust and anticipation.

In addition to the classic progress indicators, such as spinners and loading beams, another, more indirect way of indicating progress is now conquering the field: transitions. Here, the transition from state A to state B is represented by a flowing animation. In the best case, it provides the user with even more information, so that he or she doesn’t even notice how much time has passed. Through the animation, the user has become a viewer and as long as something “happens”, this time is not perceived as a waiting time, but as a natural transition. It could also, for example, communicate, the successful sending of an e-mail. The transition is ideal for waiting times of less than one second.

But the spinner is an option (Figure 3). It indicates that something is happening, even if it is neither clear to the user, what he or she is actually waiting for and also for how long. The spinner is particularly suitable for short waiting times of less than 3 seconds, which cannot be covered by a transition or other methods. In addition, it offers the opportunity to convey the CI design and entertainment with brand identity.

Fig. 3: At least an indication that progress can still be expected

Now there is the classic progress indicator: the loading bar. It gives us direct information about the progress and, in the best case, lets us estimate the remaining waiting time. In some cases, it is followed by an additional information about which step is currently being executed. The loading bar is particularly popular for making sure, waiting will end in a predictable period of time.

In order to further increase certainty, a striped pattern, that moves in the opposite direction, can be placed on the progress bar (Figure 4). This gives the impression that the loading bar moves 12% faster than the same loading bar without this trick [3]. This effect is comparable to a passenger whose train passes an oncoming train. The simultaneous movement in opposite directions creates the impression of moving faster.

Fig. 4: According to the study, the lower version is perceived as 12 % faster

You might want to increase the user’s sense of achievement at the end of the waiting process. Thus, some loading bars deliberately overestimate the remaining waiting time, or they delay progress at the beginning to become faster towards the end. This gives the impression that the whole process was unexpectedly fast. A nice psychological trick. But still: the best progress bar is no progress bar. Progress indicators make it clear to the user that he or she is waiting. But how can we make loading indicators superfluous?

Tell a story!

Instead of frustrating the user, we can increase their anticipation of the new product by telling them an exciting story while they are waiting (Figure 5). Today, for example, we find a successful implementation when installing the open source Linux distribution Ubuntu. While the installation is running in the background, the installation window explains how great the new version is and which benefits and new features will delight the user in the future.

Fig. 5: This happens during storytelling

Storytelling not only distracts the user; it also offers a great opportunity to showcase the product and offer added value. In order to achieve this, you should think carefully about what information is relevant for the user and how it can help him or her. Here, context is everything. Explain special functions to your users, share useful background information and show what added value your product offers.

With a good story the loading time can emphasize that the product is worth the time. Or as the saying goes “good things take time”. That’s something you should definitely communicate to your users.

“I’m already here” the hedgehog shouted.

Let’s now have a look at more advanced techniques where the user does not even notice the waiting time (Figure 6). Does that sound like fairy tales to you? Our suggestions certainly have a magical flavour. Let’s first take a look at the end of the waiting period. Here the question quickly arises: why, at all, has the users to wait until the very end? Can’t we offer them something much earlier? In most cases the answer is: yes! Let the user interact with the loaded parts of the interface before the whole application is loaded.

Fig. 6: Shortening the passive waiting time for the user

A good example of this is YouTube (Figure 7). As soon as the first seconds of the video are loaded, it starts. If we had to wait until the video is fully loaded, we would certainly leave quickly.

Fig. 7: The video is started before it is completely loaded

We can also use this trick for entire websites and provide everything we need in HTML. A good tool for this is Inline CSS. Here we can provide all necessary CSS rules, also called “Critical Path CSS”, to make our site look good in the beginning — at least as far as the user can see it. This area is also called “above the fold” (Figure 8). Everything else follows as soon as the rest of the CSS has been loaded. For a first, we can use the “Critical Path CSS Generator” [4]. Inline CSS can reduce the time until the first rendering by 40%. A decisive advantage, especially if your users want to get information quickly.

Fig. 8: Bottom elements can be loaded secondary

Develop clairvoyant abilities

Another way to present content as early as possible is a method that is often referred to as “skeleton loading” or “content placeholder” (Figure 9). Here, the places where content is loaded are pre-structured and presented in schemes. Thus, the user already knows what he or she can expect and can focus accordingly. The schematic representation also serves as a progress indicator that tells the user that the desired content will soon be loaded.

Fig. 9: The “skeleton” of the website already suggests content

Let us be realistically optimistic!

In many cases we let the user wait for feedback from the backend. After all, we want to be on the safe side to ensure that his data has been stored correctly. But let’s assume that in 99.9% of the cases a predictably positive response comes back from the server. Does it then make sense to let every user wait or is it sufficient to report a negative feedback to the user in the rare 0.01%? Especially if the feedback from the backend is not of essential importance for the user, it is worth adopting an optimistic attitude and not bothering the user any further. This procedure is also known as “Optimistic UI”. Especially small interactions as “likes” don’t have to wait any longer for a server response but can give a positive feedback instantly. If problems occur, they can either be solved “invisibly” by continuing to try to execute the action or the user can be informed more or less conspicuously.

Twitter, for example, takes an optimistic stance. If the user gives a like to a post by clicking on the heart symbol, it immediately turns red and signals: “You have left a like for this post”. Although there is no feedback from the server yet. If, contrary to expectations, the server doesn’t respond, Twitter removes the red coloration of the heart just like that, assuming that a like will not be more or less essential for the user.

Taking the users by the hand

Fig. 10: How to make waiting time pleasant for your users

If your application loads in under a second, congratulations! Since this is unfortunately often not technically feasible, fortunately, there are plenty of possibilities to make use of the human perception of time make applications appear faster than they really are. Concentrate on the three essential points: Speed, entertainment and explanation (Figure 10).

In a nutshell:

- Be as fast as you can.

- Show progress and what happens in the background.

- Don’t let the user get bored.

- Explain your users why waiting is necessary in a particular case.

- Offer added value and fill the waiting time with meaningful content.

Your users will perceive the waiting time much shorter or hardly perceive it all. This creates trust and your users will no longer be left in the dark.

So: take your users by the hand and guide them through your application just as you would guide a child through a new environment: cautiously and trustingly.

Please contact us for a UX review of your application where we can find out how to improve its performance with UX/UI design.

[1] „Designing and Engineering Time: The Psychology of Time Perception in Software“ by Steven C. Seow

[2] „Perspectives on Queues: Social Justice and the Psychology of Queueing“ by Richard Larson (MIT)

[3] “Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations” by Chris Harrison, Zhiquan Yeo & Scott E. Hudson (Carnegie Mellon University)

[4] https://www.sitelocity.com/critical-path-css-generator

Credits:

This article is based on

Elisabeth Engel’s speech https://slides.com/elisabethengel/illusion-of-speed and the corresponding article Dieser Artikel lädt … Bitte einen Moment Geduld.”, Codecentric Softwerker, issue 14, 2019 Frontend Spezial

Published by Lisa Gorelik on 2019-11-05

Sparked your interest? Discover our services!

Digital shapers