Boost your design by micro-interactions
How to design details and animations within your app
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.
This animation is a good example of micro-interaction, because it fulfills three important functions:
- Communicating status and providing feedback
- Enhancing the sense of direct manipulation
- Helping people to see the results of their actions
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.
- Rules: the way in which the interaction behaves.
- Feedback: how design communicates the micro-interaction to the user.
- Loops: determine how long the micro-interaction goes on if it repeats, and how it changes over time.
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.
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.
- Create functional animations. Animations which have not only an aesthetic but which are able to enhance the user experience.
- Have fun and entertain your users. What the user feels when he uses the app is the reason behind the fact that he keeps using it. If the user enjoys the experience and finds it pleasant, he returns.
- Do not be annoying. Too many animations have the opposite effect on users. Annoying users make them stay away from your app.
- Use a human language and non-technical. A funny and ironic copy can make you forget for a moment how frustrating it might be a blank page within the app.
Another interesting example of micro-interaction is the selection of the genre within the Beats app (now Music).
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:
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
