Motion System Contributors
Lead Product Design: Marie Shatara
Senior Motion Design: David Hall
Motion Principles
Inform
Motion shows spatial and hierarchal relationships between elements, which actions are available, and what will happen if an action is taken.
Focus
Motion can capture and bring attention to individual elements helping usability of the product.
Express
Motion can give a product a distinct personality, and create unique experiences that engage the user.
Movement & Distance
Easing defines the feel of an animation and is crucial to user experience. Thoughtful easing helps users understand the relationships between elements and highlights new elements. Like form and color, easing influences a product's overall perception. From overshooting oscillation to a dramatic easy-out, both options can convey a product's personality. While building our Motion System, we utilized Flow to create unified, shareable presets.
Duration is Distance Travelled
The further an element has to move, the more important it is that it does so smoothly and non-jarringly.
The further an element has to move, the more important it is that it does so smoothly and non-jarringly.
The speed of an animation is crucial for usability. If it’s too fast, it can be difficult to see. Conversely, if it’s too slow, it can feel intrusive and create a sense of delay for the user. Generally, most animations should have a duration between 100 to 500 milliseconds, depending on their complexity and the distance the element is moving.
Transformations
Transformations help users understand a component's various states. They are foundational for both micro-animations and transitions. While transitions manage the change of multiple elements simultaneously, transformations concentrate on individual components. Transitions are sequential transformations.
Transitions
Transitions are essential for helping users navigate and comprehend the relationships between components. A well-designed transition ensures that users can easily see what has changed and draws attention to new elements. When creating transitions, it's important to think about the sequence in which elements appear and disappear, as well as the transformations and focal points involved.
Common transitions:
Fig. 01 Container transform, Fig. 02 Shared axis, Fig. 03 Crossfade, Fig. 04 Fade
Interaction
Product Motion concentrates on two types of interactions: real-time and non-real-time.
Each type of interaction requires a different approach to ideation & execution. Real-time interactions occur when motion behaviors respond instantly to user input. Non-real-time interactions occur after user input has happened. The approaches for both types of interaction are explored further in the B/R Motion Library.
FIG. 01: Real-Time Interaction, FIG. 02: Non-Real-Time
Motion Design Process
Phase 1: Discovery and Research
Step 1. Listen to user feedback. Focus on stages in their journey where motion can enhance the usability of the product.
Examples of user issues:
. I don’t know where to focus.
. I have no idea how to use this tool.
. Where do I go from here?
. How do I know that I’ve completed the task?
. I don’t understand what this step requires of me.
. I have no idea how to use this tool.
. Where do I go from here?
. How do I know that I’ve completed the task?
. I don’t understand what this step requires of me.
Step 2. Align feedback with benefits. Connecting your motion ideas to user needs and goals is the fastest and most effective way to gain buy-in from your team.
Benefits of Motion:
. Captures the user's focus
. Can enhance of clarity
. Provides users with hints on next steps
. Offers valuable feedback to users
. Strengthens the hierarchy of elements
. Can enhance of clarity
. Provides users with hints on next steps
. Offers valuable feedback to users
. Strengthens the hierarchy of elements
When feedback can be directly linked to specific benefits, it becomes easier to identify the appropriate motion design elements to utilize.
Phase 2: Ideation to Execution
Ideation is guided by insights
. It captures the user's attention and helps retain engagement.
. Communicates a progression that allows reduced perceived latency.
. Effectively conveys that B/R prioritizes a consumer-focused experience.
. It captures the user's attention and helps retain engagement.
. Communicates a progression that allows reduced perceived latency.
. Effectively conveys that B/R prioritizes a consumer-focused experience.
Sketch and Storyboard
Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering. For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.
Storyboards, style frames, and animatics are created to facilitate communication and gain buy-in from product and engineering. For this specific project, once the general direction was approved, the execution took elements from multiple storyboards.
Final Execution and Delivery
After completing the animation, it is presented in prototype form to stakeholders for final approval and is prepared for handoff to engineering.
After completing the animation, it is presented in prototype form to stakeholders for final approval and is prepared for handoff to engineering.
I collaborated with the NCAA product team to design an in-app college bracket tracker animation. It includes two states: a non-busted bracket and a busted bracket. Using the motion process we developed for B/R improved the clarity and structure of the project.
Sketch and Storyboard
With guidance from the NCAA team, I developed a series of exploratory storyboards. After review, we selected a direction that included minor adjustments to enhance brand iconography. I then created style frames using the brand's color palette and incorporated a Fan Foam Finger, which had been featured in other creative materials, to ensure the animation had a more cohesive feel.
With guidance from the NCAA team, I developed a series of exploratory storyboards. After review, we selected a direction that included minor adjustments to enhance brand iconography. I then created style frames using the brand's color palette and incorporated a Fan Foam Finger, which had been featured in other creative materials, to ensure the animation had a more cohesive feel.
Final Execution and Delivery
After securing internal approval, I finalized the animations and prepared them for hand-off.
After securing internal approval, I finalized the animations and prepared them for hand-off.
Conclusion:
The Motion System has established clear boundaries that allow for a unified focus on problem-solving and creating cohesive animations throughout the app. The outlined creative process streamlines our approach, facilitating collaboration among stakeholders, product designers, and developers during the early phases of Motion Design.
In the latest update of the B/R App, I created custom micro-animations based on the established principles and practices of our Motion System. This is detailed in the Motion Library Case Study.
Footnotes: https://m2.material.io, https://medium.com/@aviadtend/motion-design-system-practical-guide-8c15599262fe, https://fourplus.bg/motiondesignsystem, https://www.toptal.com/designers/ux/motion-design-principles