#Design

Micro interactions: added value for the user experience

Luca Maraschio
agosto 2024 - 6 minuti

Mum always told us: ‘You can’t judge a book by its cover’.

However, that is exactly what we designers have to do every day.

When we approach the design of a website or any digital application, that is precisely the aim, to make the cover of our book as beautiful and attractive as possible in the eyes of the user, through the reorganisation of content, design elements, user flow design and all the weapons we have in our holster.

And now who tells Mum that our books are judged by their covers?

Often, however, we find ourselves browsing a website, changing pages, clicking here and there only to find ourselves saying, ‘how boring’. Actually, there is a way to avoid this: create movement.

So, green light to the use of animations and, in particular, micro-interactions.

What are micro-interactions?

Micro-interactions are single-element events that have a single purpose: to engage the user in order to offer a satisfying user experience that does not make them abandon navigation in the short term. We can find them in websites, applications and devices in general.

Put simply, micro-interactions are all those design elements we find on a website that, when activated, give us visual or other feedback .

Let us look at some concrete examples:

So these are visual acrobatics for their own sake?

How nice, everything moves!

Are micro-interactions just nice to look at? Absolutely not.

As we said before, micro-interactions are meant to improve the user experience and bring concrete pluses to our digital products by making our ‘covers’ more interactive.

OK, but concretely why should the client invest in creating a digital product that involves the design and study of these elements?

We explain it to you in 6 simple reasons:

  • They give control through instant feedback ;
  • they offer the user ‘invisible’ guidance;
  • they make the user experience much more rewarding;
  • they improve navigation on the site, app or any other digital interface;
  • greatly increase the likelihood of conversion;
  • encourage sharing, commenting or liking of content.

Just imagine a user browsing a website where, upon clicking a button, absolutely nothing happens. He would probably wait a few seconds and then, annoyed, abandon it.

Circumstances like this happen when, once the button has been clicked, the site loads a new page but the user is not put in a position to receive this message. Probably by adding a simple loader, a loading bar or any other feedback, the user would easily understand the loading status and consequently stay on the site instead of abandoning it.

So, as you may have guessed, micro-interactions, besides being aesthetically pleasing and engaging, have the primary purpose of providing information about what is happening.

The question one must always ask oneself before deciding whether or not to insert a micro-interaction is: are we adding meaning?

If the answer is ‘no’ then we are going the wrong way, animation for its own sake makes little sense and could prove counterproductive.

What characterises a micro-interaction?

According to Dan Saffer, micro-interactions consist of four main components:

1.Trigger: this is the starting point of the micro-interaction, it allows the user to engage if the user wishes. It can be the click of the mouse, passing the pointer over an element, swiping in a direction on touch devices , etc. There can be two different types of trigger:

  • System triggers: when a condition is automatically verified by the system. For example, when a notification is received.
  • Manual trigger : when the user interacts with the system. For example the ‘Slide to Unlock’ of mobile phones;

Rules: define what is to happen once the trigger has been triggered;

3.Feedback: informs the user about what is happening in response to the triggerand provides information about the state they are in;

4.Loop: defines how long the micro-interaction should last and whether it needs to be repeated.

Ultimately, micro-interactions should be our best friends and travelling companions when defining the UX in our projects but, above all, they are ahuman-centred design concept.

So, Mum, you finally understood what I do… I restore books!