According to Dan Saffer, author of Microinteractions: Designing with Details:

"A microinteraction is a simple interaction which triggers after a certain condition and makes the user do a certain action. Depending on the user’s decision, it closes or triggers another action."

The primary aim of a microinteraction is to enrich the web experience by supporting, informing and alerting users.

There are some key principles for UX designers looking to use them to maximum effect. First, they should be simple and efficient – so that they achieve a lot with only a few actions. Second, they should incorporate user-friendly language to encourage interaction. But, most crucial of all, the microinteractions should integrate into the site seamlessly.

According to Saffer, a microinteraction consists of 4 stages: trigger, rule, feedback and loop.

To visualise this process, we can compare it to your alarm clock mobile app:

• The trigger for this interaction would be the time – as this operates the whole app
• The rule would be the time set, the ringtone and the volume of the alert
• The feedback will be the option to snooze or to switch off the alarm entirely
• The loop repeats the whole micro-interaction again – depending whether the user resets it

Not all heroes wear capes

In many cases, microinteractions make tedious tasks bearable.

UX researchers report that users hate filling in online forms. And one that’s badly designed just adds insult to injury. Regularly, users experience a faded “submit” button at the end of a form. This is because they entered the wrong information and if the error message is poorly designed, the form may not even flag mistakes – as shown below.

However, a well thought-out form highlights the error and improves the experience by saving the user time (see below).

‍

Another way microinteractions benefit us is when we’re creating passwords. It’s already difficult enough to think up an intricate password, but when microinteractions are neglected, this process can become overcomplicated. In the example below, microinteractions have been ignored and the error message doesn’t offer a solution – leaving the user confused and frustrated.

In this next example, the microinteractions make the user's life easier by supporting password creation. The blue dots below the password field switch on and off as the password meets the requirements and notifies the user what variables are missing.

Fun and games

Microinteractions aren’t always about admin either. They can also introduce fun, humorous elements to your site – especially when they are gamified. In the example below, the logo for the navigation app Waze is having a well-deserved nap after an exhausting trip. Gamification elements don’t usually require additional actions from the user, but they add character to the site. Small touches like this are what makes the user’s experience memorable.

Waze on sleep mode

A hidden gem

While designing microinteractions, UX designers should remember these key points:

• Simplicity is key – your interactions should be efficient and smooth
• Represent feedback – so users can see the system’s response to their actions
• In the moment – microinteractions should be prompt and displayed without delay
• User-friendly dialogue – interactions should incorporate humanistic language
• Support – the messages should be clear and avoid errors during the user’s experience
• Apply what you already know – use the same principles you use for any web product. Solve the user’s problems, make them easy to use and justified

In most cases, microinteractions are additions that require more work and sometimes go unnoticed. But do not underestimate them. It is because of these hidden heroes that your website or app could gain a loyal fan base.

‍