UI animation rules
One of my friends told me that he doesn’t like UI animation at all. After a short usability test, I found out that he doesn’t notice most of the animation in mobile apps. Conspicuous animation attracts attention and distracts from performing a task. This kind of animation is annoying.
How to design UI animation and not cause negativity among users 👇
Follow patterns
The best decision in designing UI animation is to follow habitual patterns. Users want the interface to meet their expectations. It makes an interaction with a program faster because, in this case, users don’t have to analyze each new screen and each new element. Users don’t have mental conflicts, and using an app is easy if expectations and reality coincide. That’s how designers create intuitive interfaces.
It concerns animation as well. Don’t reinvent the wheel. Users’ mental models already include an understanding of matching animation to the interface’s element. That’s why unusual animation distracts. Additionally, using patterns makes the design and development process faster because those animations are already supported in native components and component libraries.
Consider timing
Too-long timing is a popular error in designing animation. If the user has to wait for an animation to play, you’ve designed an inconvenient interface. Users need fast-responding programs. Don’t add aesthetics if the user’s time to complete a task increases and interaction with an interface pauses to wait.
My practical decision is to follow guidelines. Material Design has motion guides with timing. Long story short, the default duration of transition from screen to screen is 300–600 ms; appearing dialogs and medium objects is 250–400 ms; animation of small objects is 50–200 ms. Exit transitions should be shorter than enter transitions. It’s better not to design animation longer because an app or a website would be perceived as too slow.
Use easing
Animation is a way to visually connect the interface with the physical world, which is familiar to users. Designers create a similarity between the mechanical movement of an object and the animation of an interface element. You don’t see a ball, a leaf from a tree, or a car moving at a constant speed; they either speed up or slow down.
So don’t use linear interpolation because it doesn’t look like “real” motion. Linear interpolation seems like an obvious choice, but it actually creates an artificial effect in the animation. Default ease-in and ease-out interpolations are enough for animation tasks in the interface. Ease-out is used for enter transitions, and ease-in is used for exit.
Analyze the goal
Before designing animation, think about why you need it. Analyze the goal of animation. Maybe you want to emphasize relationships between screens, suggest gestures, or give feedback on an interaction. Design depends on the goal of an animation.
It’s better to design animation that is typical and not conspicuous. But sometimes you can break the rules if it helps to achieve the goal. You may not use usual patterns to attract the user’s attention to the interface element. After all, the designer controls the user’s attention, and animation is a tool.
