Animation principles for UX and UI designers

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Article Index

What is animation?

Animation is a method in which individual images are combined to make them appear as if it’s a smooth singular motion. Every bit of animation you see today consists of multiple images (or a single image in multiple states), smashed together to trick the human eye.

The amount of frames within a single second of animation is called the frame rate or frames per second (FPS). The human eye requires at least 24 frames to perceive an animation as a fluid motion.

In web, for example, the frame rate of your CSS animations are largely dependent on the speed of the browser and computer. You might see an animation stutter or lag if your computer is slow and this is (often) an indication that the frame rate has dropped below 24 FPS (and that it’s time to buy that new iMac).

Gaming is another great example; where games appear laggy when your computer is unable to run it at 24 FPS — although most gamers will insist that anything under 60 FPS is laggy.

The basic physics

Timing and pacing

Timing is the amount of time or frames required for an object to move. If a ball takes 5 seconds to drop to the ground, its animated timing would be 120 frames (5 x 24 FPS).

Timing plays a huge role in creating animations that are realistic. Every real-world object takes a certain amount of time to perform an action. Although it’s not necessary to calculate the number of frames required to animate a button in an application; it could be a useful tool for determining how long that button should animate for.

Pacing, on the other hand, refers to the speed at which motion happens. If your animations are too slow, you might bore your users or cause frustration. If they are too fast, your user might lose track of where they are or what they were doing.

Appropriate transition speed helps users to follow UI changes, without complicating tasks. The shortest duration possible should be used that isn’t abrupt or jarring.
- Google Material Design

Size and weight

As we know, most objects in the real world have size and weight. These dimensions give an object what is called a center of gravity and this has an influence on how it moves and rotates.

Components also have a size and weight and this, in turn, is used to determine, for example, hierarchy. Similar to the real world, our natural go-to is to use the center of a component as its center of gravity. This is both functional and realistic. It is also possible for the center of gravity to shift as its size changes.

pic1

 

Gravity

Gravity is a naturally occurring force that pulls objects towards one another. It anchors us to the planet and is also responsible for the tides of the ocean. It’s mysterious — so I won’t pretend to know more than I've already told you other than the fact that it has a huge impact on the movement of objects.

In my view, our devices have two gravitational forces pulling at it — firstly from top to bottom on the Y-axis, and secondly into the depths of the UI on the Z-axis. Google realized very early on that our devices had depth and has built much of material design’s philosophy on what they refer to as elevation.

pic2

In a similar way, I wonder whether our tendency to drop things down is a result of our interpretation of gravity on the Y-axis. Drop-downs, select boxes, accordions — all of these components animate towards the bottom of our applications.

pic3

Resistance

It’s something we experience daily (like your reluctance to get out of bed) and is a result of forces found in nature as an object moves through space and time. Resistance could be a result of gravity, surfaces or tensions.

Resistance is used in experience design quite often. A great example is Apple’s 3D touch (RIP), where the interface almost “resists” an action until you press hard enough. This resistance is then demonstrated through animation, with the icon highlighting more or less depending on the pressure you apply.

pic4

Pull-to-refresh, where a user has to pull the UI down to show the latest content, is another great example. The user has to pull down, with some resistance (is there anti-gravity involved here?), until it reaches a certain threshold where it reloads the page.

pic5

Action and reaction

Every object persists in its state of rest or uniform motion in a straight line unless it is compelled to change that state by forces impressed on it.
- Sir Isaac Newton

Newton’s laws are surprisingly relative to UX and animation in particular. When you press a button; you expect a reaction. In a way, gravity compels you to move your mouse and the button reacts violently by displaying a hover effect.

It’s all very scientific, isn't it?

For every action, there is an equal and opposite re-action.
- Sir Isaac Newton

Newton’s third law is particularly relevant to animation within experiences and interfaces. Interfaces are reactive by nature — there’s even this library called React (or something). This is especially true when it comes to changes in data, size, color, background and more. The role of animation here is to create the visual cues necessary for letting the user know where they are and what they’re doing. When a user taps to download an image there is an expectation to see some indication of progress, failure or success.

pic6

Simply put, don’t animate things for the sake of because we naturally expect something with motion to resolve to an action.

Search

Articles - Category