The UX Experience: Let's Talk About Animation!

Possibly the biggest secret to building user interfaces that are easy to use and a delight for those that use them, is obsessive attention to detail. We are creating an illusion, a magic trick for our users.

Photo of Darren Allen

Darren Allen

Managing Director of UX

One of the most powerful tools we have in our arsenal as UX designers is animation in our designs. So, how do we integrate animations into our website in such a way as to not adversely affect the usability of the site?

When I was first learning my way around the kitchen, it didn’t take me long to discover that garlic makes most things better. Animations are like the garlic in a UX designer’s kitchen –  great to use, but best when used sparingly. Here are some thoughts on how we think through animation.

Animations should be added last

At MCG, when we are thinking through and planning a design interface, we work towards using a well-honed process each time. We aren’t thinking of brand colors and fonts until we have the business strategy, layout and emphasis solidified. Based on our creative discussions, sketches emerge, then wireframes. Once we have the emphasis down and the flow of the site, only then do we move into the branding and design considerations. When every rung of the ladder is secure, then we layer in the animations. (It’s worth mentioning, throughout the process, we are vetting the design concepts through core members of the team, and even designers outside the immediate team. The team approach makes a strong design even stronger, before we even reach usability testing.)

We break down animations according to their purpose

While all animations are about instilling a bit of wonder and increased engagement, we tend to break down the animations we create into basic categories, based on their purpose. (Of course, some of the strongest animations have a foot hold in more than one category.)

The buckets we use are:

Something new has happened

From a usability perspective, one of the most useful tools for animations is to inform the user that something new has happened, or to explain why the screen just changed. This is part of that conversation we are having with our users to keep them up to date at all times as to what’s going on with the website or app they are using.

Animations for storytelling

Think of the large area on a home page, or major section head. Sometimes, this can be an animated video. It’s a great place to tell your story concisely and to illustrate why your product or service is better. The tricky part  is that you don’t have a lot of time before users move on.

A site that went “all in” on the animated storytelling is Olympic Story, using the power of animation to sink users into the history of the Olympics.

User-directed animations

Well-placed animations that begin their movement when a site or mobile app user performs an action go a long way to increasing engagement. The user feels in control of the environment. (In UX terms, we like to talk about “affordance”. What are the cues that allow a user to know what actions they can take? Animations help sell this illusion.) These user-directed animations can be sections of content that animate into place as the user scrolls down the page or a button that changes colors as the user hovers their mouse over it. It’s important not to overdo these to the point where they take center stage and become distracting, so know your audience. A site intended for kids, for example, can get away with a lot more animations than a healthcare journal.

A great site that uses user-directed animations to tell their story is Bellroy, Slim Your Wallet.

Whimsical

Sometimes, we like to layer in animations just to add a touch of playfulness or personality to a site. It’s worth remembering that we are people, communicating with other people. Personality, whether it be in our choice of tone in the copy we use, or in these whimsical touches of animation help us form this connection with our audience.

MCG used the whimsical approach when redesigning the website for a local non-profit, Kids Incorporated of the Big Bend. Our team created hand-drawn illustrations, and bits of animation through the site to add more personality.

Animations can be a powerful tool to help sell the interface illusion, the magic trick. Just make sure the layout and site usability are perfected first, then think about the best way to use animations to tell your story.

Fin