With new tools like CSS Animation, JavaScript Libraries and modern browsers, we can easily add animation to our websites. Animation helps you to provide context, give feedback, convey status and delight your users. You can affect color, location, scale, shape, focus and opacity of objects. By learning the principles of animation, you can create deliberate animation that improves the user experience.
Photo by Aline Ponce from Pixabay
12 Principles of Animation
Disney animators, Ollie Johnston and Frank Thomas, first introduced the 12 Principles of Animation in their book, The Illusion of Life: Disney Animation. They examine the process of animation from Disney’s leading animations and provide you with 12 basic animation principles.
What do the 12 principles provide?
- Realism
- Context
- Causality
- Focus
- Delight
They also help to create hierarchy and relationships between objects. These principles help you to provide feedback to the user, indicate status and give instructions. One of the first uses of animation on computer screens was the flashing cursor. It tells you that you can start typing and that the computer is working and not frozen. This simple animation conveys information faster than words can.
How to Use Animation Responsibly
When you are deciding to add animation to your user interface, consider the following:
- Does it add value?
- Are your behaviors consistent?
- Is the user interface still functional without it?
- Is the animation optimized?
- Do you need it?
Using Animation to Enhance User Experience
At WordCamp Atlanta 2019, Michelle Schulp gave a talk Squash and Stretch and Good UX- Using Animation To Enhance User Experience. She gave a quick overview of the 12 Principles of Animation. Michelle explains the uses of animation and how to use animation responsibly.