Whether it is communicated using simple vocabulary for ideation or visual with more advanced prototyping methods, it is critical we have a solid baseline, understanding, and lexicon for discussing motion and animation. 

When discussing motion it often comes with dramatic sound effects and exaggerated hand waving, “…and then it will fly in from the side [zhhwwooop] and…” we’ve all been there. It is important we’re equipped with the right tools in how we communicate these ideas and interactions.

In order to better communicate and document motion we need to identify some core principles. This will be our toolkit for talking about these techniques:

Principles: 

Much of what is outlined here follows the “Creating Usability with Motion: the UX in Motion Manifesto”  and Google Materials section on Motion, but I want to ensure to surface some key nomenclature here to the team. It is very important we’re speaking the same language when it comes to these techniques and ideas. You’ll be hearing these used more often, so familiarize yourself with these terms. 

Timing– Easing, Offset & Delay

Object Relationship– Parenting

Object Continuity– Transformation, Value Change, Masking, Overlay, Cloning

Temporal Hierarchy– Parallax

Spatial Continuity– Obscuration, Dimensionality, Dolly & Zoom

Understand these core principles, we can then create purpose:

---

Realtime vs Non-real time

Simply put, real-time means the user is directly interacting with the object and non-real time occurs after a user’s action (transitional). This is an important distinction– in both how it is implemented and we want the user to engage with different elements. Realtime puts the user in control of the behavior as they’re using it. Non-realtime will translate to the user being momentarily paused while the transition completes.

Ideation, Communication, Collaboration 

At its core– most of our motion efforts will derive from a conversation between design and front-end. This cross-discipline collaboration is key to our success in these efforts. 

In many cases this may be as simple as sharing a reference or pulling inspiration from examples in the wild to model.

There most certainly will be cases where those tools are necessary and do play an important role in communicating (and getting sign-off) on our concepts before development, but as we look further into more advanced examples, establishing this baseline for communicating these ideas is crucial.