Embracing Inclusion by Making Space for Everyone
How we conceptualised Our Core Motion Design Principles for the live show videos
Episode 2: The dynamics elements of our world
Several fundamental elements contribute to defining a product’s personality. When embarking on the process of re-defining our product, the initial steps involved determining crucial factors such as the product’s goals, user experience, desired outcomes, and more. These fundamental elements that form the backbone of the product have been thoroughly discussed and designed, spanning from ideation to final user flows and interfaces. However, a truly exceptional product goes beyond mere appeal by incorporating aspects like behaviour, motion, tone, and user interactions.
The fusion of these dynamic components shapes the product’s archetype or personality — a distinct character that sets it apart and leaves a lasting impression on users, representing our core values and principles.
We have delved into the concept of core values and their representation in our User Interface. If you’re curious about the intriguing influence of shapes and colours on users’ subconscious decision-making, we invite you to learn further in the following reading:
In this blog, we will delve into one of the key elements that shapes our product’s personality: its interaction with the world and the various components within it. We will explore the intricacies of our product’s motion design in greater detail.
The essence and importance of motion design
Motion design is an essential aspect that can elevate engagement, comprehension, and aesthetics.
It enhances the appeal of content, simplifies its interpretation, and introduces dynamic and enjoyable elements.
The integration of motion is vital in making digital products more captivating. Even the most basic actions, such as tapping a card for more information, become more valuable with seamless animation.
Our goal is to create motion designs that blend seamlessly with the user experience, providing a natural, subtle, and unobtrusive feel. We aim to mimic the responsiveness and tangibility of physical products, responding coherently to user interactions.
Our ultimate objective is to craft exquisite and fluid motions that bring the interface to life.
These motions have a variety of purposes, from communicating status updates to providing feedback and guidance and enriching the visual experience.
Envisioning how our world moves
When embarking on the design of motion, it can be overwhelming to determine where to begin. There’s a multitude of interactions and motions to choose from or even create anew. This is where the essence of what you are designing for, your core values, comes into play.
As a product, we have consistently championed the principles of inclusivity and respect for every individual’s voice and space. Therefore, it is imperative that our motion design aligns with these principles.
To craft motion that feels both familiar and natural, we simply need to keenly observe the movements that resonate most with our objectives. Let’s once again turn to a real-world scenario that we can easily relate to in order to vividly depict the kind of motion we strive to attain. Envisioning ourselves as a platform that prioritizes discussions.
Consider this: A round table conference room with a group of individuals already seated and deeply engaged in brainstorming. Suddenly, a new participant enters the room. The occupants of the room gracefully adjust their positions to make space for the newcomer.
This particular scenario served as a motivation for us to conceptualize our desired motion. The process can be deconstructed into the following steps:
- The people already in the room made room for the new arrivals by subtly readjusting their positions.
- The newcomers move towards the space that has been freed up by the others.
- Finally, everyone makes slight adjustments until everyone at the table finds a comfortable spot.
Guided by this concept, we began to develop and define our motion design principles, while also keeping in mind the goal of creating a seamless and engaging user experience.
Our motion design principle — ‘Make space’
Making Space is the most fitting description for our intent while upholding our transaction principles. Our stance encompasses authenticity, self-expression, and embracing rawness and reality, which should also be evident in our transitions. And this is how we interpreted this concept of “making space :
- As every voice deserves a platform, each element should have its moment to shine.
- Create room for every expression, welcoming new elements into this space.
- Inclusion also entails the ability to scale down certain elements when necessary, allowing other elements to shine.
In light of this, we formulated our core transition principle:
Initially, existing elements adjust to create room for the new element. It undergoes a slight reduction to accommodate the incoming element adequately. The new element expands and relocates to its designated position.
Reverse the steps for the exit of elements.
But how does this work
There are a few fundamental physics principles that aid us in executing motion more effectively. Let’s examine some instances of motion in action, along with a few nittie-gritties that made it better.
1. How do we welcome a new host:
One of the initial transitions we outlined was the integration of a new host onto the screen. Defining the transition itself was a straightforward process.
The existing host displayed on the screen initiates a welcome by initially scaling down and then proceeding to create space for the incoming host. All host videos scale to an equal size, symbolizing an equitable representation of each host’s importance. However, in terms of execution, achieving the desired outcome required multiple attempts.
It took us several tries to realise that halting the scaling of the existing elements on the screen before their movement was crucial to attaining the desired result
Establishing fundamental motion principles is a valuable practice for a product. It not only fosters the creation of consistent motion designs but also serves as a guiding framework for future elements.
Here is a brief glimpse of the structure of our core motion framework.
2. Sharing audio-visual screen or back-camera feed:
It’s important to remember that the mass of an object determines its speed of motion.
Smaller elements will naturally move faster than larger ones due to their lower weight. This is why items like sticky notes and name tags move more quickly. Conversely, larger elements like the AV screen, being the heaviest, will move the slowest.
By being mindful of this, we can ensure a seamless and conflict-free scaling of the elements. As a result, the time allocated for the AV transition is 8ms, whereas the name tag only requires 1ms.
3. How do I share my opinion-Creation of a sticky
When a user initiates the creation of a sticky note, how does it impact the presentation of the hosts on the screen? It’s of paramount importance that throughout any workflow, users do not lose the context of the show.
Two pivotal elements in ensuring this continuity are the audio and video of the hosts. While evaluating whether audio alone suffices to uphold the show’s context, a question arises: should we consider eliminating the video component? Our response is a resounding no, as doing so would violate one of our core principles.
The video scales down in size while the sticky scales up.
If you are unaware of the amazing world we’ve created for user expression, and how the “Creation of sticky” is a fundamental action in our entire experience, you must read this:
Final words
Motion design breathes life into our product, captivating users with dynamic interactions. It goes beyond animation — it’s our product’s storytelling soul, forging a lasting connection with users. Finishing with a tip for the next time
Any UX animations should be between 100 milliseconds and 500 milliseconds. And that’s at an absolute maximum. The longer an animation is the more lag time the user experiences. That may become cumbersome and draggy after four or maybe five times.
And it’s a wrap!
Up next we will discuss more elements that define the personality of our product in the Activity Board. Cuteness is on your way!
