Motion As A Tool For Experience

Thoughts and considerations on how motion plays a critical role in our digital platforms.

How can we arrive at a friction free interaction model using motion as a tool?

Animation has been used as a medium to leverage our wildest dreams in the film and television industry. From creating worlds with castles and dragons; to disparate, cold worlds of technology-driven tyranny. Animation probes our imagination and immerses us in story through motion.

In the last two to three years animation has begun to sneak into our digital lives and play with our perceptions, most notably through recent integrations into mobile operating systems and apps. Recently, Google rebranded and incorporated motion even deeper into it’s design ethos. These are attempts at creating ecosystems that leverage time and motion to build unique and more functional experiences.

As our devices become more connected and integrated into our lives, people will be looking for seamless experiences. Moments that mirror the physicality we are accustomed to in our day-to-day interactions. If good design is less design, then maybe our integrated products should incorporate the tone of voice they would naturally take if we were to physically interact with them. The flow of things we interact with from the kettle to the temperature of the house, our magazine collection or podcasts and so on all “feel” natural. As if we are just turning another nob or flipping another switch. With this seamlessness we make a digital interface easier to use and easier to discover. We start to blur the gap between physical and digital.

“We live not in the digital, not in the physical, but in the kind of minestrone that our mind makes of the two…digital space is increasingly another space we live in.” -Paola Antonelli, Head of R&D at MoMA

Obviously an extreme example but you get the idea. Tony Stark doing cool Iron Man things with his super computer.

Motion design in UX

Animation in the context of interactive products should be motivated to define functionality, reward, guide, and encourage discovery or exploration. If there is no benefit to your users you run the risk of adding noise to your interfaces and convoluting the experience.

I think that considering animation at the beginning of a design process yields a more meaningful integration than if it’s an afterthought. In the beginning you can leverage affordances like feedback or orienting motion to help you make good decisions in the flow. Also, in a prototyping sense you get to see how things could work as a full flow by creating a vision video of a user flow. Prototyping how transitions and certain feature sets work in context will help you make meaningful decisions as you iterate. Leaving animation to the end of a process will reduce the chances of any motion having a retainable impact. It becomes a glitter, something that is interesting but adds no value. That’s not always a bad thing, but I think we can design better software if we consider impact and motivation from the start. You are delivering more delight and functionality and designing for unmet needs by pulling in animation early.

The influence of motion design

The two high level ways animation can influence a project are through voice and functionality.

With it’s voice, an app like Mint tells a story that should be trustworthy, communicative, accurate and safe. On the other hand learning a language from the Mindsnacks suite should be fun, engaging, supportive, friendly and rewarding. Establishing how animation works in the context of your app will help you pull users through the experience and tell the brand story.

Through functionality you can solve problems about discoverability by creating an animated hierarchy. Maybe some buttons animate more colorfully than others. You can teach users how to navigate using hints instead of meaty on-boarding flows. You can even convey a story about the brand just by dictating that all motion will be fast, mechanical and precision based.

EFFECTS ON PERCEPTION

The voice of a brand can influence the type of character the motion adopts. A lot of bounce will emit a playful, trustworthy, or maybe even a naive, childish feeling. A sleek ease in or out coupled with little to no overshoot, can make a brand feel sleek, clean, and elite. Snappy motion can create a cold, technological, proficient feeling. “Thundercats”, for instance, is solidly drawn and doesn’t contain much squash and stretch. It feels solid, mature, and sharp. “Tom and Jerry” on the other hand is full of squash, stretch, exaggeration, and all the animation bells and whistles. Creating a more accessible, happy, safe, comedic vibe.

Here you can see the playfulness of the first ellipse versus the cold nature of the last. This will affect the perception of your product.

Animation at its core is like any other artistic medium, a tool used to tell a story or express emotion. It should delight, it should surprise, and it should most importantly have motivation. The two extremes are playful and tactile; their motions tell different stories. The important thing is to understand how the motion feels. Does it feel aggressive? Soft? Heavy? Sad? Dopey?

Motivation is key to all meaningful motion. This motivation will dictate the voice of your animation, and in turn your brand. Is your brand about handmade toys for toddlers or are you showcasing ancient culinary knives from Japan? Your motion decisions should align with the tone of the brand to ensure clarity of the message.

Consider the bouncy nature of an app like YouTube Kids or Toca Boca or even interfaces in Mario Kart. There is a good amount of squash and stretch, a healthy dose of anticipation and exaggeration in the movements. It feels soft, playful and accessible. Games are a great example of ecosystems that have more of the playfulness we have come to expect from animation.

