Tasks! Tasks! Tasks! Our lives are filled with them. Getting out of bed (arrgh!!). Getting to work in horrifying traffic that has an illusion of moving! (double arghhh!!). And just when your brain is sucked into the different sensory events calling for your attention, you miss the most important one and end up almost being hit by a car. Happened to me today and I have only my brain to thank for still being alive! A split second reaction to a small event saved my life! It was small but important. A micro intervention that was triggered by my mental faculties at just the right time ensured my survival in a dangerous situation.
Micro-interactions are all around us. Our peripheral vision is highly tuned to detect these in our environment as a result of millions of years of evolution designed to make us really good at detecting even tiny amount of movement in our surrounding environment. Whether it's about our survival in the real world or the virtual world of games, micro-interactions are an integral part of both these worlds. Your success in first-person shooter game banks on your ability to detect even small amounts of motion in the scene and take a decision about whether to hide or shoot!From a UX standpoint, interaction design forms a subset with enough weight to have professionals engaged only for this part of a design job. Interaction design takes care of how a user “interacts” with a specific product or service.
Why are micro animations a good thing?
Animations have been a part of UX since the early days. I for one love graphics, special effects and sci-fi movies but I can’t stand painful flash animation on websites. Thank heavens, the days of painful flash animations and the ‘to-install-flash player-or-not’ dilemma are gone. Animations have finally ditched Flash (for the most part) to embrace the future. Long and painful animations have been replaced by small and intuitive animations. These micro animations play the role of acknowledgment, feedback, visualizing the results and rewarding the user interacting with the interface. Even though it entails minute details, they are essential for motivating the user to interact with the interface more often as a lot of animations give real-time feedback. Micro animations are little things that make us come back to the products we love, humanizing the products and making it more enjoyable to use.
So, what are the mechanics of micro animation
According to Dan Saffer, micro animations are made up of five elements:
A “Trigger” is a process that is either generated by a user or the system itself. Manual triggers invoke micro animations when a user takes an action on the interface whereas system-generated triggers are invoked automatically when a specific condition is met.
Rules are a set of parameters that a micro interaction adheres to. They define what happens after a trigger is performed. It takes care of what can and cannot be done. For example, in Material design when a field is tapped, the color and label get highlighted to showcase that the field is active and ready to go. One of the most common micro animations is the field error message that informs a user about incorrect data. Without those pesky little callouts our form filling experience would be quite painful and error-prone.
Feedback is one of the most essential components of micro-interactions. It is extremely important to let the users know that their action has been acknowledged. There have been multiple times that I have come across buttons, which failed to let to me know if I had clicked them or not. Feedback can be extremely simple, a visual cue or an auditory ting.
A loop determines the length of a micro animation. It also determines whether a micro animation repeats itself or varies over time. A simple example would be a loader, it will repeat itself every time the system or app is fetching for data to serve to the user.
Yea! Micro animations are pretty cool. But don't get carried away.
In the example above, the micro animation is way too complex and its highly unlikely that a user will be able to decipher all that is going on. The scroll interaction has an unnecessary 3D flip that adds very little to what is being conveyed to the user. The transformation of the edit icon is also jarring. However, the components that do require the user’s attention and are important to complete his task have not been given the required amount of prominence and are getting lost in all of the unnecessary movement on the screen.
Needless to say, the key to a good micro animation lies in being “Micro”. A good micro animation shouldn't last more than 0.3 to 0.5 secs. It’s ideal to stick to this timeline but not mandatory. Some micro animations like a file upload that are real-time can take their own sweet time as they are dependant on external factors like the internet, file size, etc. However, the challenge lies in how you can keep the user engaged even during this waiting time.
I think Airbnb has done a splendid job with its micro animations. Users love it when the app does the heavy lifting of guiding them (without being too boring!). I mean look at this adorable guy, who would mind clicking their selfie after this! The entire journey of becoming a host on Airbnb has been crafted extremely well making the experience quite a bit of fun.
From a physiological standpoint, micro-interactions of our facial muscles are the cornerstone of conveying and understanding human emotion. So it's no surprise to see that using micro animations adds a whole new dimension to capturing and conveying the complexity and nuance of human emotions on digital platforms.
The overarching goal of micro animation is to support and enhance a digital experience. It is a kind of communication medium. A medium that facilitates a more coherent dialogue between the user and the interface. A language that is almost invisible and yet something that would be immediately conspicuous by its absence. And that my friend is the key.