Motion
Motion defines relationships and transitions to help people recognize changes and move toward their goals. Good motion design can also bring a sense of humanity and delight to an experience while making it more sophisticated and satisfying.
Motion principles
Functional
Motion is applied with purpose and intent to serve the functionality of an experience. Use motion to identify the next step, inform people of changes in the UI, and celebrate what they’ve accomplished.
Natural
Motion in Fluent 2 experiences feels fluid and real by following physical laws such as inertia, gravity, weight and velocity. This makes animations more believable and predictable.
Consistent
Consistency in motion design helps unify Microsoft experiences and improves the flow between products. Consistent motion provides a sense of familiarity and strengthens Fluent’s Unmistakably Microsoft principle.
Appealing
Delightful animation draws people in. Designing engaging moments using motion helps people relate to your product and creates a more memorable experience.
Duration and easing
Duration and easing describe how long an object moves and how its speed changes along the way. Getting duration and easing right guarantees that people have enough time to notice the motion and interpret what it communicates.
Duration
Animations need to strike a balance between feeling too sluggish and too abrupt. Make it feel natural and quick by considering the size of the element and the distance it travels. Give larger elements more time to animate than smaller elements. Aim for a fast and smooth motion without making people wait.
Use quick, natural durations
Unnatural durations can be jarring and abrupt
Easing
Easing is what gives an animation a natural and organic feel, as opposed to a uniform and rigid motion. There are different types of easing that can be applied to animations, such as linear easing, ease-in, ease-out, and ease-in-out. By choosing the right easing function, makers can create animations that are natural and engaging, improving the user experience.
Linear easing
Linear easing means that the animation moves at a constant speed from start to finish. This type of easing can feel unnatural; use it only in cases that need a consistent rate, like rotations.
Ease-in
Ease-in animations start slow and then speed up.
Ease-out
Ease-out animations start fast and then slow down.
Ease-in-out
Ease-in-out animations start slow, speed up in the middle, and then slow down again before ending.
Transitions, or motion in practice
Transitions introduce, dismiss, or change content via an animation. and are at the heart of effective UI motion design. They help people understand how the UI works and give it a high-quality look and feel. When speaking about motion, the term transition describes most animations in the UI.
Four of the most common transitions we use are:
- Enter and Exit
- Elevation
- Top level
- Container transform
Enter and exit
Enter and exit introduces or dismisses elements in the UI. These elements can enter and exit from off-screen or from within the bounds of the screen. This pattern is commonly used for menus, dialogs, and other interactive elements that appear and disappear on the screen.
Elevation
The elevation pattern is used to visually indicate changes in elevation or depth on the user interface. This pattern is commonly used for button states, drag and drop interactions, windows, and creating a hierarchy of elements. By using elevation to indicate changes in depth, it helps to create a clear and intuitive experience by providing visual cues to the user about the relationships between elements on the screen.
Top level
The top level transition is used to navigate between different pages and destinations. Since the elements at the top level are large and take up a significant amount of screen real estate, use a quick fade transition instead of moving or sliding UI elements around on and off the screen. This approach helps keep the UI consistent and clear, avoiding unintentional hierarchy and disorientation.
Container transform
A container transform refers to the process of changing the layout or position of a container element on the UI. This is done through a resize and/or reposition. Container transforms are commonly used in responsive design, to adjust the layout of a website or application to different screen sizes or orientations.
Choreography
Choreography refers to the arrangement and order of movements in an animation. Poor choreography can result in an animation that appears cheap or takes an excessive amount of time to conclude.
Staggering
Staggering is the process of delaying the start of one or more animations. This can be used to soften the entry of large sets of items or to shift people’s gaze in a specified direction.
Pay attention to when it’s appropriate to stagger an animation and when they may need to end at the same time. Keep in mind the overall duration of the animations and use short offsets between them. When loading the same content multiple times, consider using different animation offsets. It may be appropriate to programmatically vary the offsets, starting with larger gaps and gradually shortening them. When using a list of items that is bound to an animated parent, consider the timing of the parent animation as well.
For most scenarios, a staggered animation is preferred. Non-staggered animation should only be used for very large groups of elements, when staggering makes the animation take too long to complete.
Hierarchy
Hierarchy refers to the order in which elements are animated. Animation hierarchy allows you to direct people’s attention to UX elements in a preferred order, and helps to ease the flow of navigation to critical areas.
Give important elements more emphasis through more prominent movements and longer durations. Conversely, less significant elements should be grouped together with synchronized timing to create a cohesive visual experience.
Use choreography help build focus
Moving elements together can create ambiguity
Accessible motion design
Fluent’s principle one for all, all for one means that we consider the needs of everyone in every aspect of designing and developing UI. Incorporating thoughtful motion design aligns our products to the Microsoft goal of helping everyone achieve more.
Groups who may be unable to perceive motion or may be adversely impacted by motion include people with vestibular disorders, people with low vision, people who use screen readers, or people who are sensitive to visual stimuli. Here are some general rules to make sure that these groups can also benefit fully from your apps.
Design for and include a “no motion” setting for your app or website as recommended by the WCAG.
Keep durations short and the movement natural.
Avoid flashes, jarring movements, or any other sudden movements that could trigger an epileptic seizure.
Keep the motion constrained to the element in focus. Adding motion in other areas of the screen may distract from the task at hand.
Consider other ways of communicating information that conveyed via animations, like using ARIA live regions to expose and announce dynamic content.