Six Principles of Using Animation in UX Design

Illustration: Justin Cheong.

Graphic Design has the spatial principle of the Golden Section; photography has the framing principle of the rule of thirds – but what about an animation equivalent to these foundational principles? Sure, we have twelve tenets from “The Illusion of Life Disney Animation,” but since these were published almost 40 years ago, we’ve had the advent of the internet, cell phones, and a ubiquitous presence of motion design. All of this has created a very different animation landscape in our modern interactive screen-based world.

The key difference is that classic animation is crafted with a linear storyline to be passively experienced by the user. As UX motion designers today, we are making interactive choose-your-own-ending-type stories that users will interact with in vastly different ways. With so many factors, it may seem nearly impossible to nail down universal animation principles everyone can get behind.

Val Head is an animation expert, a design evangelist for Adobe, and author of “Designing Interface Animation.” We spoke with her in her studio in Pittsburgh to find out more about her basic design principles for creating an outstanding user experience with animation. For more in depth information about each principle, be sure to watch the corresponding videos.

Val stressed that these are not the only principles of animation design, rather, “They’re a nice shortcut if you don’t know a lot about motion design. Just keep these six things in mind and you’ll be doing better than ninety percent of your friends.”

Timing: Keep it quick, but not too quick

Nobody likes to wait. Timing is about keeping the duration of your animation quick, but not too quick. So, how do you know if your animation is too fast or too slow? If an animation is too short, it looks broken and doesn’t give the user enough time to visually absorb the information. In this video, the menu slide animation takes 300ms, which feels responsive and natural without making the user wait.

According to Val, “The best way to know you’ve got a good duration is to try it out and see how it feels.” To test out how her timing feels she makes lots of prototypes. For rapid prototyping Val uses Adobe XD and the Auto-Animate feature, which “make it a lot easier to prototype ideas and interactions earlier on to check if they make sense and feel right.”

Easing: Organic motion

Even though we are designing a screen-based experience, it’s important to borrow heavily from the real world so your UI animation appears familiar and logical. To accomplish this, utilize the physical principles of the real world in your digital animations, such as gravity, momentum, and velocity.

The motion principle of Easing describes how the speed of your animation changes over the course of its duration. In the video above, we see the purple square easing in slowly, speeding up, and then slowing down – it’s similar to how you might walk from one end of the room to the other. Conversely, with some animations, the speed does not change at all which can often seem foreign and robotic to the user. In order to craft motion designs with an organic feel, think of Newton’s apple falling from the tree and how it sped up as it fell.

Spatial Orientation: Continuity

Animation is a great way to physically explain where things are in virtual space even when users can’t see them. It’s like when someone walks into another room, you know they’re there even though you can’t see them.

As you’ll see in the video above, when the user clicks a button, the screen doesn’t disappear but rather it slides up or down out of the frame. By animating these elements to slide up or down, the user knows they went somewhere rather than just disappearing.

Spatial orientation is especially useful for establishing where UI elements are in space across various screen types and sizes. To avoid user fatigue and confusion, Val suggests keeping animations for spatial orientation extremely simple.

Directing Focus: Hierarchy

Of all the available design tools at our disposal – such as color, type, and layout – animation is the one that talks with its outside voice. Its moving and shaking helps it rise to the top of the hierarchy of your designs, which means we need to use it carefully by directing users to content they actually care about.

This video above features a small but mighty arrow animation to let the user know their podcast is done downloading. In other cases, micro-interactions can be used for more important jobs like reminding the user to save their precious work or to finish completing a form before their time runs out. In all of these cases, animation can be used as another design tool to create hierarchy and a great user experience.

Visual Continuity: Screen transitions

Have you ever been watching a film or show and in one shot a character is holding a coffee cup and then after a cut to another shot it’s gone? This is commonly known as a continuity error. These can unintentionally happen in motion design as well, especially when transitioning from one screen to the next. Just as directors must maintain narrative flow when they cut to a different shot, we as designers need to keep track of all of the elements on our screens when we transition to a new screen.

Val says, “When it comes to screen transitions, we often default to removing everything just to bring it back again on the next screen.” Instead, let interface objects behave like real objects and stay in place between transitions instead of clearing the screen.

Clarity: Simple and clear movements

Inadvertently sloppy motion design can happen when multiple elements are moving all at once without consideration for their purpose, relationship to one another, and the potential ways you could keep it simple. “A rule I like to use for myself is always know the intended purpose of any given interface animation. If I can’t explain the purpose, that’s a sign I could probably do without it.”

In this video above, we see a few of Val’s tips for crafting simple and clear movements such as staggering the entrance and exit, overlapping action rather than animating all at once, and keeping it pleasantly brisk.

Val stresses the importance of keeping animation projects fun, experimental, and exciting – she recommends new motion designers use Adobe XD to get more comfortable with animation. “What I love about Auto-Animate is seeing what people post. Even if it’s something silly they made – they still made that!”

So why not try creating a quick animation prototype today, keep it light and playful, and see where it takes you.

For more UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.