Animation is a powerful tool in UX design, and it’s now possible to create amazing animations on pretty much any platform and device. Auto-Animate in Adobe XD, for example, enables you to create prototypes with immersive animated transitions, which you can now also preview in the browser.
“Animation has the ability to convey a deeper meaning than imagery and text alone,” emphasizes interactive motion designer Chris Gannon. “It can convey subtle emotions and feelings that words alone cannot. In user interface motion design, animated elements can clarify actions and tasks by leading the eye to a specific place, confirming user input or reinforcing an action with an appropriate reaction. In short, when used with discipline, animation can be a very powerful visual language.”
However, as Chris points out, with great power comes great responsibility, and this is especially true when it comes to designing animation. So we invited Chris along with a few other animation experts to share some of the biggest mistakes people make when they use animation. They also offer some practical tips to help you avoid those mistakes and improve the user experience and HCI instead.
Don’t animate all the things
Chris cautions that less is more. Just because you can animate something doesn’t mean you should.
“Animation should be used functionally and with restraint in UI motion design,” he advises. “Yes, it can — and often should — be aesthetically wonderful, quirky, whimsical, funny, and all the other things that resonate with humans, but if the underlying meaning is lost because too many things are moving, then it just becomes confusing and creates cognitive overload.”
“We as motion designers should resist the desire to show off — uhm, guilty! — and instead aim to be clear and concise in our execution, so that our animations support and complement the interface and are easy to understand. Your audience will thank you for it.”
A clear, uncomplicated, linear journey, as in this ‘Add to gallery’ animation by Chris Gannon, gently guides the eye to the intended target.Don’t forget the beauty of easing
One of the most telltale mistakes Val Head, design advocate at Adobe and author of “Designing Interface Animation,“ sees designers newer to animation make is forgetting to pay attention to easing.
“Easing is what makes an animated object change speed over the course of an animation,” she explains. “It’s also a big influence on how successful your animation will be. In the real world objects accelerate into their motion and slow down before coming to a stop. Even on screen, animations that follow this general pattern often feel odd or even look a bit wrong. Paying attention to the easing you’re using for your animation can fix this.”
For example, Val recommends using an ease-out for objects entering into view. It will have them slow down before they come to a stop in their final position, which will look much more realistic than linear easing where there is no slowing down, and the object stops abruptly:
“The inverse holds true for objects leaving the screen,” Val advises. “An ease-in easing will have the object accelerate into its action, just like an object in real life might.”
When moving an object from point to point, Val suggests an ease-in-out curve, as it causes the object to both accelerate into the movement as well as slow down before coming to a stop.
“To take your animation skills one step even further, I highly recommend customizing your easing curves instead of just using the default ease-in, ease-in-out, and ease-out that comes with your tool of choice. If you’re working with CSS, cubic-bezier.com is a great place to explore custom easing curves. “
Keep the stagger interval to a minimum
When animating a collection of items, whether they’re entering or exiting, a common pattern is to use a stagger effect to animate the items in sequence. Commonly, however, the interval between each animation is too long, finds David Khourshid, a software engineer at Microsoft.
“It’s as if the animator is saying ‘Here’s this one, then this one, then this one’,” he warns. “When animating a collection of items, the stagger interval — so the delay between each animation — should be kept to a minimum. This can even be as low as 50 to 100 milliseconds — trust me, the effect will be seen! When a long interval is used, each animation feels distinct, which goes against the feeling of the entire collection being animated as a single unit.”
David also cautions that not using any stagger interval can make an animation feel non-intuitive, as if the collection of items are really a consolidated single item. In general, he recommends animating collections with a small stagger interval between each animation; one that is a fraction of the actual stagger duration. “Your animated items will feel cohesive, fluid, and lively as a result,” David explains.
In this CodePen example, the “bad” animation has each item in a collection appearing directly after each other, so the stagger interval is equal to the duration of the item animation. In the “good” animation, the stagger interval is a fraction of that duration, which produces a more efficient animation.
Ensure your animations aren’t incongruous with your brand identity
“One of the greatest feelings you can have when designing for the web is crafting an animation that just feels good,” admits Eli Fitch, a front-end developer with a passion for animations. “Something that makes your friends and family say ‘ooooh.’ But what if this feeling is a trap?”
“I’ve found myself creating animations that are always aiming for ‘wow,’ even when it doesn’t fit the situation or brand,” Eli explains. “I love hot pink, it’s my favorite color, and sometimes it makes people say ‘wow,’ but I know that hot pink isn’t good for every situation. Animation is different. Trickier. Most brands don’t have animation guidelines, so it can be hard to know what ‘fits’ a brand and what doesn’t, and easy to create a motion identity that doesn’t match the static identity.”
Eli mentions Dropbox Paper as a good example that hasn’t fallen into this trap: “Paper is positioned as a clean, modern editing tool with a touch of whimsy and playfulness. After all, just look at some of its custom reaction stickers!”
Eli also explains that a touch of follow-through in its menu animations underscores that winking sense of fun by creating a subtle bouncy effect. It doesn’t get in the way, and allows the focus to remain on the more serious business of editing a document.
For actions that carry more importance, like copying a link to share with others, the animation has commensurately more weight, Eli points out.
“It feels heavier because the follow-through is more generous, as if the element is heavier, moving faster, and has more energy to contain. This animation perfectly matches both the brand’s identity and the user’s action.”
Don’t just assume your animations are going to behave the same on any device
A common mistake is to create animations with the assumption that they are going to behave in a similar manner on any device, finds Anna Migas, a front-end developer and designer at Lunar Logic in Poland.
“The truth is the quality of the devices that are used by developers varies a lot from what you can expect of a typical user,” she warns. “It’s hard to imagine that our beautiful animation can be a bottleneck for someone, not an enhancement. But it’s crucial to test an animation in different conditions. The easiest way to is to enable CPU throttling in the browser devtools and run our animation again.”
To ensure a smooth experience, Anna recommends trying not to create animations that force layout reflows. They are costly operations, as the browser needs to recalculate the positions and sizes of elements that are affected. To avoid reflows, Anna suggests sticking to animating two properties: “transform” and “opacity.”
Animation debugging in practice using Developer Tools in Chrome: Layers panel and FPS meter.“You might also want to give a hint to the browser that the animation will take place in advance. To do so, use a ‘will-change’ CSS property. Remember to not overuse it, as each ‘will-change’ hint takes a bit of CPU usage,” Anna says, agreeing with Chris Gannon. “Animating too many elements is never a good idea, even if your are using only ‘opacity’ or ‘transform’ properties. The more elements are moving, the more it overloads the browser.”
When animating with JavaScript, Anna also recommends making sure to take advantage of the “requestAnimationFrame()” function.
“Some frameworks will have it enabled by default, so you should check that upfront. The function makes sure that we are serving animation frames in sync with the browser refresh rate and saves it unnecessary work.”
So, the next time you’re working on a UI animation, keep in mind that less is more and that easing and stagger intervals can help you to create realistic and intuitive effects. Also, don’t get carried away, and ensure your animation matches the brand’s identity. Finally, test, test, and test again, because your animation might not look the same in every browser or on every device and might perform slower than you might think.