Motion Principles
Motion needs to be considered as a key element in the design process, rather than an afterthought, and its use needs to be intentional to improve the user experience.
Motion design principles can be traced back in time to the advent of animation as a medium. Disney's twelve principles of animation were introduced in 1981 by Ollie Johnston and Frank Thomas in their book The Illusion of Life. While the principles outlined in the book lay a good foundation for understanding the principles of animation, the work mainly caters to character animations.
While the 12 principles of animation aren't the only essential things to learn about animation, they are a good launching point, to understand how ideas were translated from the real world to a 2D medium and how the physics and complex actions translated along with that.
UI Animations occupy a different space in our understanding of animation and motion and thus need principles that ground them within the context of their use. Issara Willenskomer's work lays the blueprint for understanding the principles of motion in UI and how to approach it. The following principles are drawn from Isarra Willenskomer's article Creating Usability with Motion: The UX in Motion Manifesto (Willenskomer, 2018).
Motion Principles
`Easing and Offset & Delay relate to timing. Parenting relates to object relationship. Transformation, Value Change, Masking, Overlay, and Cloning all relate to object continuity. Parallax relates to temporal hierarchy. Obscuration and Dimensionality both relate to spatial continuity.
Easing
Object behavior aligns with user expectations when temporal events occur.
All interface objects exhibiting temporal behavior (whether real-time or non-realtime) ease. Easing creates and reinforces the ‘naturalism’ inherent in the seamlessness of user experiences and creates a sense of continuity when objects behave as users expect them to. Incidentally, Disney refers to this as ‘Slow In and Slow Out.’
The example on the left has linear motion and looks ‘bad.’ The first example up top has eased motion and looks ‘good.’ All three above examples have the exact number of frames and occur over the same time. The only difference is in their easing.
Offset & Delay
Defines object relationships and hierarchies when introducing new elements and scenes.
Offset & Delay is the second of only two UX in Motion Principles influenced by Disney’s Animation Principles, from ‘Follow Through and Overlapping Action.’
The utility of this principle is that it pre-consciously sets the user up for success by ‘telling’ the user something about the nature of the objects in the interface. The narrative in the above reference is that the top two objects are united and the bottom object is separate. Perhaps the top two objects could be a non-interactive image and text, while the bottom object is a button.
Parenting
Creates spatial and temporal hierarchal relationships when interacting with multiple objects.
Parenting is a powerful Principle that ‘relates’ objects in the user interface. In the above example, the ‘scale’ and ‘position’ property of the bottom or ‘child’ object is parented to the ‘position’ property of the top or ‘parent’ object.
Parenting is the linking of object properties to other object properties. This creates object relationships and hierarchies in ways that support usability.
Transformation
Creates a continuous state of narrative flow when object utility changes.
In some ways, this is the most obvious and penetrable of the animation principles. Transformation is the most discernible, mainly because it stands out. What Transformation does is seamlessly transition the user through the different UX states, which eventually results in a desired outcome. The user has been drawn through these functional spaces to the ultimate destination.
Value change
Creates a dynamic and continuous narrative relationship when value subject changes.
Text based interface objects, that is to say numbers and text, can change their values. This is one of those ‘elusive obvious’ concepts. Text and number changes are so common that they pass us by without us bringing to them distinction and rigor to assess their role in supporting usability.
When value based interface objects load with no ‘value change,’ what this conveys to the user is that the numbers are static objects. They’re like painted signs displaying a speed limit of 55 mph.
Masking
Creates continuity in an interface object or object group when utility is determined by which part of the object or group is revealed or concealed.
The act of masking asking can be thought of as a relationship between the shape of the object and its utility.
Through the temporal use of revealing and concealing regions of an object, utility transitions continuously and seamlessly. This also has the effect of preserving narrative flow.
Overlay
Creates narrative and object spatial relationship in visual flatland when layered objects are location dependent.
Overlay supports usability by allowing users to utilize flatland ordering properties to overcome a lack of non-spatial hierarchies. Overlay allows designers to use motion to communicate location-dependent objects behind or in front of others in non-3D space.
Cloning
Creates continuity, relationship and narrative, when new objects originate and depart.
When new objects are created in current scenes (and from current objects), it is essential to narratively account for their appearance. There is an importance in creating a narrative framework for object origin and departure. Simple opacity fades tend not to achieve this result. Masking, Cloning, and Dimensionality are three usability-based approaches to producing strong narratives.
Obscuration
Allows users to spatially orient themselves in relation to objects or scenes not in the primary visual hierarchy.
Common techniques involve blur effects and a lessoning of overall object transparency. The user is made aware of an additional non-primary context that she is operating in — that there is another world, as it were, ‘behind’ his/her primary object hierarchy.
Obscuration allows designers to compensate for a single unified field of view, or ‘objective view,’ in user experiences.
Parallax
Creates spatial hierarchy in visual flatland when users scroll.
‘Parallax,’ as a UX in Motion Principle describes different interface objects moving at different rates.
Parallax allows user to focus on primary actions and content while maintaining design integrity. Background elements ‘recede’ perceptually and cognitively for the user during a Parallax event. Designers can use Parallax to separate out immediacy content from ambient or supportive content.
Dimensionality
Provides a spatial narrative framework when new objects originate and depart.
Critical to user experiences is the phenomenon of continuity and the sense of location. Dimensionality provides a powerful way to overcome the flatland non-logic of User Experiences.
Additionally, the Dimensionality Principle overcomes the layering paradox in visual flatland wherein objects lacking depth exist on the same plane but occur as ‘in front of’ or ‘behind’ other objects.
Last updated
