Microinteractions — when, how and why?

When most people hear the term, they might think of flashy animations, animated loading screens, headers shifting from side to side, and the list could go on endlessly. However, microinteractions are much more than mere visual elements. They are far more concrete than typical animations, and far more useful than visual movement driven by whim.

Microinteractions help users navigate an interface, making it more intuitive to use and elevating the user experience. They do this through short animations, sound effects or even haptic feedback.

If we were to define them, perhaps the best way to put it would be:

At first, this may sound complicated, but let’s take a closer look:

TRIGGER ➡ MICROINTERACTION ➡ FEEDBACK

These are the three components of a good microinteraction.

In every case, a triggering event is needed to initiate a microinteraction. The microinteraction then takes place and provides relevant feedback to the user.

A trigger can be provided by either the user or the system. However, without a trigger, we cannot speak of a microinteraction. This will become more important later when we discuss what distinguishes a microinteraction from a simple animation.

Let’s look at a practical example:

When a user hovers their mouse over a button, the button’s colour changes. In this case, the triggering event is the mouse hovering over the button. The microinteraction is the change in the button’s colour, suggesting to the user that the button can be interacted with rather than being merely a graphical element. This is the feedback.

Or imagine an email programme. You write your email, click the send button, and the system plays a swooshing sound, confirming that the email has indeed been sent.

Trigger: Clicking the send button,

Microinteraction: Swooshing sound,

Feedback: The email has been sent.

Another familiar example is when a new message arrives in an application and a red circle with a number appears on the application’s icon. In this case, the trigger is the arrival of a new email, the microinteraction is the red circle with the number, and the feedback is that a new email has arrived.

So, we can use them in many different situations, but what exactly are they?

Feedback on the system’s status:

• Loading screens (the system is loading, not frozen)

• Email sent (a swooshing sound or short animation)

• Indication of characters typed (e.g. when entering a password)

Highlighting changes:

• A checkbox being selected (visually indicating that something has been chosen)

• Toggling a switch (indicating that a different state has been set)

• New message received (a red badge with a number)

Prompting action:

• Consent required (a mandatory section is highlighted on the interface, indicating that the user cannot proceed until it has been accepted)
• Guiding users through a process (if the user waits too long during a process, indicate on the interface how they can proceed. For example, the continue button moves or changes colour.)

After all these examples, we may be able to answer the question ourselves:

What distinguishes a microinteraction from an animation?

In other words, if we animate an element simply because we think it makes the page look better, it is not a microinteraction.

Many of us surely remember the early 2000s, when enthusiastic web designers filled pages with GIF animations and so much was moving on the interface that it was difficult to make out the actual content among them. Nobody wants that, so let’s use self-indulgent animations with care!

But what about microinteractions? Can we overdo them? The short answer is yes, which is why here are some guidelines to consider when designing microinteractions.

How to design microinteractions?

• Use microinteractions purposefully; they should support the experience, not overshadow it!
• Nothing should move simply to look "cool". Aimless movement only confuses users.
• Use short, purposeful animations that convey information efficiently.
• A microinteraction is also a design element; it should fit the brand identity and form part of the design system.

And perhaps the most important rule:

Happy designing!