Motion creates meaning and delight in digital experiences

“Motion is the strongest visual appeal to attention” said perception psychologist Rudolf Arnheim. Finally, this notion is gaining traction in the world of digital design. There’s a growing interest among UX designers and visual designers in the integration of motion into their design activities. But the fields lack the knowledge, concepts and language to do so.

There is a discourse emerging to develop the proper thinking and expertise. Not only concerning the implementation of motion elements, but also more fundamentally how we can learn from animation experts and how to build upon their vision and principles. Designing smooth, attractive and meaningful digital experiences with animation and motion design is what the communities need to learn. Because motion design can effectively guide the user’s attention in ways that both inform and delight.

Motion has become an extremely important part of the interface design experience across different applications. It has become a key component of mobile, web and software applications of today. Web design experts point out that motion animation in UX has the ability to evoke a positive emotional response. The popularity of motion animation testifies to the ever increasing importance of aesthetics for digital design. The key to creating an awesome animation is to convert real world movements into the digital world experience. As a result, animation can help create a memorable user experience.

The animation bible 'The Illusion of Life' comes from a name with a rich association with animation: Disney. Disney animators Frank Thomas and Ollie Johnston published a framework for animation that is still the standard today. In this seminal work, they defined a set of animation principles. In short, these principles are:

1. Squash & Stretch: Give objects a feeling of physical mass and responsiveness by allowing them to contract or stretch when moved. Decide the level of realism you want, then apply the effect accordingly.
2. Solid Drawing: A basic material principle in which objects reflect weight and balance just like their real-life counterparts. This principle is about honoring the rules of three-dimensional space and giving objects and characters appropriate dimensionality via volume and weight.
3. Two ways to draw motion: Straight Ahead Action & Pose to Pose. Straight Ahead Action animation conveys dynamic and complex movement, while Pose to Pose covers more predictable movement.
4. Arc: Movement that follows an arc feels more natural, while movement along straight lines feel mechanical. Arcs also help define the motion’s nature.
5. Staging presents the action you wish to illustrate as clearly as possible. Apply colors, contrast, and composition to focus attention on the primary object. Staging is about emphasizing the central idea of an animation, making it completely clear to the viewer.
6. Timing is probably the most important principle of all. No matter what you’re animating, users’ perception and comprehension will be defined by the way you build sequence, what you make your primary or secondary motion, what you Ease-In or Ease-Out.
7. The principles Follow Through & Overlapping Action are about orchestrating several simultaneous motions. Follow Through helps communicate the hierarchy between interface elements and set priorities in your motion symphony, while Overlapping Action keeps the entire sequence seamless and within measure.
8. The Secondary Action-principe principle is the bread and butter of a magician’s sleight of hand and manipulating change blindness. It helps you define what should be put in front of the user and what should stay hidden. Rule of thumb: secondary actions should never detract attention from the primary ones.
9. Slow In & Slow Out is one of the most fundamental tools to drive users’ attention and make motion look authentic at the same time. This principle helps users follow your animated story by creating a comprehension hierarchy. Allowing the laws of physics to exist in your digital world makes experience more relatable to users. On the functional side, people tend to pay closer attention to objects that slow down and defocus on the accelerating objects.
10. Anticipation is a powerful principle that can be used both in the beginning and end of your animation.The appearance of the object suggests the action. It’s helpful in preparing an object for movement, orchestrating the components of a scene in order to give the viewer a clue as to what’s about to happen.
11. Exaggeration makes movement feel dynamic, alive, and just plain fun. An animation without some level of exaggeration might look accurate, but will likely feel stiff, mechanical, and boring. Disney’s classic definition of exaggeration is to remain true to reality but to present a wilder form.
12. Appeal is the most mysterious of all Disney’s principles. Think about all of the apps and sites you use day-to-day and why you keep using them. Often, there are many others that can solve same tasks, but the ones that people stick to do much more. They surprise and delight you; they enable you to achieve bigger goals. They have more than just a good user experience; they have emotional appeal.

But how does one connect, apply and integrate these animation principles to principles in experience design for the digital domain? In a compelling presentation experience designer Rebecca Ussai and legendary Disney animator Glen Keane drew from these sets of principles, introducing the concept of UX Choreography. It provides a new paradigm that helps UX and visual designers better integrate motion into their work. The framework supports them in thinking about how to design with motion in order to craft experiences that are more intuitive, realistic, emotional and enjoyable. It uses Disney’s principles of animation and combines them with the most integral moments in user experience.

1. Feedback helps demonstrate the result of a user’s interaction, whether or not it was successful, and why. Exaggeration (the Disney principle) is something that is felt, not just seen. Often you’ll see characters react in an unmistakably big way.
2. Feedforward is a form of hinting, it’s visual affordance. It conveys possible interactions and what to expect so that users better understand how things work and fit together. It helps them accomplish goals. Anticipation (the Disney principle) has a very similar goal: preparing an audience for what’s about to happen.
3. Spatial Awareness helps orient users with their environment and clarifies the relationships between elements. Its main objectives are orienting users and giving logic to environments. Spatial awareness guides the proper use of screen real estate to reduce complexity. Disney’s principle of Staging teaches us a lot about this.
4. User Focus guides the attention of the user and clarifies change states. It controls the transitions of hierarchy at each moment in time. It puts emphasis on the right elements depending on what the objective is. Disney’s principle of clarity support this UX principle.
5. Brand Voice gives the expression, personality, and identity throughout the experience of the brand. You feel like they delight you, or they enable you, or you get something out of an activity. They have more than just a good user experience. They have emotional appeal. It provides surprise and delight. It influences the emotional experience. Appeal is the Disney principle that’s one of the most magical, but admittedly can be difficult to design for. It’s about what makes feel things right.

Motion-based design brings an important aspect into UX: delight. Motion is a natural way of interacting with things and it’s absolutely critical to digital design of the future. We need to say goodbye to static user interfaces and create interfaces which are much more human and alive. Creating a motion language for your app will reinforce your brand and compliment your design. The UX Choreography framework is just a first attempt in doing so.

By adding motion to the repertoire of digital designers, the field more and more fits the famous quote of visionary Ted Nelson, namely that "interactive software is a branch of film making. "

• Designing interface animation: Meaningful motion for user experience (Val Head, Rosenfeld Media 2016)
• The principles of UX Choreography: De kruising van Disney en UX en waarom het leren tekenen van Mickey Mouse zal veranderen hoe je design benadert (Rebecca Assai, 2015)
• Making Motion Meaningful: Motion designers from around Google share some of their most moving product features Sharon Correa en John Schlemmer, Google Design 2016)
• Motion in UX Design (Nick Babich, UX Planet 2016)
• Communicating animation (Rachel Nabors, A List Apart 2016)
• Motion and Meaning: A podcast about motion for digital designers (Val Head and Cennydd Bowles).