Motion brings our brands and products to life with expressive storytelling and memorable experiences that inspire action.
Motion
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 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
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.
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
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.
Intuit Design
© 2023 Intuit Inc. All rights reserved.
Intuit, QuickBooks, QB, TurboTax, Mint, Credit Karma, and Mailchimp are registered trademarks of Intuit Inc. Terms and conditions, features, support, pricing, and service options subject to change without notice.
By accessing and using this page you agree to the Terms and Conditions.