12 Principles of Motion Design
Motion is a powerful tool that can be used to apply key UX design principles, such as desirability and usability, to product designs. For centuries, people have instinctively paid attention to moving objects, and in the modern world, designers use animation to capture users' attention with movement.
Animation in apps can serve different functions, such as enhancing your brand identity with your own animation style. More importantly, motion and animation can function as a form of subtle feedback for microinteractions, such as a navigation menu that slides over when a hamburger icon is tapped.[1]
However, creating beautiful and natural animations is not easy. In 1981, animators Ollie Johnston and Frank Thomas released a book called "The Illusion of Life: Disney Animation," where they introduced Disney's 12 principles of animation. These principles have stood the test of time and are still relevant for UI animation.[2] By applying these principles in design, you can use motion to create a more desirable and usable product.[3]
Nothing in the world around us moves at a consistent speed. For example, when an apple falls from a tree, its speed increases with time because of how gravity works. To create such natural
The principle of offset and delay defines the relationship between elements and hierarchy. In the correct example, we can see that the elements appear one by one, which creates the impression that these elements are part of a whole.
Designers can use offset and delay to define elements' roles and importance. For example, if you're animating a card appearing on screen, set the
Together with offset and delay, parenting helps define relationships between elements. Parenting links one object's properties to another object, establishing a direct connection. In the example, the child element's size and position depend on the parent's position.
As users interact with a parent element, their child elements should move accordingly. For example, when users swipe through an image carousel,
Have you ever watched mesmerizing time-lapses of caterpillars transforming into beautiful butterflies? A similar type of transformation exists in
A common example is a variation of the Submit button. You have probably seen
The change of numbers as the progress indicator loads is called a value change. The change indicates to users that something is happening behind the scenes — an important piece of feedback that lets them know their actions have had an effect.
Progress loaders aren't the only instance where value change is useful. For a real-life example, think of a
Loaders and transitions are examples of non-real-time interactions. Users observe the dynamic of value change, but it happens after their input.
Pro Tip! Adding value change to dashboard elements improves user experience.
Masking is the process of revealing or hiding an object based on another shape. It establishes a relationship between an object and its utility.
Most designers are familiar with the masking tool. It's usually used for static objects like avatars, but this technique finds its application in
We encounter overlays in mobile design all the time. It allows us to place one layer over another, changing the value of both. The layered design increases spatial hierarchy, communicates depth, and is more intuitive to users.
A common use case for overlays is the secondary options of Archive or Delete in apps like Gmail and Whatsapp on swipe.
We're sure you know what cloning is in biology. Cloning in UI is similar — it's the natural creation of new objects from existing ones.
Designers actively use cloning to save up some space. For example, the Google calendar app contains a FAB
Obscuration is the process of partially hiding a layer to focus attention on another one. Obscuration is similar to overlay as it involves temporarily hiding the
Designers often use obscuration in confirmation dialogs,
Parallax is a
As users scroll, slower-moving elements appear further away. Humans perceive farther objects as less relevant, so you can set secondary elements like the background to move slower. Faster moving elements grab our attention and seem important. That's why designers set elements with a higher priority, like text,
Dimensionality is another way to animate how elements appear and disappear by creating an illusion of depth. It makes
The principle of dolly & zoom comes from cinematography, where this effect is used to create unusual visual perception. It's achieved by doing 2 things at the same time:
- Dollying or changing the distance between the camera and subject. Think of a photographer approaching an element to take a more detailed shot.
- Zooming or scaling an
image artificially. Think of a photographer using the camera’s zoom feature to enlarge certain elements.
Designers often use this principle to create a close-up on an image or change the perspective and show the image from another angle.
References
- The Role of Animation and Motion in UX | Nielsen Norman Group
- A Guide to Motion Design Principles | Toptal Design Blog