Image for post
Image for post
Illustration by Frank Rapacciuolo

Boost your design by micro-interactions

How to design details and animations within your app

Frank Rapacciuolo
Feb 6, 2016 · 5 min read

Everyday millions of people interact with a smartphone and perform different actions: enter the password to sign in to a social network, turn off the volume, press the button like, etc …Each of these actions is a micro-interaction.

A few days ago I was testing with a friend on Facebook Messenger and I discovered something wonderful. I wanted to send a “like” (thumbs up) and I accidentally pressed the button for an extra few instants. I found out that, if the button is held down, the icon becomes larger and larger until you take your finger off the screen. I stayed there for a few minutes to repeat the operation several times, it was too funny. I was pretty dazed.

Image for post
Image for post
Thumbs up di Facebook Messenger

This animation is a good example of micro-interaction, because it fulfills three important functions:

  • Communicating status and providing feedback

These are functions of a micro-interaction according to Dan Saffer, the author of Microinteractions.

What exactly is a micro-interaction?

It is a user action that triggers another action by the device. Technically it consists of:

  • Trigger: the start of micro-interaction, when the user presses the button.

Mobile users interact with two key design elements: features and details. The features attract people to use the product, the details are what thrills them. Using micro-interactions, you can turn something boring and lifeless into something fun and playful. The dream of every designer is an app that works well, with no bugs and easy to use, and with more attention to details and micro-interactions the app can be perfect.

Another good example of micro-interaction that struck me is the Google Chrome refresh.

Image for post
Image for post
Pull to refresh action, Google Chrome. Animation by Chris Lee

With this type of interaction is easy and intuitive to refresh the page. It is the continuation of a natural gesture that we do instinctively which is dragging down the screen. In this case, there are two other actions: “add window” and “close window” , that represent the actions that we need when we use a browser.

Besides the useful features, there is one factor that we must always keep in mind when designing a micro-interaction: the game factor. It is so pleasant to add a new window or close it, it seems almost like I’m playing with it. Try it, it will affect you in the same way!

Loren Brichter, the creator of the “pull to refresh” interaction, says:
“Why make the user stops scrolling, lift their finger, then tap a button? Why not have them continue the gesture that they are already in the process of making? When I want to see newer stuff, I scroll up. I know I made the gesture scrolling itself.”

How to design micro-interactions?

Making micro-interactions is exciting for designers, because it is possible to experiment new design solutions and look for new ways to surprise the users. But for doing it you must keep in mind a few things :

  • Put yourself in the users shoes and use all that you have to figure out how they use your app.

Another interesting example of micro-interaction is the selection of the genre within the Beats app (now Music).

Image for post
Image for post
Genres selection, Beats

In the Beats app, it is possible to select a genre in a fun way without being bored, making the selection like a game. In this way, you can imagine what’s going on. When the circle is pressed, genre is selected. At the bottom a “next” button appears that allows you to continue to the next step. Around the user avatar appears a progress bar that indicates the exact progress on the initial tour. Usually, the users tends to skip the steps of the onboarding without even reading what is written.

This micro-interaction captures the user’s attention and guides him through the various steps of the tour. At the same time, he is in the middle of a pleasant experience.

Conclusion

I was always attracted by the well-designed app with a functional and pleasant design. If you combine these ingredients with the micro-interactions you can create the perfect product because on one hand you draw the user’s attention, on the other you generate pleasant emotions.

The details are the design. Charles Eames

Some animations that inspire me:

Image for post
Image for post
Float Label Form Interaction by Matt D. Smith
Image for post
Image for post
Pull to refresh by Michael B. Myers Jr.
Image for post
Image for post
Trello Navigation by Aurélien Salomon
Image for post
Image for post
The PartyUp App — Calendar Kreativa Studio
Image for post
Image for post
Photo Calendar for iOS by Bien Studio
Image for post
Image for post
Magic Tabs by Abhinav Chhikara

Resources : Microinteractions book (Dan Saffer)

Thanks for reading!

_
Who am I? I’m product designer at
Musixmatch. On a mission to make products attractive, functional and simple to use. Dribbble Twitter Linkedin

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Frank Rapacciuolo

Written by

Product Designer @Musixmatch https://dribbble.com/frankiefreesbie

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Frank Rapacciuolo

Written by

Product Designer @Musixmatch https://dribbble.com/frankiefreesbie

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store