UI Animation Principles: Disney is Dead
(If you want to receive my articles on UI animation via email and get added to my newsletter, click here.)
A new medium
When Paul Delaroche encountered a Daguerreotype sometime around 1839, he famously declared,“From today, painting is dead!”
Up until that time, the only way to visually document the external world was through the use of a medium applied to a surface by hand. Centuries of craftsmanship across various disciplines had resulted in the discovery of numerous principles and techniques across various media. Across cultures, and as the eras progressed, the style and visual language of how visual representations ‘should look’ evolved — the original design patterns.
Early photographers, attempting to make their images resemble the popular paintings of the day, often used a combination of lighting and printing techniques to soften their images and create a painterly look. Their understanding of what the medium of photography was capable of, was intimately linked, influenced, and limited by their understanding of the world of painting.
It took almost a hundred years before photographers like Ansel Adams, Imogen Cunningham, Edward Weston, and others in the ‘Group f/64’ made significant inroads into the visual language that sets photography apart from painting as a unique medium — with it’s own visual language and principles, and in doing so, they revolutionized the domain of photography.
Disney solved a different problem
Happily, we find ourselves at such a revolution in UI animation.
In 1981 Ollie Johnston and Frank Thomas released Disney Animation: the Illusion of Life, and introduced what are now known as the ‘12 basic principles of animation.’ These principles solved the problem of how to create ‘realistic motion’ that occurs when organic bodies move and react in physical space (the principles also cover things like emotional timing and character appeal).
UI animation, as part of the user experience is barely 20 years old and still in it’s infancy. As the domain of UI animation emerged, the only tools available to describe how the user interface behaves in time were the 12 animation principles. Much like how early photographers attempted to understand photography through the rules of painting, designers attempted to understand UI animation through the rules of Disney animation.
On the surface, this is understandable as there is some degree of overlap. Eased motion, one of the 12 animation principles, reinforces a sense of ‘rightness’ through motion, something which is critical to the user experience. Without easing, the UI animation feels clunky and weird.
The full breakdown is apparent when one takes a closer look at the 12 principles in the context of the user interface.
Squash and Stretch gives a weight and flexibility to objects, something that is the exception rather than the rule in user interfaces.
Anticipation creates the sense that something is about to happen and is also nearly useless when it comes to user experiences. It works in only a limited way for select micro interactions and button states.
Staging refers to the layout of the animation, which makes sense for a Disney cartoon because the characters are constantly in motion, but in a user experience, this is just thought of as ‘the design.’
Straight Ahead Action and Pose to Pose are less principles than approaches to the actual drawing/animation process: you can create a more fluid animation if you draw continuous frames, or use pose to pose to set up a few key frames and fill in the gaps. In user experiences, this process hardly even translates, unless there is actual frame by frame animation happening. By default, irregardless of the tool you’re using, nearly all UI animation is created using keyframes.
Follow Through and Overlapping Action has to do with following the laws of physics and inertia, and how physical bodies respond, both of which have little to do with user interfaces, unless you count on the next principle, which is the most useful in the group.
Slow In and Slow Out says that objects need time to speed up and slow down. This is extremely relevant as 100% of UI animation should employ this principle. It is commonly referred to as ‘easing,’ and is extremely important.
Arc (required for reproducing physical motion) is nearly useless for UI animation, and is also the exception rather than the rule.
Secondary Action is useful and is great for screen transitions and setting up visual hierarchy.
Timing is relevant when drawing characters, but in user interfaces, where the motion needs to be crisp in order to feel responsive, I find it better to rely on easing to design the feel of the interaction, rather the duration.
Exaggeration relates to the degree of realism or caricature, again, hardly relevant to UI animation, as the design is pre-determined.
Solid drawing is likewise mostly moot as UI animation deals with the behavior of interface objects over time, not the actual design of the objects themselves.
Appeal also speaks to the visual treatment, again not relevant to how the interface behaves over time.
In conclusion
So the question remains: why don’t the 12 basic principles of animation accurately describe UI animation?
The breakdown can be best understood by the simple observation: UI animation does not obey the same rules nor have the same principles as organic bodies moving in physical space. UI animation is a distinct medium, as distinct as photography is from painting — with overlapping characteristics (both photography and painting are static visual compositions relying on light and composition) but are fundamentally different mediums.
Simply stated, the 12 basic principles of animation do not apply to UI animation because they are solving for a different problem.
Over the next several articles, I will explore what these UI animation principle are, what problem UI animation principles solve for, how principles are different from techniques, and how you can design and use UI animation in your current and future projects to impact usability and create more compelling and effective user experiences.
