The why, what, and how of motion guidelines in UX.
Motion design refers to the movement or animation of graphic elements in media platforms, such as websites, apps, and videos.
Motion is a crucial part of design across digital products. It’s meant to bring the screen to life, elevate and refine the experience, teach usability, and guide users through digital products. The purpose, essentially, is to make complex content easier to process, helping users browse in a simpler way.
Animation can be used in many different ways across digital:
Educate: Motion informs users and helps them navigate a product easily. Digital products can be complex, with multiple things on the screen and a user navigating a product for the first time interactions can get tricky and overwhelming. Motion emphasizes the right elements. It brings guidance and feedback helping the users complete tasks.
Visual hints like content moving up while loading on a website help inform the users there is more content below, making them automatically scroll.
Focus: Motion is a guide, it helps focus users attention on what’s important on the screen. Focused motion indicates that something is happening. It plays a big role in guiding the user on where to look at, what to click or simply when to wait because something is loading.
The animated elements in the button responding to the click provide instant visual feedback to the user’s action. Once the action is completed, the outcome is also highlighted with motion so the area of focus changes and draws attention to the number of items in the cart.
Delight: Good motion does not distract. It enhances the visual experience and keeps users interested without overwhelming them with too many things happening at the same time. Motion can also express a brand’s personality. It conveys an idea and creates balance with purpose.
Small moments to celebrate a moment in the user journey make the experience memorable without being intrusive.
What are motion guidelines?
Motion guidelines are a set of rules developed to maintain consistency without compromising quality when managing systems at scale. Motion documentation establishes best practices, patterns, and tools to ensure a clear understanding of animations. Depending on the product or phase of the project, these guidelines might vary from a simple overview of the system to more complex specs. Details, visual examples, text specs, dos and don’ts would always be more practical when using and adapting the system.
Creating a digital product requires teams that include product designers, engineers, motion designers, analysts, product managers, and sometimes external agencies. Guidelines are the language that helps multiple disciplines come together and work smarter. They’re a way to collaborate efficiently, ease communication, and build a cohesive experience.
Guidelines also help bridge the gap between motion designers and developers. Implementing motion across digital products requires adaptability and translation, proper documentation and organization helps developers to easily and accurately implement and scale motion into code.
Why are guidelines important?
Digital products extend across multiple platforms. Motion guidelines help scale the system as it grows and evolves to adapt to a variety of screens and applications. They are essential to standardize motion patterns and interactions, like duration, easing, and choreography helping the motion stay dynamic but consistent.
Without set guidelines there is no solid foundation and this can risk consistency in the product. Keeping features and components unified requires the accuracy and flexibility that guidelines provide, and would ultimately help avoid breaks in the product that lead to brand inconsistency, inaccurate interactions and fractured experiences.
How to create guidelines
Before creating guidelines, it’s important to understand several things. Who is the guide for? Other designers, developers, or agencies? What’s the phase of the project? Is it concepting or detailed design? This will dictate if it’s a simple outline with recommendations or one that’s more complex and ready to be implemented. Where are these guidelines going to live? What form do they need to take? Is it a website, a PDF, a Figma presentation? Clarifying these points will help motion designers make decisions on how to create a system that meets the needs of the team that is using it.
Key things to have in a motion system to provide guidance and help learn others how to utilize motion include:
1. Define principles
Motion principles set the tone of what you are trying to convey through motion. These principles reinforce brand identity, keep movements consistent, and make products more unified and differentiated. In order to create these principles it is important to understand what you want to express with motion and how you want your product to be experienced.
Consider principles that enhance and guide the product experience. Principles should be easy to understand and clearly differentiate one from another.
Here are 3 examples of principles that can be used in product experiences:
Smart Helps the user follow along, establishes paths and patterns.In this example motion teaches the user the relation between icon and the action of opening/closing the menu.Effortless Enhances the experience, while remaining subtle and out of the way.This animation reinforces the horizontal layout of the component. Helping users navigate content easily.Purposeful Tells a balanced and cohesive story, adds moments of delight.This example demonstrates how motion helps communicate system status with seamless transitions.
2. Give examples
Provide a storyboard, video or prototype as a reference. It gives developers a good start when building a new product and a better understanding on how an element animates. Pair your visual with a principle, having context of usage helps understand principles and how to apply them.
3. Documentation and detailed specs
Providing thorough documentation ensures animations can be translated into code and properly implemented in digital products. As the motion work evolves these values are a reference to build new animations and ensure a consistent look and feel.
Include detailed motion values like:
Duration: usually set in milliseconds, it defines the length of time that an element will take to complete, the larger the change the longer the animation takes.
Easing: determines how speed is influenced during an animation, allowing elements to speed up and slow down. Transitions created without easing feel mechanical instead of natural.
Delay: creates hierarchy between multiple UI elements, and helps communicate how elements in the same screen could be related or completely separated with different functionalities. Staggering elements can also help understand transitions, structure of pages and most importantly makes the product feel responsive and dynamic.
Different easing, duration and delay values communicate different things. Having a set of multiple easing curves, duration and delay tokens specifying function and usage helps developers and designers understand when and how to implement it. A right combination of the duration, easing and delay values produces smooth and clear animations.
When providing documentation for specific animations, detail the properties that define the animation so developers can rebuild it in code.
Map the start and end states in a timeline, adding duration and elements used in the animation helps visualize timing of each piece in relation to each other. Include transformation, this refers to the motion itself and are the specifics of which property is changing and what the change is. Examples of animated properties include changes in, position, scale, color, opacity, etc. and can be determined by pixels or percentages.
Always start the conversation between motion designers and developers as early as possible. Proper collaboration and communication are crucial to achieving a successful product build. There is not a one-size-fits-all solution; every project and developer is unique, so finding processes that work for them is key to smooth motion handoffs.
Understanding how things are going to be implemented and what files are going to be needed is essential for motion designers to create animations and user-friendly guidelines for the team that will bring the product to life.
Resources
Here are a few examples of motion guidelines
https://carbondesignsystem.com/elements/motion/overview/https://m2.material.io/design/motion/understanding-motion.html#principleshttps://design.intuit.com/quickbooks/brand/design-foundations/motion/#ui-motionhttps://brand.vevo.com/motion/https://brand.slackhq.com/motionhttps://www.lightningdesignsystem.com/kinetics/overview/
The power of Motion Guidelines in digital products was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
