Emotional Animation in UX — why, when and how to design it
While you and your team design a new product, a small feature, or just change the color of a CTA, how often do you remember yourself that in front of the monitor there will be a human being interacting with it? A human-user with his own personality and feeling, a certain amount of available time, eyes diopter or just a bad day on his shoulders!
Actually, emotional animations are one of the main elements used to establish a better response with your users. Due to their characteristics, they could highly increase the emphatic connection with your users and even surprise them with a positive feeling. While you are using an interactive product you are entertained by an element in motion, consciously or not, your feeling is that the brand cares about you as a customer.
Unfortunately, nowadays we cannot always say that entertainment has a positive meaning. For instance, you could think about thousands of apps trying to surprise you at first sight. They show noisy onboarding screens which interrupt you. So, you try to skip them because at that moment you do not want to see how fancy their products are: your need is to use an app and not being disturbed.
By the way, it is of huge importance to design your UX as a real story that humans should live in their real life. As in real life a story should start in a context, be orchestrated by actions, have a climax and an epilogues: That is why in Billie we decided to increase our users’ dopamine levels, as Facebook does with notifications, for example, giving them good news not only via copy but also with a visual effect! Once they have finished their profile tasks they’ll get their rewards: their Billie Limit.
Another UX journey we decided to make more interesting, transparent and eyes catching is the invoice scraping moment. By receiving a visual recognition of what the system is doing in that specific moment, our users can rely on Billie and enjoy those 5 seconds not only passively waiting.
Tips to build an Emotional Animation
TOOL TO USE
If you use Sketch to design the visual result of your UX project (your UI mockups) I totally recommend the easy-to-learn and to-use Anima Plugin.
All you have to do is install it, drink your coffee and spend some hours checking and trying Anima Tutorials to learn how to build an Interaction Design or, in our case, an “Animation that cannot be interacted with, it simply play themselves ;)”.
But why Anima is so cool to use? Because you have the possibility to export your animation in GIF, improving significantly the communication when delivering your amazing design to your Frontend team. Besides, you can export your artwork in codes, giving exactly the perfect values in terms of speediness, delay, duration etc, being sure that all your effort designing the perfect animation will be useful because your team will follow specific numbers.
HOW TO BUILD
Following the principle “Yes, your product is virtual, but your users are Humans” remember always to design an element in motion with real-life motion-principles.
If you open a bottle of Prosecco the pressure of the cap will be extremely intense in the beginning, while it will proportionally decrease because the cap will be attracted by the gravity to the nearest surface. This means that you should figure out the main steps (keyframes) that your object will move through, define a specific duration (the duration is also the speed of your object) and define how it should behave during the curve:
Takeaway:
- Yes, humans have needs and problems to solve -that’s why they use your platform, but also emotions. We are a visual population and we like and prefer amusement moments.
- Dopamine makes people happy, and as a consequence, a happy user will be a locked-in user.
- Emotional animation increases the emphatic connection and brand reliability.
- Finally, it is not always a good moment for fireworks or flashy shapes. You should remember to design your UX based on storytelling. Then with critic’s eyes, you should pick out all climax moments and epilogues. These are sensational moments for your animation!