Notice the playful quality of these apps. They are designed and animated in a way to feel fun and energetic. (These GIF’s are from http://capptivate.co/ this is a nice resource for UI animation inspiration.)

In the example below you can feel the character and the tone of the ball’s bounce. Cheerful, energetic and warm, perhaps your menu could shoot out from a center point and bounce into place. A play icon could enter and exit the screen. There are a lot of possibilities, but the idea is that this type of motion will yield a specific perception from users.

This ball bounce almost feels cheeky. It is an extreme but is also a tool in your storytelling arsenal.

What about apps that have a more serious tone? Like a bank or productivity apps? They are a bit less playful. Clear, Any.do, Mint, or Vsco Cam are utilitarian and give off a more mature, elitist, maybe even trustworthy feel. They are still using motion in a motivated way, but they avoid convoluting their intended experience by not utilizing specific motion qualities. Sharp movements, shallow ease curves all shift the tone into a calmer, particular zone.

In contrast, these apps are more precision focused and have sharp movements. Without a lot of bounce. Although the bank app (left) exudes a bit of friendliness with the overshoots. (These GIF’s were created by author.)

The below examples feel tactile but have a reassuring quality to them that could exude a friendly vibe. On the left you have a subtle overshoot and some ease toward the end of the movement. This makes it feel a bit more friendly in nature than the example to the right. This is a much more rigid motion that feels cold and utilitarian, almost lifeless in a way. Think about how your menu’s enter and exit. Consider your button feedback or your submit forms, your error messages and so forth. They all have moments that can translate a message to the user about functionality and the voice of the product.

Precision tools should use precise motion to exact that feel when users operate the software.

EFFECTS ON FUNCTIONALITY

When designing an interface we should give context to the user flow. If a navigation sits inside an unconventional menu, how do we teach users the interaction model? Animation gives us framework to push and pull users through time and show them the in-between states of point A and point B. By showing the in-betweens you start building a high level layout of the ecosystem. Google Inbox does a great job of orienting you by always giving you an idea of where you are going and where you have come from in the app.

Motion can also help enforce your information hierarchy. It can provide visual feedback and clues to help guide users (e.q. an icon that animates vs an icon that does not). Your eye is naturally drawn to the movement and so you have created visual importance for that animated icon. Transitions could exist on a linear plane and in z-space, you can use time to create a visual map of where users are and where they are going. Perhaps portions of the flow that are more important have a z-space transition and all others have only linear movements.

A lot of the functional affordances have been outlined beautifully by Rebecca Ussai, in The Principles of UX Choreography (a highly recommended read to anyone new and curious to this type of thinking). The article dives into the uses of animation principles in the context of UX design.

UX choreography uses 5 of the classic animation principles of Disney and applies them to UX and design. The high level overview of those principles includes:

1. Feedback — Exaggeration

2. Feedforward — Anticipation

3. Spacial Awareness — Staging

4. User Focus — Clarity

5. Voice — Appeal

A little disclosure: my background is traditional animation, pencil & paper, light disks and lunch boxes. These principles are close to my heart and as a designer I’ve been noticing the ways to implement them into my design thinking, as Rebecca has. I’m constantly asking myself, how can we avoid impeding usability, while utilizing motion to tell a story and still be tactful in our design?

To extend a bit on what Rebecca went over, I’d like to add the use of arcs and the importance of timing to that wonderful list. These are also part of the 12 principles of motion and I’ve considered them to be super important in my understanding of animation.

ARCS

Most things don’t travel in a straight trajectory, they travel in an arc. Consider a baseball pitch — that sucker curves. Even when thrown straight it will dip slightly. When we swing our arms, all the follow through in our limbs create an arched motion path. This is natural, which is also why it’s so pleasing to see. Using arcs will create harmony in motion, they are pleasurable to watch and beg for our attention. Tying back into what I opened with, what is the tone of voice things would take if we physically interacted with them? How and why do these things move? Can we leverage the reality of physical movement to create seamless interactions?

Arched movement versus non arched movement. Which looks more pleasing to you? What does the motion say to you about the scene?

In the examples below there is a pleasurable experience in seeing the arcs of the boxes as they expand. Our eyes will follow even a subtle arc, and so utilizing this in our decision making will help orient users to important content. With this knowledge we can make the decision to have specific content move in a way that calls attention to it.

These transitions show arched motion paths. You can keep users aware of their ecosystems and still tell a story. The left is more playful and the right is more at ease.

TIMING — ATTENTION SPAN

Without proper timing, your movie, animation, user interface can be annoying. Timing and spacing dominate all aspects of moving objects. The amount of ease, your holds and oscillations all affect how objects feel and what type of character they have.

In a literal sense, timing is important for user retention and noise reduction. Sounds obvious, I know. Since animation is still a budding UX consideration I think it’s worth addressing. Mobile technology is providing affordances in these digital spaces and making our wildest ideas possible (without the use of Flash). We have to be careful to not include animations that don’t make sense. It’s not about the “wow” factor, it’s about the story are we telling, the emotion are we trying to convey. Be careful not to beat your users over the head with flashy animation that takes a long time to load.

As designers we should be aware of how long it takes to perceive motion. If it’s too fast it becomes noisy and distracting; too slow becomes annoying to wait for. Avoid getting too deep into glitter and sparkle early on. The experience should be delightful but it should also be functional. As my own rule of thumb, I’ve been creating transitions that are between 0.5 - 2 seconds long. Transitions should orient but not at the expense of a user waiting. Simple gestures and clue’s will more often suffice in orienting.

The example on the left takes about 4 seconds to load up while the one on the right is about half the time. Neither is incorrect but the difference should be noted.

Some final thoughts

These are merely considerations and thoughts on something that I find exciting. The merger of digital and physical worlds is just insanely cool to think about. Not only are we doing this with the devices in our home and on the go but also in a virtual world as well. It makes sense for us to start trying to use time and space and the affordances of animation to make the digital products we create “feel” seamless.

As with all design decisions, ask yourself, “Why?”. Just because we can make something bounce or flair out with ellipses doesn’t mean it makes sense in the context of the brand or the usability of the product. We also can’t animate every button without having a purpose to the life we give it. What is the motivation? Form follows function, and you must consider what function the animation is serving. Are you rewarding users with a delightful badge after they complete 10,000 steps? Is the purpose to orient users to their next point of interest in a user flow? Perhaps they are flipping a switch with heavy implications and so the switch could “feel” heavy. Or maybe it’s to help users understand the functionality of a certain interaction.

It’s becoming more apparent that we want to bridge the gap between digital and physical experiences. Considering how motion can help you create a friction free digital ecosystem in the physical sense will add to the blurring of those lines. Motion design is more than making things exciting and beautiful through motion. It is creating a “feel” we are accustomed to in reality and that is important.