How to Use Micro-interactions to Boost Your App’s Engagement

By Maciej Urban
How To Use Micro-interactions To Boost Your App’s Engagement

This week’s blog post comes from Maciej from Whalla Labs (@WhallaLabs), mobile development company. Learn everything you need to know about app micro-interactions to increase your app engagement.


Are you about to launch a brand new mobile app? Let’s make a quick checklist: great idea? Of course. Perfect information architecture? Checked. Bugs? None. Beautiful design? Yes. App Store Optimization (ASO)? Prepared. Micro-interactions?

Wait, what?

Micro-interactions are a hot topic lately and you’ve probably heard of them. But if you have not, I’m glad that you came here, because I’m going to save your app from a total failure.

In a nutshell, they are single engagements around common features like clicking the like or favourite button, changing settings, filling forms or taking any other action.

Their work is either to keep you engaged or to inform you that something actually have happened (or is about to happen), so you know exactly the outcome of what you did in the app.

Why does it actually matter?

If you think you’ve designed micro-interactions well already, I’m still glad you’re here.

As there are over 1.5 million apps in Apple Store and another 1.6 million of them in Google Play, you have to bare in mind that every detail of your mobile product matter.

While great features will give you the downloads, this isn’t the tricky part of creating a successful app.

If you have made users to open your app more than once that’s already a big deal, as many apps struggle with user’s retention. To fight with that it is best to engage them and the details are a great part of it. It’s better to think about micro-interactions a little longer before you launch your app, and putting it into a sea full of sharks.

iOS_animated_clock.gif (iOS icon of watch change it’s clock hands to show the current time (Image source))

Those little details are often being forgotten in the design process, that’s understandable. We are designing in macro scale, thinking about big problems and big solutions.

We fill our apps with great features that will make user’s life better, but we can’t do this if using our app is not a pleasure. Of course no one is downloading an app because using it is only fun, without bringing any value or solving the user’s pain points.

Great quote to bare in mind is the one by Charles Eames:

“The details are not the details. They make the design.”

What are micro-interactions (and why are they important)

So what are these little details called micro-interactions?

They are small pieces of functionality in your app. They are not listed as features, but combined with them, they provide great user experience.

They are working with and around main features of your app to engage and serve users, and as long as everything is working great they are often being overlooked.

Spotify_microinteraction.png (Example of micro-interaction in Spotify app)

For example, look at this little pop-up that Spotify shows when you try to add the same song to one playlist.

It’s not listed as a Spotify’s feature, no one is talking about it widely and you will forget about this message right after you close it.

But what if Spotify designers didn’t think about this little micro-interaction? Probably you would end up listening to the same song 10 times on one playlist (unless you want to, then just click “add anyway”).

If you were unfamiliar with the term micro-interaction at the beginning, you have probably started to understand that you have already designed them in your apps. You just didn’t know the word.

Now as you know what it is all about, let’s take a closer look at how it works.

How do micro-interactions work?

To design micro-interactions that add value to your product you have to understand how they work. I will use Dan Safer model, who wrote the whole book about them.

microinteraction_structure.png (Image source)

The structure of well designed micro-interactions is made of four elements:

  • Trigger which defines what starts an interaction, for example a message that arrives to your phone.
  • Rules which are defining what happens when trigger turns on. For example, after the message arrives, telephone should play a sound.
  • Feedback is the part when we see how the micro-interaction works.
  • Loops & Modes - modes help us gather information from our user, for example to pick a city to check the weather, and loops are describing how long the interaction goes.

mailchimp_high_five.png (Great example of loops is the Mailchimp’s high five turning red after clicking on it too many times)

This little model helps to understand our little friends called micro-interactions.

They are just words for the things that are quite common while we design our app, but naming them and tearing micro-interactions apart to the smaller pieces will help us understand them more and design them better.

Designing perfect micro-interactions

As you already know what micro-interactions are and how they work, it’s time to get busy and design them. I won’t tell you how to design specific interaction for your app, as they can be strictly specific to what your app is about, but I will give you some tips.

Design with purpose

As I wrote I can’t help you directly with your app because I don’t know what your app is about and how it looks. While designing micro-interactions it is important to create them specifically for your app.

They have to be designed with purpose, so think about your app and about your future user. Decide how the micro-interaction should look like and how should it work. Well designed micro-interaction will engage your user and will make using your app a pleasure.

Of course, you can dig some ideas from internet and other apps but remember not to copy them.

Add a human touch to your app

Another important thing while designing micro-interactions is that they are perfect to make your app look more human.

It’s a popular trend nowadays and it’s totally understandable. People like to be spoken to in a human way. For example, a lot of micro-interactions are messages. Try to write them as simple and directly as you can. Look how Apple handles it:

Siri_microinteraction.jpg (If you tell Siri to remind you about something “tomorrow” after midnight, it’ll double check if you actually meant today or tomorrow)

Make it fun to use

Remember this weird last part of micro-interaction called Loops & Modes? It’s time to make it useful.

I have showed you an example of Mailchimp as it was a funny and well designed detail. Loops in micro-interactions will make your app even more friendly. Think what can happen if the user make the same action for the 1st or 101st time and use long loops to make your app more interesting.

You can even connect multiple micro-interactions into a long chains, but don’t make it to complex.

Or make it less boring

People often forget about that every app has a boring moments sometimes. For example, when user has to wait for something.

A lot of things can happen in the background but user is still waiting for the result with no information from the app. Let the user know what is happening, as people are curious creatures.

Look at this little loading bar I’ve made:

loading_bar_microinteraction.png (Inform the user what is happening or how long it will take. Don’t make him wait motionless)

Keep it small and simple

Micro-interactions are supposed to be micro. Don’t make them too big.

They should be a little details that work around main features, so most people won’t even notice them as long as they work. But what happens if they don’t and people go crazy about your micro-interaction?

Then you can call yourself a winner.

Signature moment

Perfectly designed micro-interaction creates a signature moment. If you’ve achieved that it can become something even more recognizable than your own brand.

Keep in mind that signature moment can itself attract users to your application, so try to achieve them by creating unique micro-interactions. Just don’t make everything about it.

Maybe they will even make a movie about it, like they did with AOL inbox alert in “You’ve Got Mail” movie.

Let’s make your app perfect

In this post I gave you the basics to start designing (or redesigning) your micro-interactions.

Just remember about how micro-interactions are built and those few tips I gave you. Dig through the internet to get even more inspirations and tips and remember about signature moments.

As the devil is in the details, don’t make it too complex and design them with care. One of my favourite designers, Dieter Rams, once said:

“I have always had a soft spot in my heart for the details. (…) Details are the essentials. The standard to measure quality by.”

Bare that in mind and you will make even more engaging apps, helping you to achieve higher user retention.

And as you may already know, retention is the new growth hack for mobile apps.

What do you think about micro-interactions? Do you use some in your app? Share your experience below!


Follow us: Twitter | Facebook | Google+ | LinkedIn

  app retention

Related posts

Comments