Summary
The first and maybe most important rule of the 10 Usability Heuristics for user interface design by Jakob Nielsen is:
Visibility of system status. The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Knowing the current system status gives the user a feeling of control. Although we always want to keep the user informed about the current system status, it is also very important not to overwhelm him with excessive information.
- Spinner. This loading indicator is the most basic way to indicate the user that his action is received and processed. We use it with response times of 0.2 ~ 7 seconds.
- Skeleton loading. The page layout is displayed after a very short time. This reduces the passive phase of waiting and avoids any "jumps" in the page layout.
- Progress bar (determinate). For longer waiting times (> 10 seconds), we show the user how long (approximately) the waiting time will be by displaying a progress bar.
- Notification. If an action is executed at the end of a process or is expected to take a long time, we inform the user about that. The user can continue with other tasks and will get a notification (platform / mail) when the process is finished.
- Wait for it... Sometimes (rarely but not exclusively) we create artificial delays for processes that run too fast to keep the user from getting left behind.
Of course, loading times can be very variable depending on the speed of the Internet or the size of the data. However, the times given here always refer to the happy case.
How we perceive time
Whether we wait for the bus, for the parcel service or in the queue at the supermarket - nobody likes to wait. And the same counts for the digital world. Unfortunately, we do not always have an impact on the length of the waiting time. But with the help of various methods, the perceived waiting time can be shortened.
For us the waiting time feels shorter
- ... if we can estimate how long we have to wait.
- ... if we feel comfortable during the waiting time.
- ... if we do not need to be concerned about whether the system has crashed or data has been lost.
- ... if we have something to do while waiting. The waiting time is divided into active and passive phase, whereby the aim should always be to extend the active phase.
No indicator (< 0.2 sec.)
Every action/reaction that is faster than 0.2 second is recognised by our brain as a direct, causal relationship. In our perception we get the feeling that we have some direct influence on the UI. In addition, the time span is too short for us to get first doubts that something has gone wrong.
Simple actions do not require a loading indicator if they react within 0.2 seconds.
Fast loading (0.2 ~ 7 sec.)
Spinner (indeterminate)
If an action takes longer than 0.2 seconds, we have a rather passive feeling when it comes to manipulating the UI. It is no longer us who changes the UI, but rather the user who "instructs" the computer to perform an action. In addition, initial doubts may arise as to whether the system has not received the request or has crashed. For actions that take longer than 0.2 seconds, there should be an indication that the request has been received by the computer and is being processed.
During the waiting period it may not be reasonable to perform further actions in parallel. For example, if I delete several items from the overview and this may take 2-3 seconds, it should not be possible to interact with any of these items during this time. Sometimes it is necessary to disable the page during loading by adding .wui-state--busy to .wui-scene-body.
class="fad fa-spinner-third fa-spin fa-2x"Skeleton loading (indeterminate)
By loading the page items gradually, the user can actively familiarise himself with the layout while waiting and even read the first headlines or see images before every item is fully loaded. Skeleton loading improves the user's perceived performance by shortening the passive phase of waiting.
The .wui-skeleton-text comes with different width modifiers from .wui-skeleton-text--5 to .wui-skeleton-text--100
By adding the class .wui-skeleton-text--animated you get the animation effect.
Another important cornerstone in the human perception of time is the period of 0.2 - 1.0 seconds. Although we notice the delay of an action, we still remain in our "flow of thought". Our brain needs a full second to change the focus. Therefore it is relatively unlikely to lose the thread as long as we receive an answer within one second.
Long lasting loading (> 10 sec.)
Progressbar (determined)
If a result of an action will take more than 10 seconds to appear, we show users an estimate of when the computer will be finished. Of the different wait-animation feedbacks, the progressbar is the most informative. It reassures the user that the computer is processing their request, it shows how much has already been accomplished and how much is left. There is a dedicated component for the percent-done indicator and a style guide page for it. If you need more information, check here.
<wui-progress :value="66"></wui-progress>Notification
After a waiting period of more than 10 seconds, our brain stops perceiving the current task as a single continuous action. Users tend to perform other tasks simultaneously if they have to wait too long. We support this and inform the user if, for example, generating and exporting a file takes a lot of time. The user is not forced to wait, but can start working on other tasks. After completion of the task we will inform the user about the result by sending notifications and/or mails. Waiting is already unpleasant enough, so we make sure to display the notification in a friendly and positive way.
