Motion in Design
Motion is the subtle force that brings an interface to life. In our design system, we harness motion to clarify functionality, guide users, and create smooth and delightful interactions.
Purposeful Motion
Motion serves a greater purpose than mere aesthetics. It's a storytelling device that directs focus and maintains continuity throughout the user experience.
...
Avoid motion that distracts or confuses, ensuring that every movement has a clear and beneficial role.
Responsive Motion
Responsiveness in motion design means feedback and interaction that feels immediate and direct, mirroring the natural dynamics of the physical world.
...
Prevent laggy or slow transitions that make the interface feel sluggish and unresponsive.
Snappy Transitions
Transitions should be quick to keep up with the user's pace, ensuring a fluid experience without unnecessary delays.
...
Do not let transition animations linger longer than necessary, which can impede the user's workflow.
Thoughtful Animations
Animations are the heart of a dynamic interface, used to highlight changes and support the storytelling within the user journey.
...
Avoid over-animated features that can overwhelm or mislead the user's understanding of the interface.
Timing and Easing
The essence of a good animation lies not just in its visual appeal but in its timing and the natural flow it emulates.
...
Shun timings that conflict with the user's expectations or that disrupt the flow of interaction.
Feedback through Motion
Every motion should provide feedback or suggest a result of an interaction, aiding the user in understanding their influence on the interface.
...
Avoid using motion that doesn't correspond to or contradicts the user's action, which can lead to confusion.
Navigational Motion
Motion can guide users, enhancing the navigation experience by providing visual cues that map out the journey within the interface.
...
Refrain from implementing motion that disrupts the navigational flow or misguides the user off their intended path.
Loading Indicators
Loading animations are a critical aspect of interaction design, offering users reassurance that their actions are being processed.
...
Evade overcomplicated loading animations that may give a false sense of longer waiting times or system inefficiency.
Easing and Duration
Selecting the correct easing and duration for animations ensures a natural and coherent experience throughout the interface.
...
Avoid erratic changes in motion speed or easing that can jar the user's experience or detract from the content.
Guidelines
When it comes to timing, consider the following guidelines based on best practices:
...