	New Styleguide page for "Loading"
	Introduce CDN links to all images
	Add Section with index-tiles to branding page
	New Styleguide page for "Branding"
	Extend ".wui-bs-alert" with all fruit-color-variantes
	Font-Awesome has been updated to version 5.12.0
	"Utils" has been extended with opacity, heights and colors

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Loading

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. Depending on the duration of the waiting or the situation the user is in, we use different loading indicators each offering an appropriate range of 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 (> 5 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.

In Review

This component was thoroughly tested. However, it has not yet been applied in many cases in production. Maybe there will be changes due to case-related issues. If you want to use this component in production please let me know, so that we can talk about possible future changes and be sure that none of the changes will disrupt your work. Feel free to contact me via slack, email (tjaeger@wescale.com) or personally.

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.

Infinite animation (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.

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.

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 he will be informed about the result by notifications and/or mails.
Waiting is already unpleasant enough, so we make sure to display the notification in a friendly and positive way.