We use our phones and computers daily – for flipping through articles, swiping up on Instagram stories or texting our friends via Facebook Messenger. Most of us don’t realize that we’re engaging with micro-interactions just by performing such trivial tasks. They’re everywhere, implemented by designers, in each well-designed device, app, website and feature.
In this article, I’ll talk about micro-interactions – what are they, why are they important in this digital world and how they influence the finished product. Also, I’m going to share our experience on how UX/UI designers know when and where to implement motion to support usability and what tools we use. Also, I’ll talk a bit about our cooperation with developers.
Trigger-feedback pairs called micro-interactions are used to encourage a user to interact with something, make the interaction more rewarding or keep a user informed about some action – they provide visual feedback of sort.
It’s what user sees, feels or hears – it may be a sound effect after performing some action, such as the notification sound on chat window on Messenger when we send our text, a subtle animation after double-tapping to like a picture on Instagram or a simple swipe or loading screen. Entering log user data can also be a great example of micro-interaction. These design elements serve only one purpose – to make the user experience as engaging and natural as possible.
When should we use them? As UX/UI designers, we strive to make any interaction simple and pleasing. Hence, we may apply them in swipe action, to show current status or when a user enters log data.
Knowing that, let’s talk about its structure. There are four parts of effective micro-interactions – trigger, rules, feedback, loops and 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 visual feedback after a particular activity or help prevent any errors. Hence, the guidelines on how to create effective micro-interactions. Those rules determine how those interactions should be done.
In this part of the article, I’ll discuss what we should pay attention to while building micro-interactions and provide you with useful tips so that they are well-designed and practical. What are the rules of micro-interaction?
The whole point in creating micro-interactions is to minimize the gap between user expectations and experience. All their actions should feel as natural and intuitive as possible.
Who are the target users? What do we know about them? Collecting the data will facilitate the whole process and help in creating tailored solutions.
Overdesigning micro-interactions or adding too many of them to the website can be counterproductive. This also accounts for the animation span – it shouldn’t be too long or too short. An animation that will be too short won’t be noticed by the user, while too long may suggest that something is wrong with the given product. One way or another, it may frustrate and annoy the user rather than be helpful and enjoyable.
It all gets down to one point – to make micro-interactions everlasting.
The article about designing usability with a motion by Issara Willenskomer applies to every animation, and that’s why we also add it to our micro-interactions rules list.
Read this article here.
It may seem obvious, but match the animations with other UI elements so that they make a whole. It’ll enhance the user experience and keep the users engaged.
Opinions from real customers can help improve the product. Listen to the target users and collect feedback. Then, evaluate what you find insightful and implement changes to upgrade and optimize the animations to work on every device. Boosting user engagement is what you’re working towards.
Don’t make the animations too technical. Keep in mind that we’re making them for people. Thus, micro-interactions should be easy on the eye and uncomplicated, but at the same time, they should guide the user through your digital product.
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. A micro-interaction is an incredibly efficient process that allows generating great solutions – it meets user needs in recognition and improves the UX by making the UI less machine and more human-centred.
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 somehow, 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, open platform animations. For this, we use LottieFiles, which is an Android, iOS, React Native and Web open platform 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, we first 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 so that there wouldn’t be any misunderstandings.
Sometimes developers create part of a micro-interaction, especially when it requires minor code changes, such as changing a colour button. There are also times when developers do all the work. We provide them with visuals, so how the animations should look like and all the necessary information, e.g., making 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 the end-users perceive the product. A micro-interaction lets the user know what will happen, what’s happening or what happened when using the device. That’s why micro-interactions should be created with proper attention and taking into consideration all those 8 rules.
Of course, we only touched basics of the subject since there’s so much more to say about it. But our goal in this blog post was to show you their importance in every app, website, and device. For me, a product designer, the attention to detail is as significant as anything else. Thanks to well-created micro-interactions, the user experience is smooth and enjoyable. Because that’s how effective micro-interaction works – it provides instant gratification for some performed action.
Interested in our designs? Check out our Dribbble profile.
Editor’s note: We’ve originally published this post in November 2020 and updated it for comprehensiveness.
Are you interested?