UI animations should be unobtrusive, fast, and smooth. Use it for feedback, navigation, and overall improvement of your application.

In UX, movement and animation can be useful and convey a message if used correctly. Animations are most often needed for discreet feedback during micro-interactions, not just as a way to entertain users.

A big advantage (and disadvantage) of UI animations is that they capture users’ attention. Our peripheral vision (in particular, through the rod-shaped photoreceptors in the human retina) is responsible for motion detection. From an evolutionary point of view, the fact that we can detect motion outside our focus of attention is of course an advantage: we can recognize danger and protect ourselves. But it also means that we also tend to be distracted by any type of movement (meaningful or not). That’s why UI animations in user interfaces can be very annoying: it’s hard to stop paying attention to them. And if animation doesn’t also make it easier to solve a task important to the user, it’s likely to significantly degrade the user experience (any website visitor will probably nod at this phrase if they’ve at least once encountered an ad moving from the edge).

While animations can be useful in grabbing a user’s attention and shaping the UI experience, you shouldn’t boron them – it’s the appealing and smooth interaction with the product that should be used first and foremost.

What role do UI animations play
Proper use of animations helps users build a mental model of how the system works and speed up interaction with it. Animations are important precisely to enhance the user experience, not just as a way to fill the time it takes to load (in fact, these are the animations that usability testers dislike the most). Rather than using animations to create a superficial impression (which deteriorates quickly), they are best used as usability improvement tools: displaying the current state of the system, indicators of UI element behavior, and as markers of the user’s current location in the system.

Motion and interaction
Animation is often useful as a form of easy feedback, as a hint that an action has been recognized by the system. A ubiquitous example is the animation of a navigation menu that pops up when a burger button (hamburger icon) is clicked. Because our visual systems are set up to catch motion, a short animation can ensure that users see the result of the button’s triggering.

Sometimes users simply don’t notice static visual feedback because they’re out of focus (change blindness), and in these cases, animations are especially useful.