“When we think of motion design, the first things to come to mind might be sweeping, choreographed page transitions or elaborate data visualizations,” points out web animation ambassador Rachel Nabors, author of “Animation at Work“. “But often the most beneficial UI animation takes place on a much smaller scale.”
This is where micro-interactions come in, little design features that can make a big difference to the user experience, especially when combined with subtle web animations. Thanks to Auto-Animate and Drag Gestures, which have just arrived in Adobe XD, you can now create such micro-interactions across artboards.
In this article some of the industry’s leading web animation experts explain how micro-interactions can be used to make a large impact on HCI and how people view the quality, usefulness, and character of your site or app.
What are micro-interactions?
“Micro-interactions are contained product moments that revolve around a single use case,” explains Val Head, design advocate at Adobe and author of “Designing Interface Animation“. “They add powerful design detail that really elevates the whole experience when done well.”
Feedback through animation on Dribbble.Software developer Donovan Hutchinson, who runs cssanimation.rocks, defines a well-designed micro-interaction as “a moment that helps people achieve small tasks and reinforces their understanding of what they’ve achieved (or not achieved) through feedback.”
Micro-interactions are especially useful to reduce the user’s’ mental effort, also known as cognitive load. “We need to think about what the users want to do and how the interface design can help them get there,” advises Lisi Linhart, a creative developer who’s passionate about web animation. “One consideration could be thinking about how much the users need to rely on their memory in order to reach a certain goal. Do they need to remember information from another part of the interface, that might not be visible anymore?”
Creating feedback through animations
Micro-interactions pair well with a little animation, because, Rachel Nabors finds, small, localized changes are at risk of being missed by the user via a phenomenon known as “change blindness.”
“Increasing the animacy — or how alive something appears — can trigger the user’s visual system to register the change and pay attention to what’s happening,” Rachel explains. “The most effective way to do this is to change the form of the element, like morphing a plus sign into a check mark, or to move it. But easy does it — a little goes a long way! Too much animacy can be distracting or downright unpleasant.”
Val Head adds that micro-interactions are also most often used to show the system status and convey a little personality. More specifically, they’re things like ‘pull to refresh,’ progress indicators, icon morphs, button feedback, and other similar bits of interaction.
“Animation can help make these little moments more expressive and effective,” she explains, ”which is why animated micro-interactions are so common. For example, the animation you see when you like a tweet marks that moment as a mini-celebration with a growing heart and dot confetti. The applause animation on Medium has a similar effect, giving you continued feedback as you applaud articles to show your appreciation. The style of animation used in each of these micro-interactions fits the personality of each of these brands as well, which makes them more effective.”
Testing small animations
Donovan Hutchinson agrees but warns that micro-animations should be used carefully, due to their potentially large impact.
“When a UI changes suddenly, people might notice,” he points out. “This might happen when we introduce new content or change information. We’re wired to notice changes, and adding a little animation such as a flash, fade, or wiggling UI can make the difference between confusion and understanding.”
Donovan recommends keeping the animations short and to the point. If the animation causes someone to wait, it could be taking too long. At the same time, make sure the animation is long enough to be noticeable if your goal is to draw attention to what’s happening. Sometimes you just have to test your animations and adjust them to get things to feel right.
“Prototyping becomes especially important for micro-interactions since the best ones pack a lot of detail into a small moment,” agrees Val Head. “There’s nothing quite like trying them out to determine if they communicate their intended purpose effectively.”
Rachel Nabors, meanwhile, suggests analyzing if users notice these small animations too much in user tests. “If people are actively commenting on them — ‘oh, what a cute animation!’, it’s possible the animation is hijacking too much of the brain’s visual resources, distracting users from their flow. When you do find that sweet spot of just enough animacy, your design will feel faster and more polished.”
Micro-interactions, consistency, and cognitive load
An animated tooltip by Thomas Podgrodzki on CodePen.It’s important to keep in mind that micro-interactions tend to focus on a single purpose or task, when considering how to bring animation into play. “Make sure there aren’t multiple animations and movements happening at once, as that can distract from the goal,” Donovan Hutchinson advises.
“If we want to leverage the cognitive load of the user, it’s important to stay consistent in the way we add animations,” adds Lisi Linhart. ”It’s better to apply a few consistent rules to the interface than to have hundreds of different small interactions. If we have too many different, inconsistent animations, the users have to ask themselves why an element is animated one way the first time and another way the next, which in return would increase their mental effort.”
A good example for combining reduced mental effort with micro-interactions would be providing animated tooltips whenever the user needs further information on how to solve a specific task.
Lisi explains: “This lets the users decide themselves if they have enough information or need some further explanations, because they have forgotten some important information.”
As micro-interactions are so small, they also lend themselves to componentization in a design system or UI library, as Rachel Nabors suggests: “Users, developers, and designers alike will appreciate the expansion of an accordion or pop of a tooltip, even if they don’t consciously notice it — their visual system certainly will!”