Animation—after an extended hiatus related to the slow demise of Adobe Flash—is returning to Web design in a big way. Which is good news for users, so long as designers take the time to understand exactly how and why Web animation does (and sometimes doesn’t) work.
That was the message delivered by Rachel Nabors at our latest New Relic FutureTalk in Portland. An award-winning cartoonist, international speaker, and curator of Web Animation Weekly, Rachel has worked on interactive projects with companies from Adobe to Mozilla. To help Web designers “animate responsibly,” she explored the effects of animation on the brain, described the four main types of animation at designers’ disposal, and offered insights regarding animation best practices.
Lighten the cognitive load
“You can’t study animation,” Rachel said, “without studying how people’s brains work with it.” Accordingly, she asked the audience to think of the brain’s visual cortex as its very own GPU. The use of old-school jump cuts—when one image or state instantaneously becomes another with no “in-betweening”—increases cognitive load. In other words, the user’s concentration is unnecessarily interrupted by the work of processing what has happened on the screen.
Animation solves that problem, Rachel explained. “By animating the transition between two states, you let the viewer’s visual cortex handle the change without interrupting their thought process.”
But what about page load speeds, which can be slowed by the use of animation? Not a problem, Rachel said: the decrease in the user’s cognitive load means they will perceive an animated page as loading faster, even when it isn’t.
Animate to enhance
So how can animation be applied to user interfaces? By considering animation as a visual representation of a rate of change over time, it can be applied to any visual property in order to indicate its solidity, direction of movement, and momentum.
But, she said, that doesn’t mean every element of a webpage should be animated. Rather, Web designers should consider the four most common types of animation available to them, and use only the ones that will enhance the user experience.
- Stateful transition, used when something new (such as a mailing list subscription form) needs to appear on a page without that page having to refresh.
- Supplemental animation, which accentuates secondary information on a page—alerts or notifications in a sidebar, for instance.
- Causal effect, exemplified by the perceived depression of a button when a user hovers their cursor over it.
- Decorative animation, which embellishes a page without contributing additional information.
Everyone loves the idea of a decorative animation, Rachel said. “But deep down inside, you know it’s wrong!”
She also warned against trusting the maxim that more “animacy” is always better. Web designers, she said, must remain alert to the fact that when too many elements of a page vie for a user’s attention, the user doesn’t know what to focus on—and may end up losing focus altogether.
Tips and best practices
Rachel went on to offer a range of best practices for using animation in Web design, including exactly what percentage of a site’s content should be animated and exactly when in the design process animations should be factored in (hint: not at the last minute). To hear her tips, learn why “animations should be like servers in a fancy restaurant,” and discover the optimum speed for Web animations, watch Rachel’s full FutureTalk in the video below:
Rachel’s presentation was one of the most popular FutureTalks we’ve ever had, and people were buzzing on Twitter about it. Read what they had to say.
Don’t miss the next FutureTalk
Join us February 8, 2016, for a presentation by Matt Ellis, founder and CEO of Cloudability. For more information about our FutureTalks series, make sure to join our Meetup group, New Relic FutureTalks PDX, and follow us on Twitter @newrelic for the latest developments and updates on upcoming events.
Note: Event dates, participants, and topics are subject to change without notice.