Microinteractions in UX: The art of subtlety

If you’re reading this from your laptop or mobile device then you would have come into contact with multiple microinteractions in order to get to this point. It is likely that you didn’t notice every one — and that’s the point. Microinteractions are designed to be subtle, yet engaging with the power to create a seamless user experience. They are single-purpose events found all over devices and apps which transform the mundane and tedious into the spellbinding, creating moments that are engaging, welcoming, and above all, memorable.

Microinteractions are useful because they provide feedback to the user by letting them know the status of an interaction, like a loading bar for instance. Helping users see direct, real-time results of their interactions enhance the sense of direct manipulation which users respond favourably to — when they press a button they immediately know an action has been triggered, giving a sense of control.

How they work

The mechanics of microinteractions can be broken down into 4 parts: trigger, rules, feedback, and loops and modes.

• Trigger: this is what initiates microinteractions and are often presented as a floating icon which encourages the user to swipe, click, tap, scroll or pull. Triggers come in the form of either a user-initiated trigger or a system-initiated trigger (where the system detects a particular operation is met which then initiates a reaction).

• Rules: this determines the actions taken by the system once a microinteraction is triggered. The success of this is based on how natural it feels for the user — if the action is jarring the entire purpose is lost.

• Feedback: this lets the user know precisely what is happening once the microinteraction has been triggered. This usually appears as a loading bar, colour-fill of an icon or basic icon animation. Anything a user sees or hears during a microinteraction is considered feedback.

• Loops and modes: this determines the specific principles of the microinteraction, for instance, the length of its display. Microinteractions may change over time so each one has its own set of loops and modes.

Why they matter

The most significant element of microinteractions is that they exist solely for the benefit and enjoyment of the user. When businesses pamper and put customers first, they create an experience so enjoyable that they will keep coming back for more. The same applies to the digital realm. Attention to detail is what transforms an ordinary website or application into a memorable one. And microinteractions are playful, fun, and engaging ways to do this.

But how exactly do they benefit the user and create memorable experiences? In many subtle and creative ways, it turns out. First off, microinteractions make it easier for users to navigate and interact their way through a website which already adds ease and comfort. They keep users constantly informed and updated through information relevant to their actions (in the form of tips and helpful hints), which increases the time they spend on a page. When users are forced to actively seek out information it annoys them tremendously and prompts them to turn to another source. Retaining the attention of users is fundamental in any digital interaction. Microinteractions provide users with helpful, engaging and unique experiences which create an emotional connection to the information and the brand as a whole.

Due to the immediate feedback created by microinteractions, users begin to slowly learn how to work with the system. This is done in subtle ways as to not come across preachy or heavy-handed. It has to be fun and simple, after all.

How to properly use them

The most important thing to keep in mind when designing microinteractions is the K.I.S.S. principle — Keep It Simple, Silly! Users are bombarded with microinteractions every day on every device and application, so the trick is to lessen the clutter of each interaction. If they are too complicated it could easily lead to frustration for the user. The sweet spot when it comes to microinteraction design is to add value and meaning rather than gimmicks.

The best interactions often go by unnoticed because they link seamlessly with the user’s interaction with a website or application. Here, consistency is critical. Each microinteraction needs to fit into the overall design and also be noticeable (interactive) enough to give enjoyment to the user. They need to follow similar rules and patterns within the chosen overall theme. Unexpected surprises will come across as jarring and unfamiliar and negatively affect the user experience.

One of the most simple, yet effective microinteractions that consistently saves the user time and makes a site easier to use is the auto-fill functionality for forms. It’s been around a while now and aren’t we glad it is. Having said that, there are still ways that you can’t avoid, like filling in payment details. But there are ways to remove the tedium from the task. For example in Basecamp, when you’re filling in your form you can hear the typical chimes of overly boring ‘elevator’ music playing, and as soon as you’re done a bell rings. Using humour to help the tedious tasks along makes the user experience memorable.

Another smart little idea we’ve seen recently has borrowed the right/left swipe from Tinder and it’s pretty great!

This interaction allows you to swipe right to move through your login process and gives a little rattle when your input isn’t correct. The immediateness takes the frustration from clicking submit form only to be alerted to errors by a big red X, as the screen returns to the original form. Another helpful tip is to combine short, sharp, and powerful copy to microinteractions for greater impact.

A few microinteraction design best practices

It is important to remember when designing microinteractions that each one needs to have a purpose. This may seem elementary but it is easy to get creatively carried away at times, mostly because they are just so damn cool to create. Never lose sight of the purpose of the micro-interaction — that is to provide meaning and relevance for the user.

Don’t be annoying. Bombarding users with too many microinteractions, or designing them to be complicated or too irreverent will have the opposite effect of why you created them in the first place. Users don’t want to be annoyed (duh!) so keep it simple, engaging and subtle.

If it’s possible to do something in one step then adding an additional step to make your microinteraction work isn’t good for the user. Even if you think it makes the engagement more fun, it doesn’t. It just wastes time.

Conclusion

Microinteractions are powerhouses of communication with users tied into small packages. They are great ways to engage with them in fun, dynamic and meaningful ways. They are impressive because they provide delight for the user which increases their engagement with the content and establishes an emotional connection through subtle yet effective ways.

If you are considering building your own app, go ahead and make your user experience unique by including some micro-interactions in your design. But be careful, it takes thoughtful and precise design to gain the full benefits from micro-interactions. Above all, don’t forget to K.I.S.S.!

Microinteractions are beginning to get macro-interest in the awards sphere so here’s a little link to the Awwwards current nominees, with some microinteractions examples. Some are just simply brilliant!

Martijn Hinfelaar

Previous story

Waterfall vs Agile vs Scrum: What’s the difference?

Next story

Paula takes us on a deep dive into her passion for underwater exploration