Phone

+48 884 880 380

AddressPL

Gliwice, 44-100

ul. Błogosławionego Czesława 13

AddressUK

Kemp House London, EC1V 2NX

152 - 160 City Road

Bird with cookies jar

This site uses cookies according to our privacy policy.

_The concept of micro-interaction _8 rules of micro-interactions_Why we care_Our approaches to micro-interactions _Another way_Summary
Bartosz Piekarz

What are micro-interactions, and how they influence digital products?

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.

The concept of micro-interaction 

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. 

  • Trigger initiates interactions with a user. It should be something visible, that a user can easily interact with, such as a button. It should also be predictable, so that every time, it’s initiated by a user or system, it behaves in the same way.
  • Rules define the flow of micro-interactions, so what happens once they’re triggered.
  • Feedback is a result of a micro-interaction. What’s going on in the given moment and what changes when triggering the micro-interactions.
  • Loops/Modes is used only in particular situations that disturb the normal flow of micro-interactions. Loops also have an impact on the duration of micro-interactions and the repetition of them.

8 rules of micro-interactions

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.

  1. Functionality above all
    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.
  2. Do the research
    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. 
  3. Keep it simple
    Overdesigning micro-interactions or adding too many of them on the website can be counterproductive. This also accounts for the span of the animation. It shouldn’t be too long. As an animation that will be too short, won’t be noticed by the user while too long may of it suggest the user 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.
  4. Make it long-term
    It all gets down to one point – to make these micro-interactions serve for a long time.
  5. The 12 Principles of UX in Motion
    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 Creating Usability with Motion: The UX in Motion Manifesto to discover these 12 principles.
  6. Harmony
    It may seem obvious, but match the animations with other UI elements so that they make a whole. It’ll enhance the user experience.
  7. Collect user feedback
    Opinions can help improve the product. Listen to its target users and implement changes to upgrade and optimize the animations so that they will work on every device. 
  8. Speak human
    Don’t make the animations too technical. We should 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.

Why we care

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:

  • improve navigation within the app/website/device,
  • enhance user experience and the overall quality,
  • facilitate interacting with the app/website/device,
  • provide instant feedback to a user about a completed action.

Our approaches to micro-interactions 

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.

Another way

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.

Summary

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

_

We'd like to meet and get to know you.
A short talk is the best way to understand your idea.

Call to action