With 5G and new technologies like augmented reality emerging, it’s obvious that the time we spend online will exponentially grow. We are already replacing many real-life activities with a few clicks here and there (food delivery anyone?), and we can expect more of it in the future.
Over the years, the way we interact with our devices changed. Animations took place over static images and made the user experience more alive and a bridge between the online and offline worlds. Is it a good thing in the long run? There are pro and con arguments, but either way mobile and web developers will have hands full of work to satisfy our expectations.
The Power of Instant Gratification
The reason we became so addicted to our devices is their usefulness and the fact that we are human beings with the desire for satisfaction without delay known as instant gratification. It’s not a new concept, but instant gratification in combination with having everything at our fingertips is. Need a ride? Few clicks, and there’s an Uber waiting for you. We binge-watch TV series on Netflix on a lazy Saturday night and order a dinner of our choice to accompany it.
In one way, this sounds like we’ve become lazy tl;dr generation, fulfilling our immediate needs clicking on our devices. In other ways, it gives some sense of control over our technology - if we as consumers are more demanding, businesses are more creative in the ways they fulfill our needs, inspiring their competition to do the same. More than ever, we can give instant feedback to the companies whose products we are using, and in some way be in control to shape the products instead of using only what’s available. Typing our complaints or praises is also a form of instant gratification.
The abovementioned act of ordering food on a Saturday night can trigger instant satisfaction or disappointment. How so? When we are going to the process of ordering our food, we are unconsciously triggering four neurotransmitters responsible for our happiness and wellbeing: dopamine, oxytocin, serotonin, and endorphins.
You can generate these hormones in different ways, but what they have in common is that they get our mental juices going via human touch. Through physical touch, these neurotransmitters can do wonders: boost the immune system and lower blood pressure, inspire positive thinking and expand trust, and reduce social anxiety and stress.
But the benefits of touch go beyond the interaction with another human being. On a daily basis, we make many little interactions with our devices, known as microinteractions, which simulate the brain in the same way as physical touch with another human. We make these interactions without even thinking about it. They include swiping left and right on a message, answering the phone call, scrolling up and down, receiving and opening the notification, all the little ways we’re fulfilling our instant gratification needs.
In the process of ordering the food, you will also go through a set of microinteractions: open the app, select the restaurant, scroll to find the food you want to order, choose it, enter the address, choose the paying option, etc. If these interactions are implemented properly, you will feel satisfaction simply by using the app.
How do Microinteractions Work?
Depending on how they are implemented, microinteractions can trigger unconscious positive or negative feelings in people about the website or application they are consuming at the given moment. When implemented properly, the user will feel positive about your product. This is known as the halo effect when a user favors one product over the other due to negative experience with other products’ aspects, and it can play both against and for you:
If users like one aspect of something, they will have positive feelings toward everything about it. If users dislike one aspect of something, they will have negative feelings toward everything about it.
Like many other interactions with our devices, microinteractions are used to give some feedback to the user and satisfy the human tendency to expect a response when pressing on a button, accept or refuse a call, etc. Even the fact that we as humans can manipulate something within the tech is exciting and stimulating for our minds because at every moment users want to know what happens when an action is performed.
Microinteractions and animations take something static and add the appearance of visible change. This provides us with a tangible and familiar context, which makes our perception of software more intuitive, discoverable, emotive, and recognizable.
In the process of implementation of microinteractions, you should implement them in a subtle way - you don’t need animation on every step in the way, because that would overwhelm the user. Remember that functional interaction should be a priority over a visually catchy one. The best option is to combine the two.
Making an Online World More Like the Real One
When microinteractions are implemented in the right way, they are making the online world more similar to the real one, and animated interactions bring life to an online world. They are improving user’s feedback on your application or website, and leave your users feeling satisfied. For example, when a user swipes to unlock the screen, the stimulus paired with the interaction causes the satisfaction of completed action.
Up until now, creating interactive content that would bring the online world to a user wasn’t an easy task. There was no middle ground, and you had to choose - a quality file which slows down the website or application, or smaller file size which reduces quality - either good quality video that consumes space and slows down performance or faster to load GIFs that have low quality, or animation made through CSS that have limitations in what you can make.
This changed with Lottie, a JSON-based animation file format exported from Adobe Effects, that can be used in your website or application that brings user interfaces closer to reality, without using a single line of code.
Introducing the Lottie file.
Lottie animations are lightweight, much smaller than GIFs, but better in quality. Also, they are more versatile than animations you can make using CSS. They work on any device and can scale up or down without pixelation. Open-source and free Lottie players exist for the web, iOS, Android, Windows, QT, Tizen, and other platforms.
One successful example of Lottie implementation is the Belgium beer company, which tested Lottie animations for 12 months and, according to data, their conversion ratio increased by an incredible 25% (source).
Microinteractions and animations play a big part in how we are using our devices today. User expectations are changing quickly, and we are doing our best to deliver. With Lottie animations, it’s easier now than ever to make animations a part of user experience, without sacrificing speed and quality.
