Motion principles
Animations can be utilized to provide feedback, add delight, and educate users. When considering adding animations to a product, consider these guiding principles.
Principles
Experience principles
Helpful
Animations are used sparingly, and only when there is a clear, intentional reason for them.
They help a user complete a task or learn new information, and should not distract the user for accomplishing a goal.
Every animation should serve a purpose and not be added simply for the sake of having animation.
They help a user complete a task or learn new information, and should not distract the user for accomplishing a goal.
Every animation should serve a purpose and not be added simply for the sake of having animation.
Focused
Animations only last as long as needed to help guide the user.
They are directed toward specific elements and follow a logical progression based on the purpose or location of those elements.
They are perhaps even unnoticed because they feel natural and expected.
They are directed toward specific elements and follow a logical progression based on the purpose or location of those elements.
They are perhaps even unnoticed because they feel natural and expected.
Accessible
Animations must be designed and implemented to consider people with disabilities, ensuring they do not cause the user any harm.
Most of the time this means respecting a user’s device motion settings and disabling any animations when “use reduced motion” is turned on.
Most of the time this means respecting a user’s device motion settings and disabling any animations when “use reduced motion” is turned on.
Visual principles
Soft
Transitions should be gentle and elegant, the appearance of elements and modals convey a feeling of pillow tenderness
Bouncy
Bouncy brings delightful touch and sparks almost childlike curiosity to dive into exploring ideas right away.
Playful use of color, as in this case use of animated gradient not only brings attention to the element but also can serve an educational purpose for users to interact with new features.
Playful use of color, as in this case use of animated gradient not only brings attention to the element but also can serve an educational purpose for users to interact with new features.
Physical
Real means authentic, real means inspired by nature, and in some cases real means literal and that’s how real became physical in motion.
Slight change in size to bring tactile feeling to UI or digital slider to keep score of pins on the board are our explorations around real attributes.
Slight change in size to bring tactile feeling to UI or digital slider to keep score of pins on the board are our explorations around real attributes.