Principles of UX in Motion

In 1981 two Disney animators, Ollie Johnston and Frank Thomas proposed that all animation consists of basic principles. These principles adhere to the laws of physics and serve as guidelines to create realistic movement.

These principles are not just applicable to Cinderella but have excellent value when applied to user experiences and design as long as we keep the physics in mind.

The principle of easing explains objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

Offset and Delay is the second of only two UX in Motion Principles that is influenced by Disney’s Animation Principles. 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.

Parenting is a powerful Principles that relates objects in the user interface. In the above example, the scale and position property of the top or child object is parented to the position property of the bottom or parent object. Parenting is the linking of object properties to other object properties.

Transformation is the most discernible, largely because it stands out. A submit button changing shape to become a redial progress bar and finally changing shape again to become a confirmation check mark is something that we notice. It grabs out attention, tells a story, and has completion.

Value Change explains the text based interface objects, that numbers and text can change 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 asses their role in supporting usability.

Finally, Masking can be thought of as a relationship between the shape of the object and its utility. Because designers are familiar with masking in the context of static design, it behooves us to bring distinction to the UX in Motion Principle Masking as it occurs in time, as an act, and not as a state.