Motion

Motion brings our brands and products to life with expressive storytelling and memorable experiences that inspire action.

Guiding principles

Empathize

Care for customers with accessible and trustworthy motion. Ensure access to all, utilizing well-paced, thoughtful and seamless transitions.

Guide

Tell engaging narratives with purpose. Carry the viewer through an experience with simplicity to enhance understanding and emphasize key information.

Delight

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.

Focused

Subtle and out of the way, highlighting the primary information and next actions.

Precise

Familiar motion, with consistent easing, timing and patterns.

Intelligent

Seamless visual feedback that’s quick and responsive.

Expressive

Exaggerated movements that are natural yet dramatized.

Dynamic

Contextually unique motion, based on the story, data or input.

Inspiring

Encouraging visuals that evoke positive emotions.

Motion styles in context

Product style

Product motion is generally more subtle and precise, assisting customers to focus and get work done, with thoughtful expressive moments along the way.

Marketing style

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 animation



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 customers 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.

Motion considerations

Additional considerations for when and how to apply motion.

Customer benefit

Prioritize motion for moments that have potential to add the highest value and delight for customers.

Performance

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.

Cognitive load

Frequently seeing many visuals in motion can be distracting. Use motion to simplify and remove complexity, highlighting a single primary focus.

Cohesion

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.

Context

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.

Product


First-time use

Navigation

Page transitions

System status

Data visualization

Celebrations

Marketing


Web

Email

In-product discovery

Editorial

Social

Campaigns

Product expression

Product tutorials

Accessible motion

Empathize and build trust with customers by providing a calm and accessible experience.

Accessible-first motion

When designing motion for interfaces, start with a reduced motion experience first. Then, if necessary, expand to create a standard motion experience.

Reduced motion

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

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.

Have work that’s ready for review?

Come to design and content office hours to make sure it’s brand-approved. Agencies and external partners welcome.