Motion brings our brands and products to life with expressive storytelling and memorable experiences that inspire action.
Care for customers with accessible and trustworthy motion. Ensure access to all, utilizing well-paced, thoughtful and seamless transitions.
Tell engaging narratives with purpose. Carry the viewer through an experience with simplicity to enhance understanding and emphasize key information.
Create memorable expressive motion. Motion adds personality and enjoyment to our experiences, with natural movements, attention to detail, and subtle surprises.
Motion style attributes
To reflect the right tone of our various experiences, motion can come to life across a style spectrum.
Subtle and out of the way, highlighting the primary information and next actions.
Familiar motion, with consistent easing, timing and patterns.
Seamless visual feedback that’s quick and responsive.
Exaggerated movements that are natural yet dramatized.
Contextually unique motion, based on the story, data or input.
Encouraging visuals that evoke positive emotions.
Motion styles in context
Product motion is generally more subtle and precise, assisting customers to focus and get work done, with thoughtful expressive moments along the way.
Marketing motion is generally more expressive, inspiring customers with dynamic storytelling to create a memorable impression of the brand.
Product expression motion
When showing product motion in marketing, retain the essence and accuracy of the product, with some affordances to make the style slightly more abstract and dramatized. Simplifying the design or isolating elements helps tell a clear narrative and highlights product features.
Types of motion
There are two types of motion for our marketing and product experiences: storytelling animations and UI motion.
Storytelling animations communicate a clear narrative with emotion. They simplify complex ideas and add personality with visual metaphors and expressive styling.
Move with simplicity and intention allowing the viewer to clearly understand the narrative.
Animations highlight and support the content and messaging, but don’t overshadow or distract from it.
Reduce perceived loading time with visual metaphors that inform and educate.
Celebrate the noteworthy milestones along the customer’s journey with visual metaphors. This encourages positive actions and creates an enjoyable and memorable experience.
Explain a new feature or inform how to complete a task with tutorials.
Use animation to support a voice over by visualizing information. The combination of audio and visuals can help increase comprehension and engagement.
UI motion seamlessly guides customers through an experience by responding to their action, prompting the next step, or communicating system status.
Provide continuity and help guide the viewer with seamless transitions and choreographed timing. Nothing abruptly changes, appears, or disappears.
Upon first time use, it can be helpful to inform how an interface functions with a visual hint, especially with gestures or uncommon interactions.
Interactions or transitions that occur frequently are quick, subtle, and almost unperceived.
Provide instant visual feedback by connecting an action to an outcome.
After completing large tasks or milestones, create small moments of delight with celebratory confirmations.
While a page is loading, reduce UI shifting with placeholder containers and fade in groups of content together.
Once a page is loaded, it might be appropriate to highlight information or an action with motion. Limit the amount of motion to one primary area of focus, as not everything needs to draw attention.
Additional considerations for when and how to apply motion.
Prioritize motion for moments that have potential to add the highest value and delight for customers.
Adding motion to UI has the potential to increase file size or slow down performance. Prioritize using systems components and frameworks to ensure optimal performance.
Frequently seeing many visuals in motion can be distracting. Use motion to simplify and remove complexity, highlighting a single primary focus.
Utilize components and patterns, as this offers cohesion and familiarity across a customers experience. If there’s a unique use case, consider how the motion can be turned into a pattern or template for a greater impact.
The amount or frequency of motion depends on the context of the customer and the purpose it’s serving. Balance the amount of motion throughout their experience.
When to use motion
Examples where motion can improve usability and add brand personality.
Empathize and build trust with customers by providing a calm and accessible experience.
When designing motion for interfaces, start with a reduced motion experience first. Then, if necessary, expand to create a standard motion experience.
Motion makes some people feel dizzy or nauseous, so they may prefer to turn on reduced motion within their settings. If a customer chooses this, empathize by providing a reduced motion experience.
- Reduced motion doesn’t necessarily mean remove all motion, as it may be best to have some very subtle motion that offers continuity.
- Retain gesture transitions on touch screen devices, as this helps connect actions with visual feedback.
- Reduce the value change or distance elements travel.
- Slow down the pace of transitions.
- UI motion that enters or exits view with a position or scale animation, may be replaced with a opacity fade in or out.
- Storytelling animations are best if they are paused by default. Show a static image that represents the messaging, with controls to play or pause the animation.
Standard motion is the system default when reduced motion is not selected. Provide an accessible experience for all with these best practices.
- Maintain text and visuals on screen long enough to comprehend the messaging at a comfortable pace. Information can be missed if elements transition too quickly.
- Choreograph the elements in a sequence to focus on the most important information and actions.
- If a motion sequence loops playback, have a pause at the end of the sequence to not exhaust the eyes or compete with the content.
- Don’t have multiple animations within view competing for attention.
- Don’t animate multiple elements with conflicting movements in a sequence.
- Don't embellish with unnecessary motion that distracts.
- Don't move elements too fast or too far.
- Don’t flicker or flash visuals.