Using Microinteractions to Improve User Experience

Mmm.. Is it doing anything? I better click that button ag— GOD DAMN IT!”

You know that feeling. It’s just like when you accidentally hit your headphones’ cord and send them flying off your ears. Or when you get stuck behind a slow walker, and you hear the train arriving at the platform. Sheer exasperation.

Little everyday annoyances have the power to disrupt our mood in ways beyond what seems reasonable. We all have our own pet-hates. Only, sometimes, they’re actually capable of bringing a whole business down.

I have a cable TV box that takes some time to turn off after you’ve pressed the power button. I use this device every other day, and have done so for a few months now. Yet, most days I forget it takes a while to shut down and I will press the button again, after what I feel is a reasonable amount of time. As you’ll have guessed, what usually happens is that I do so just as it has finally shut down and so I inadvertently turn it back on. And the cycle repeats.

Luckily, while it’s hard to avoid slow walkers or flying headphones, technology has a way to minimise the chances of putting you through these little moments of frustration and uncertainty: microinteractions.

microinteractions - how animation can help improving user experience
Cloudeon – a client of Matrix Internet’s – has several good examples of microinteractions on their website

What are Microinteractions?

Microinteractions let users seamlessly get feedback on their actions. They are a way to reassure, guide and engage users, and help ensure their experience on the platform flows effortlessly and efficiently.

All of us are (painfully) aware of awkward silences in conversations. Most people feel the need to fill them in some way. Salespersons have long known to take advantage of this reflex by purposely allowing for these gaps, as the interlocutor will subconsciously fill them, usually with information salespersons can then work in their own advantage. But, in any other situation, allowing for gaps in a conversation can have disastrous results.

Think of microinteractions as small pieces of information that fill in conversational gaps — the awkward silences. They acknowledge the users’ actions and provide them with an appropriate answer.

microinteractions on menus keep the user engaged
Animations on menus keep users engaged and help them understand your sitemap

A common form of these microinteractions is animations. Visual cues provide users with an implicit confirmation and understanding of their actions, and they know what to expect as a result. If done right, whether through a simple loading icon or more complex animations such as associative or hierarchy-based transitions, microinteractions can make using a platform not only seamless but also fun.

It’s the little things that bring user interfaces to life. If you are able to create a simple, compelling user experience you will be able to engage your users while reinforcing your own brand identity.

Visual rewards can even contribute to feeding what’s called the habit loop — the process that explains habit formation. Overdo it, though, and you end up getting in the way of a users’ flow of actions.

Microinteractions should be simple and pass the test of time: your user should feel as comfortable seeing it for the first time as they will on the 10th or the 100th time. The trick is to keep it simple and quick — ‘less is more’ is a never out-of-fashion motto.

Features are undoubtedly important, but it’s in the details that your platform can either make it or break it. Those “little everyday annoyances” can easily grow out of proportion and hinder overall engagement and usability.

Remember my cable TV box? A simple blinking state, activated when pressing the power button on the remote and held while it was powering off, would suffice to let me know I had indeed pressed the button hard enough; it would show an acknowledgment of my command. Countless pre-bedtime exasperation episodes would have been avoided, and I certainly wouldn’t curse the poor device every time I use it.

Keep in mind an app or a website is something that takes little to no effort to find a substitute for. Are you never too sure if it is loading or you just failed to press the button? Do you always get lost on that top menu? Back to Google’s search result page.

expandable collapsible menu animation - microinteractions in user experience
A top-menu that responds to the user’s navigation on the page. Notice how it slightly expands and collapses, taking cues from the scrolling movement.

Microinteractions have been a big trend in the past couple of years and will continue to be so in years to come. But if, as a user, they were something you hadn’t really given much thought to before reading this article, that might actually not be a bad thing. It probably means that, most times you used a platform that adheres to usability best practices, your user experience was seamless — and that means microinteractions were doing their duty.

Mastering it is hard work, but invaluable when it comes to its potential return. It takes craft and expertise to know what’s relevant and what’s clutter, and how much is too much. There are a number of ways you can improve a website’s or app’s UI and UX — this is just the tip of the iceberg. But no matter what you do, please, please don’t send people off to bed in a bad mood. Just add a blinking state.

Spread the love