Have you ever wondered why designers add animation to the interface? It is certainly beautiful, sometimes even spectacular. It seems a priori correct and logical to add animation everywhere because this is the strongest trend over the past couple of years. But how does animation improve the experience, how functional, justified, necessary is it? How to understand if it can really improve the interface in terms of user experience? Let’s look at how to make animation more than just a beautiful design element.
Ordinary UI animation makes the user experience just beautiful and doesn’t add any value to it. Therefore, UI motion is usually considered only as part of UX.
Here are just some of the examples where UX animation is used in the application:
- swipe
- data entry into the system
- display of the current system status
- CTA button
- a gallery with photos — scroll by image/category
- a transition between menu items
- interactions during registration/entrance to your personal account/checkout/payment
In general, the animation can be very different. Its quality and role in UX are influenced by many indicators.
THE CORRECT SPEED
The frame rate is the number of frames per second of animation. The human eye requires at least 24 frames per second to perceive it as a smooth movement. The frame rate of CSS animations largely depends on the speed of the browser and device. Why is it important?
Time is a determining factor for the quality of animation. Each real object takes a certain amount of time to complete an action. The pace determines the speed at which the movement occurs. If the animation is too slow, the user may get tired of it. If too fast, he won’t have time to follow it. In both cases, the animation is perceived negatively by the eye.
The correctly selected frame rate helps users to monitor interface changes. And while not complicating the task, but rather simplify them. The animation should be fast enough so as not to get bored, but slow enough so that the user has time to catch his eye on the details and be aware of the changes.
User-friendly interface animation speed is from 200 to 500 ms. These data are based on the physiological qualities of our brain. Any animation shorter than 100 ms is instant. Most likely, it will not be perceived by the brain at all.
RESPONSIVENESS
Truly functional animations should be responsive. Visual feedback is very important to the user. The interface must quickly respond to his actions strictly in the place where he initiates them. At the same time, it shows the connection between the new areas and the action that created these areas. The user should know exactly what is happening. As an example, when you click on the menu, the window with the positions gradually unfolds from the corner from the burger, as if making a connection between them. And the user clearly understands what action caused this result.
RESISTANCE
Resistance in the physical world is the result of the action of natural forces when an object moves in space and time. And it is used in UX design quite often.
A great example is 3D Touch technology, where the interface practically “resists” the action until you press hard enough. This resistance is demonstrated by animation, while the icon stands out stronger or weaker depending on the pressure you exert.
In many applications, there is such a pull-to-refresh action. The user has to pull the interface down to get the latest content, and this is a great example of resistance. He needs to pull with some resistance until he reaches the threshold when the page reloads. This is a nice example when animation directly improves UX.
REAL-TIME AND NON-REAL-TIME INTERACTIONS
User interactions happen in real and non-real-time. Real-time — the user interacts directly with objects in the user interface. In this case, the animation will be displayed in parallel with the action. Non-real-time — the object’s behavior is post-interactive. That is, the animation is displayed after the user’s action and is transitional. In the first case, the behavior of the interface fully reflects the actions of the user. Interaction in non-real-time occurs only after a specific user choice and has the effect of a short exclusion of a user from UX until the transition is completed.
State in UX is something permanent. An action is something temporary based on movement. Any object can be in a certain state or perform a certain action.
High-quality animation should show the user the difference between these states — this is its most important task as a UX element.
ASSOCIATIVITY
A suitable example here is switchable buttons, moving one into another. This emphasizes the connection between two related actions — on/off, pause/play, expand/collapse, and more. In this case, the animated transition of these two states should be made very smooth and inextricable.
NATURALNESS
A good UX animation looks natural. It is necessary to observe the laws of physics that are relevant in the real world and not create unrealistic movements. Mostly it’s worth remembering that the start and end of an element’s movement in the user interface should not occur instantly.
The animation should direct the user’s attention in the right direction. Control his gaze, eye movement. Good animation helps to navigate the interface, even if this is the first visit to the application. When entering the new interface for the first time, the user should immediately understand what actions can be performed and their causal relationships. This is the meaning of the presence of animation in UX — otherwise, it is simply not needed.
In animation, the quality will always be more important than quantity. Therefore, it is better to leave fewer animation elements, but as thought out as possible.
If you like this blog, visit our website too. And have positive vibes :)
