We use our phones and computers daily – for flipping through articles, swiping up on Instagram stories or texting our friends via Messenger. What most of us don’t realize is that we’re engaging with micro-interactions just by performing such trivial tasks. They’re everywhere, in each well-designed device, app, website and feature.
In this article, I’m going to talk about what are micro-interactions, why are they important and how they influence the finished product. Also, I’m going to use our experience to tell you how do we know when and where to implement motion to support usability, what tools we use, and again, a bit about our cooperation with developers.
Micro-interaction is used to encourage a user to interact with something or make the interaction more rewarding. It’s a sound effect after performing some action, such as the notification sound on Messenger when we send our text, a subtle animation after double-tapping to like a picture on Instagram or the way something appears or disappears on the screen. These design elements serve only one purpose – to make the user experience as engaging and natural as possible.
Knowing that, let’s talk about its structure. There are four parts of micro-interactions – trigger, rules, feedback, and loops/modes.
Movement in any digital product should be natural and easy to predict by the user. Poorly done animation can quickly destroy the way we perceive the app. On the other hand, when there’s a small, almost insignificant animation, but it’s well designed and is in the right place, it can enhance the reception of a product and guide the user to perform some action. Moreover, it can also provide the user with feedback after a particular activity was carried out or help to prevent any errors.
In this part of the article, I’ll discuss what should we pay attention to while building micro-interactions and provide you with useful tips so that they are not only well-designed but also practical.
Learn more about UI/UX design from our newsletter. Sign up now and treat yourself with some Gorrion’s dose of knowledge.
Now, let’s talk about why we bother about these small design elements. For us, well-designed micro-interactions distinguish unique devices and apps from ordinary ones. They not only show the user the quality of a given product but also improve its overall functioning.
Micro-interaction transitions add creativity to the product. Apart from loading the page, there can be many tricks to make this action more enjoyable. For example, interactions on hover – every clickable element may react in some way, but we can go a step further and make the most of it. For instance, the icon can change the colour; it can also move or bounce. It’s so simple, and yet, it makes the user experience more rewarding and makes the product more emotional.
Let’s see what are the other benefits of well-designed subtle animations, as they also:
When there’s a lack of time or budget, we use ready-to-use animations. For this, we use LottieFiles, which is an Android, iOS, React Native and Web library. It facilitated our collaboration with developers since it also acts as a plugin and allows us to export our animations from After Effects to Lottie JSON, that’s to code form. Thanks to this, the quality of the animation is much better on the website without adding extra KB.
When it comes to animations that we create, the first thing we do is consult developers about our idea, if it’s doable (mostly, it’s the case of whether or not we fit into a project budget). When we get a green light, we get to work. If not, we talk it through and try to find a solution. Sometimes, we simplify the animation – the quality stays the same, but it’s easier to implement. The last stage is exporting the animation to the code form and sending it to the developer along with how it should look like so that there wouldn’t be any misunderstandings.
Sometimes developers create part of micro-interactions, especially when it requires some minor changes in code, such as the change of a color button. There are also times when developers do all the work, and we provide them with visuals, so how the animations should look like and all the necessary information, e.g. to make the movement more natural. And then, by constant communication and giving feedback, we refine the animation.
As you can see, micro-interactions are everywhere, and they play a vital role in how we, as end-users receipt the product. Of course, we only touched the basis of the subject, since there’s so much more to say about it. But our goal in this blog post was to show you the importance of them in every app, website and device. For us, the attention to details is as significant as anything else. Thanks to well-created micro-interactions, our experience is smooth and enjoyable.
Interested in seeing our designs? Check out our Dribbble profile.
Are you interested?