Micro-interactions at the service of the user experience

Due to lack of time, micro-interactions are often not taken into account in the design process. Lack of time, budget or ignorance of their possibilities, they nevertheless offer many advantages to the user experience.

 

#1 What is a micro-interaction ?

A micro-interaction results from theuser action on an element (Button, scroll, page change…).

We come across these daily micro-animations without realizing it. For example with a scroll or loading bar, a notification on social networks, or a message in your mailbox...
 

Animation by Matt Dayton – Dribbble

Micro-interactions serve to communicate what is happening on the screen, because the user must be constantly informed and guided, whether by clicking on a button, scrolling a page, adding an item to the basket or swiping a card. The same is true when a form field is not filled out and a red rule, error text or pop-in appears.
 

#2 A micro-interaction works in four steps :

  • trigger : Element that triggers the animation. This item can be user-initiated or system-initiated.
  • Rules : Determines what happens when the micro-interaction begins.
  • Feedback : Explains what is happening to the user. Everything he sees, hears or feels during the animation is feedback.
  • Loops and Modes : Determines the meta rules of the animation. What happens when the conditions of the micro-interaction change?

Their goal ?

  • Confirm an action
  • give feedback
  • Indicate the status of an action
  • Guide the user

These animations can also save space in mobile. For example, in mailboxes, by moving messages to the left or right of the screen.
They are also designed to bring the user back more than once on the interface. To eventually become a habit. A good design makes the user want to stay. But a good animation should not distract the user from the product or the main function of the interface.

At the service of the user experience

A micro-interaction makes the moment more alive, the interface more human, the action more engaging. It should not only serve to look pretty, but should have a goal, a story to tell.
She must tell what cannot be said, such as the loading time (skeleton screens, loader…) and indicate the path to follow as when changing the state of a button.
 

Animation by Aaron Iker – Dribbble

 

#3 Pedagogy above all

While an animation shows the user what to do, it shouldn't tell them what to do.
It can be used for:

  • Indicate a direction (must scroll in the page).
  • Highlight a change (eg adding an item to the basket).
  • Locate the user (when changing pages).
  • Indicate a status (validation of an action or status of a loading).
  • Underline an element (like a call to action to get more subscriptions or push a product forward).

 

Animation by Edoardo Mercati – Dribbbl- 

  • Convey information more easily (as in the case of a dashboard).

 

Animation by Eugene Olefir for Fireart Studio

  • Support the user in his choices through accentuated emotions that create a feeling. Surprise the user by using humor to encourage him to interact.

Emojis Facebook

  • Bring an identity to make the interface recognizable and reinforce the brand image.

 

 Animation by Gabriel Dzieslaw

How to use them?
In general, a micro-interaction should not be overused, don't lose the user. She must also be predictable so as not to change the user's habits too much.

Simplicity and speed
An animation should be simplified to the maximum. A good micro-interaction should not be too noticeable, but be subtle and fade away quickly.
 

Animation by Aaron Iker – Dribbble

 
As for the user, he shouldn't feel like he's wasting his time. An animation should be short while giving the user a preview of what to expect.
Several studies show that animation speed must be between 200 and 500 ms. An animation shorter than 100ms will not be visible to the human eye. While an animation longer than XNUMX second will give a feeling of latency which will annoy the user.

Of course, this speed varies according to the support and the type of animation implemented. A carousel animation will, for example, take longer on desktop than on mobile because of the distance to be covered.
Longevity
It is essential to ask the question of this animation in time. Won't its impact become negative after a while? Wouldn't an overly repetitive animation be annoying?

Avoid the effects of endless loops and too many interruptions in the course.
Before leaving
You have now understood that micro-interactions are not just details, but have an essential role to play in an interface. Vectors of a better customer experience, they lead the user to engage and encourage his return.
 

Want to animate?

Depending on your needs, here are some software to practice on:
 
For simple animations:

  • Principle
  • Framer
  • Protopia
  • Adobe XD
  • Invision Studio

For more advanced animations:

  • After Effects

 
So it's up to you!
 
 

Domitille D'ERSU, UI Designer @UX-Republic