How E-Motion can boost your User Experience to the next level

“People will forget what you said, people will forget what you did, but people will never forget how you made them feel.”

Maya Angelou

Emotional Design has already been a trend for a while in the design field. We see it in our everyday lives in illustrations, ad campaigns, billboards, and so on. But what about more recent technologies? How can emotional design be related to the digital products we use today? Functionality and usability are just not enough anymore.

According to designer Stefan Sagmeister, if all a design does is to solve a problem, then it will be mediocre and often bad. We need to add that extra ingredient to our designs in order to derive joy, emotions, and satisfaction from the product’s usability. That extra ingredient is motion. Motion is the bridge to telling better stories and engaging users in more human and intuitive ways. We need to remember that we design for humans, not products, and we humans are emotional beings in motion.

Motion is the superpower of Product Design

A number of different tools pushed interface animation to where it is today. Back in the day, we had expressive and limitless animation through commercial tools such as Flash. But with the arrival of new technologies such as CSS animations, Flash eventually lost its popularity and favor. Nowadays, we have a variety of tools and software in the field of animation, such as After Effects or SVGator, to name just a couple of them.

With the arrival of mobile apps, we saw an increasing influence in modern interface animation, such as the iPhone. With the iPhone, we encountered a virtual world that was perceived as physical by having digitised actions that responded to our touch. Usability was evolving and becoming natural and humanised. We currently perceive complex interactions as intuitive that almost become invisible to our reality.

Motion allows us to communicate without words. In user interface design, it’s important to guide users in a very intuitive and visual way to accomplish a specific task. By using animation and micro interactions, we can achieve this storytelling visual mapping to give the user clues and context of a certain action. We empower a comfortable extension of the human mind through the use of animations in digital products. Through motion, interfaces feel more alive and fun, which encourages a gratifying interaction.

Motion catches the eye, is more than look and feel, and adds emotion to the user experience by making your product memorable. It teaches the relationship between parts of the interface and the effectiveness of use in a certain environment. Animation is not only an accent; it stands on its own. It also invites for discovery, which leads to experimentation and a deeper understanding of what’s possible in an interface.

“A second of emotion can change the whole reality of the people who interact with a product.”
Gleb Kuznetsov

Motion is powerful; it’s part of our digital experiences and one of the most important ingredients in great interface design. Its main role is to create the visual cues necessary for letting the user know where they are and what they’re doing. It dissolves the barriers between complex tasks and intuitiveness. To animate something is to bring it to life. It adds the magic to cause and effect.

Classic Principles of Animation

Just like in ballet choreography, motion has its own rhythms and pace in order to imitate natural movements. There are a handful of established motion principles to keep in mind when bringing animated elements to life.

Animation roots are found in film and entertainment. The principles of animation were first introduced by Disney animators Ollie Johnston and Frank Thomas in their book The Illusion of Life: Disney Animation, which was first released in 1981. In this book, they examined the work of leading Disney animators and boiled their approach down to 12 basic principles of animation. Currently, these principles still apply in other areas such as motion in interface designs.

Nowadays, one of the most popular resources for animations among designers is Lottie. Does this name ring a bell to you? Lottie is a library for iOS, Android, Web, and Windows developed by Airbnb. Lottie exports animations as JSON files through an open-source After Effects extension called Bodymovin and renders them natively on mobile and on the web. Lottie got its name from Charlotte “Lotte” Reiniger, a German film director and the foremost pioneer of silhouette animation. While film animation is not the same as digital interface animation, we can rely on film animation principles in order to achieve natural and coordinated movements.

We will go through the explanation of some key motion principles for interface design to take into account when animating: Timing, Pacing, Staging, Follow-through, Secondary action, Overlapping action, and Appeal.

Timing: the control over when and for how long elements animate. In motion, time is our greatest tool. How we sculpt time can completely change the perception of an interface’s speed, properties, perception, or even mood. For example: state transitions, an item loading, or something being scrolled through—all of them have their own in crescendo and diminuendo.

Pacing: the rate of speed at which a motion happens. Every idea you are trying to communicate needs to be given the proper amount of time in order to accomplish its function. A best practice is to ease-out (start fast, end slowly) objects that are entering or gaining attention, and ease-in (start slowly, end fast) objects that are leaving and losing attention.

Staging: the motion that precedes and informs larger change. Staging prepares the viewer’s attention for what’s about to happen by having a brief pause in the movement, giving them time and directing their focus on the immediate action. Number counters are good examples of staging.

Follow-through: the demonstration of life-like aftermath of an animation. It’s the idea that certain elements connected to a body or object will continue moving after the character has stopped. We can call this second movement as micro-expressions that help us tell the difference between a main and a consequence movement expression.

Secondary action: the subtle background animations that enhance an overall scene. It can become a powerful tool for making interactions deeply satisfying, communicative, and human. Secondary action helps establish nuance and hierarchy, the same way colour, size, and weight do for text. They are excellent for giving the user additional information about their actions. Mobile finger swipe interactions and icons in buttons are good examples of this principle.

Overlapping action: the animation that takes place alongside, and implies a connection to, the primary motion. Overlapping actions give your animation a natural feel. We can compare this action to a chain effect movement in which all elements animate in the exact same way but with brief delays between them indicating that each element is distinct and interactive.

Appeal: the imbuing of characters with larger-than-life features or dramatic proportions. Appeal via animation is an often-overlooked way to differentiate your work and give it the qualities that make it memorable and familiar. With appeal you can get a bit more creative as the size, shape or movement of an object can be exaggerated beyond realism to add emphasis or interest to an object. Through this principle, you can add personality to your product.

Motion Design in a nutshell

Motion adds the missing flavour to your digital products. It greatly improves the user experience by adding a positive impact in the success of the product and brand as a whole. Good design is about telling a story, and motion can help us tell a good one by adding value through a more human and intuitive interface. Design a delightful experience, making it fun and enjoyable so your users will keep coming back for more.

Some aspects to consider when using motion in interface design:

• Make your animations subtle and natural, and don’t exaggerate. Good UI animations have a purpose; they are meaningful and functional.
• Maintain consistency within animation style. Animations should match the general style of your UI. Create a balance between elements; the more natural your animation looks, the more consistent experience it will provide across the rest of the user interface.
• Don’t oversaturate with animations. We don’t want to distract the user from the main action. Maintain quality over quantity.
• Splash screens and Onboarding screens are great for using animations. Those screens are the first touchpoint the user has with your interface. “Love at first sight” will encourage positive socialisation with the product.
• Reward the user with feedback when completing a task. Evoke positive emotional reactions by surprising them with delight. Microinteractions are great opportunities for giving creative animated feedback.
• Don’t forget about accessibility when using motion in your designs. Web Accessibility recommends ensuring the animated content is described in text form in order to allow users to access the content which benefits the visually impaired. Animations should never be the prime focus of your interface.

Time to have fun and give that extra love to your designs! What other key aspects do you consider important when using animations? Let us know your feedback in the comment section below.

Thanks for reading!