Animations: Everyone wants them, ...

Animations have been very popular with web designers for several years. By "animations" we mean above all dynamic, visual changes or movements of a GUI. Here are some examples:

Moving single elements on a website (example: presentation of the UI design report by avocode)

Changing visualizations with scrolling behavior (example: introduction of the iPhone X )

Visual changes that occur on the basis of a process or system state (we will take a closer look in the following).

Basically, animations are about completing the user experience (UX) of a GUI and supporting interactions.

However, animations that are used too often can worsen the UX and become a nuisance if they are accompanied by a time delay or even obstruction in the transfer of information. For example, animations have a high potential for distraction due to their high visual attention. We can observe this again and again in our eye tracking studies.

So what should be considered when designing animations? Here are some food for thought:

On board from the beginning

It is important that the question of the conception and integration of animations is clarified at the beginning of the design process. If they are only considered towards the end, they often only function as an "eye candy" and are more of an obstacle to use.

We also plead for some courage to discard animations if they cannot solve certain problems.

No animation without function

Pretty looking animations are appealing the first time, but will become boring at some point. Especially with repeated calls of a website / app. Therefore it is essential that animations bring functionality with them.

Animations are helpful for example when uploading files or submitting forms:

immediate system feedback gives the user security

Confirmation pages, which give the user system feedback, do not have to be designed additionally

Animations can also be used as orientation aids for the user. When switching to another area, they can help to learn the structure of a GUI faster and to use it more easily.

Animations as brand ambassadors

There are countless varieties of animations. Just for example, how an element is "retracted" from bottom to top.

In order to be able to make a decision on the correct animation pattern, the following question should be in the foreground: What do I want to convey and how should users perceive the brand?

As an example: A banking app should avoid a springy animation like in "C". Such animations are increasingly used in video games and would not inspire confidence in a bank.

Animations to shorten waiting times

The human brain perceives processes lasting less than 0.1 seconds as immediate. Processes under 1 second are classified as smooth or seamless.

Assume that a process (e.g. loading process) lasts 6 seconds: an animation divided into different steps can reduce the perceived process duration from the user's point of view. Additionally, the user is bound to the interface during the process.

Conclusion

Animations can be helpful to provide the user with a good user experience. Nevertheless, there are some stumbling blocks that are ideally removed iteratively.

This includes prototyping and continuous testing. Because as it is often the case: animations can bring the additional WOW effect if they are suitable and well implemented. If not, they can also be annoying and, in the worst case, limit the user's use.