Motion Tells Stories

Our world is one of movement. Even in still moments, leaves tremble and lungs expand. In product development, it might seem that motion will be an extension of everyday tasks with little effort. However, it’s far from true.

The theory of motion design is relatively new and its roots are in Disney. In 1981, Disney’s animators Frank Thomas and Ollie Johnston introduced a book on “12 Basic Principles of Animation”, which had a big influence on motion graphic design. These principles guided on how to create a realistic motion, and touched abstract concepts such as emotional timing and character appeal.

Motion design, on the other hand, has a profound impact on the user experience of software products. In the context of digital products, motion is more than an entertaining decoration. It is a compelling force that bolsters product engagement and extends the reach of design communication. Its relationship with UI and UX designs is rapidly blooming and key distinctions are becoming more prominent.

It’s typically thought that UI animation makes the user experience more pleasing, but doesn’t respect too much time and attention. It’s treated as a stepchild of UX, and usually just comes at the end of a final lipstick pass. Nonetheless, UI animation is a distinct medium separate from the motion design - as distinct as photography is from painting. It doesn’t obey the 12 basic principles, since it’s solving a different problem.

In UX design, motion is more than a garnish - it is a force that extends the reach of visual communication. An interesting distinction of motion design is that it can be thought of happening real-time or non-real-time:

• Real-time interactions instantly respond to user input by manipulating UI elements on the user interface. They provide immediate feedback about the user experience.
• Non-real-time interactions happen after user input, meaning that the user experience includes a pause for watching the resulting motion behavior before continuing.

Another distinction of motion design are the four distinct backbones, which ensure that the temporal behavior of user experiences supports usability.

• Expectation is about how users perceive what an object is and how it behaves. Designers need to understand what motion behaviors do users expect to see when interacting with UI elements, as well as understand whether the motions meet the anticipated expectations or cause confusion. Put simply, designers aim for minimizing the gap between what the user expects and what they experience.
• Continuity is present when interactions produce consistent motion behaviors throughout the user experience. It can be divided into two types: (a) the continuity within a scene, and (b) the continuity within a series of scenes.
• Narrative ensures that the trigger occurred by the interactions and the motion behaviors, are tied to a logical progression of events and satisfy user intent.
• Relationship refers to the spatial, temporal and hierarchical relations between UI elements, and how that influences users’ decision-making.