Designing Animations to Convert, Not Distract

Author Avatar
Written by Digital Surgeons,
• 7 min read

Web based animation design hasn’t hit its stride yet. It might be because design teams fear falling into the same pit that Flash designers did when the ‘Flashless’ mobile web became the norm.

It’s a much safer business decision to design static compositions and build them quickly to see how your users will use it. This serves as a starting point for incremental improvement and allows you to shy away from all of the unknowns that come from adding animation to your website.

But you’ll hit a point when your audiences are ready to interact with your content in more meaningful and engaging ways than they do now.

Our aim is to help you realize that by adding animation in key places in your user journey, you can strengthen your user’s memory of your brand.

Believing what you see.

The fundamentals of objective-based motion design, rooted in advances in neuroscience and behavior tracking, rely on the nonverbal cues that trigger action in a user’s personality. Put more plainly, it allows us to better understand what will both be memorable and inspire action from the end user.

It’s like fishing. Different fish want different things on different days. Some days they might strike a red lure, others they might want one with ball bearings. If you just randomly grab a lure, cast it into the water, and reel it back as fast as you can, you’ll get frustrated that you’re not catching any fish — you’ll come to the incorrect conclusion that your lure is junk. But if you know a little about fish behavior, you can work out why the fish isn’t biting, and select the right bait.

Building Your Tackle Box

The fundamentals of objective motion-based design let us know the lure to use that will attract the type of fish (user) we’d like to catch (get to click through).  

As a creative technologist, and motion designer, I’m always searching for ways to create more meaningful connections between people and technology. Everyone knows we rely heavily on our sense of sight. We’ve been using our eyes since birth, and it pays off because of its efficiency in informing us about the context of our experience.

This is illustrated nicely in the findings of an eye tracking study performed by The National Center for Biotechnology Information. They aimed at discovering patterns in eye movement of subjects looking at a variety of compelling works of art. What they found points to a major tenant of our visual cortex — contextual awareness.

We are surprisingly good at detecting where one object ends and another begins. This gives us a great deal information that we use to navigate and plan our next action. Our eyes are drawn to the greatest differences in contexts between objects. The reason why commercials like Puppy Monkey Baby, Inside Inside Inside James Harden's head and Skittles: “The Portrait” are so memorable is because our brains are being tasked with contextualizing something bizarre with no frame of reference to pull from. Those are extreme cases that I believe are part of a fad, but they shouldn’t be taken for granted. Building memorable experiences is very valuable.

By better understanding how our brains are drawn to changes in context, we can design animations that allow a user to navigate from context to context with less confusion so they can more easily achieve their goals.

Use Animation to Bridge Contexts

Being conscious is a lot of work. Your user’s brains are given a lot of information to process aside from your content, it must also simultaneously sort information based on its potential risk to their safety. Your users are hardwired to place the highest priority on danger, and the second highest priority on favorable opportunities. With animation, you can provoke the innate cognitive process of taking action.

The Cheshire Cat Illusion is an optical illusion that demonstrates how motion overrides other processing in your brain. You present 2 different scenes to your brain. One from each eye. I recommend using a hand mirror over your left eye so you see the wall to your left. You’ll start out seeing both things ghosted on top of one another with neither taking priority. But when there is a conflict of priority from each eye a binocular rivalry occurs. This is best illustrated by moving your free hand so you see it in the mirror, your brain will focus on the motion of your hand and your right eye will disappear.

Your brain is being forced to focus on what's moving in order to determine its purpose. We can use that.

Be a Tour Guide from Place to Place

Think of instances in a user’s flow where users are moving from one layout to another layout. This happens when you open a modal, expand a navigation element, submit a contact form, and a myriad of other actions that require a subsequent interface to complete your goal. At these points there is distinctive contrasts between contexts. Animation can be used to help your users carry knowledge. In her recent screencast covering animated modal conventions, Val Head shows us how Pinterest uses animation in their user experience to attach the images being shared with the user who is saving them.

Every time you animate an object on screen, it says something. It’s human nature to assign meaning to why something is moving based on our experience with real-world physics or by anthropomorphizing the objects that are animating. Good UI animation takes advantage of that opportunity to communicate something meaningful, not leaving it up to chance or software defaults.

– Val Head

How You Guide Says a Lot About Your Brand Experience

Animation is simply an incremental change in property over time. Though simple, the resulting variations are vast. To describe how each property increments over the length of the animation we use the term easing. Easing defines how quickly an object accelerates or decelerates from start to finish. Each type of easing gives a different feel to the animation.

In the 1930's Disney animators Frank Thomas and Ollie Johnston determined there were 12 principles that governed how people saw animations. To great success Disney implemented the 12 Principles of Life into their motion pictures to give characters unique personalities, and to build magical worlds that people hadn’t ever imagined before.

The 12 Principles of Life gave animators a vocabulary for taking a written script and turning it into a hand-drawn movie. Cento Lodigiani, an Italian graphic designer, explains them most simply.

Animation in Practice

Tools that decrease the time it takes to create multi-platform animations are maturing. With more animators being put to work be prepared for a shift in how audiences are engaged.

As part of our DS Boilerplate we’ve developed a suite of SASS mixins for distilling collections of easing and timing properties into common terms that our designers can use to describe the feeling they imagine their design to exhibit, account managers can use to relay client feedback to the team, and for the developers to build upon.  

Animation conveys weight, strength, certainty, coordination, and context between elements and interfaces. It brings cohesiveness to the user’s experience and gets your users to their goal in an elegant and polite manner.

Before you plop animation on your content, take the opportunity to strengthen your brand’s image by designing objective-based animations.

If you'd like more information on how motion design can unlock additional value for your digital experiences let's talk.