Just as on any website, there are several components essential to a mobile app’s operation and quality: technical or functional characteristics, aesthetics and what we are calling “the details”. Micro-interactions are those details that stir emotion in the user, enhance the user experience by bringing the app to life, and even add a human touch to digital interfaces. Simply put, whenever any device (smartphone, PC, tablet, etc.) responds to an action performed by a user, it is called a micro-interaction.
They can be essential to the operation and understanding of the app, or they can be just fun and friendly.
Micro-interactions greatly contribute to the design of a positive and truly user-centred app experience.
Micro-interactions and uses
Like gamification, micro-interactions are not new.
Their use has really exploded as web interfaces have become more democratized and we’ve all got used to living with them today. Once gone, the user no longer sees the importance they have to navigating the app.
The way that they are sometimes so discreet that they go unnoticed makes micro-interactions very interesting for the user experience. Little by little, they create new ergonomic rules, new gesture habits and new reflexes. Example: Changing the colour of the hyperlink when the user clicks on it, the rollover, the on/off switch, the pull to refresh (scroll down the screen to refresh the page)…
All these examples have now become customary practice and no longer raise questions about their legitimacy. Users don’t just appreciate that they make their life easier but that they teach them tasks they’ll automatically repeat later on.
Let’s take a look at some micro-interactions which have become real trademarks of their designers. We thinking of the Windows “Start” button or Facebook’s famous “Like” that ushered in the era of social media recommendations.
Looking for the WOW! factor?
In today’s ultra-competitive world, micro-interactions can be seen as the added value that will set your app out from the crowd.
When well executed and effectively implemented they create an attractive user experience with a highly addictive and viral potential. Users will tend to use the app on a more regular basis but also recommend it by word of mouth. The aim here is also to plant a surprise with a unique and “magical” micro-interaction. This is the famous Wow Factor so sought-after by brands. When using the app, you say to yourself “this thing is wicked!”.
For example, messaging apps like Skype or iMessage show the person you’re chatting with as typing with the icon of a small grey bubble.
In the Messenger application (Facebook)’s chat window, the Like symbol grows bigger the more you press on the icon.
Used to digital interfaces, people have developed a routine way of using apps and no longer get any real pleasure out of it. With each micro-interaction comes the opportunity to reignite this feeling and distract the user. Finally, micro-interactions paint the app in a positive light and encourage user retention. For example, Apple has long understood that to make its users happy attention to detail is of the utmost importance. You can now see this on the landing page of the latest iPhone 6 Plus. When scrolling, these smartphones seem to float and change with the light. Reflections can be seen, especially on the camera sensor and on the Apple icon on the back of the iPhone.
LittleBigDetails
The title of this site speaks for itself. It gathers a whole bunch of clever, original and sometimes surprising animations and micro-interactions from mobile apps or well-known websites.
The objective: to show you these seemingly insignificant details are actually what makes a quality app.
Micro-interaction processes
Using micro-interactions in your mobile app means understanding how the processes work. They are divided into four distinct modes.
1. Trigger
As we have seen from studying Hook‘s model, many UX processes begin with a trigger. In the case of micro-interactions, it can be manual or initiated by the system. The manual trigger is for actions performed by the user (hovering over an item, clicking on a button, switch, etc.) while the system’s trigger groups together those actions initiated by the app in certain contexts, time or sensors.
Let’s take for example a meeting you attend. If you spontaneously decide to mute your smartphone, that’s a manual trigger. If you specified in your agenda that you were attending this meeting, the app might suggest activating this mode.
2. Rules
This is the set of rules determining the micro-interaction’s reaction after trigger activation. The aim is to consider all possible scenarios and to indicate what should be done in each case. Anticipation avoids mistakes and increases the chance the user will get a nice surprise.
3. Feedback
Here, the user receives feedback from the micro-interaction. The application lets you know that the request has been understood and the app will respond. This is where your imagination can run wild: various animations, text messages, pop-ups, etc…
4. Loops/Modes
The modes complement the previously established rules but only concern occasional and rare actions. For example, changing your city in Apple’s Weather application is an action that the user will almost never perform. The idea is then to hide these settings rather than display them all the time. Loops are a set of variables, such as the speed of animation, its repetition and its changes over time. Here you can choose how long a message will be displayed or how many times an animation will be repeated.
A good example is when the pop-up gives the user the chance to rate the mobile app. You can specify how often the message reappears according to the when the login is made (reminder every 72 hours, every month, at a good moment, etc.).
Ergonomic principles and techniques
Micro-interactions shouldn’t only be used for their aesthetic and attractive aspects, but to bring benefits for the user. Beyond the feeling of wonder or amazement they can inspire, they have several roles including communicating what’s going on with the app after an action has taken place. This is what Jakob Nielsen – an expert in computer ergonomics – demonstrated by studying lists of problems encountered in numerous software interfaces. Among its 10 main heuristic principles are: system status visibility, help and documentation, error prevention, aesthetics and minimalist design.
Heuristic analysis consists of inspecting each of the interfaces and judging whether or not they comply with the principles of usability as defined by Jakob Nielsen in 1994.
Even if their ergonomics and gestures are quite different from those of a web interface, the mobile interface is based on the same principles of usability. So that means the primary role of a micro-interaction is to keep the user informed. They need to know what’s going on while navigating the app and feel in control at all times as well as being able to directly visualize the result of the action they’ve just performed.
The challenge here is also to keep loading times short. Even if the application needs a certain amount of time to retrieve external elements and load them, the user does not like to wait. Their perception of time is not the same as how long it actually takes, and after 1 second, their attention span decreases and the willingness to give up creeps in. That’s when micro-interactions come into play. Adding a classic progress bar, an interactive icon, a humorous line or an illustrated animation can divert their attention and distract the user from waiting.
Good practices and attractiveness
When app development companies design a mobile application, micro-interactions are included by default but are often overlooked. The way in which they can be shown off varies completely from one designer to another. The challenge is to find the right balance by fine-tuning the details and making micro-interaction subtle yet effective. It is essential to learn about the different types of users and put yourself in their shoes.
Understanding where they are coming from before and after the application, as well as the knowing what their interests and desires are, will allow your micro-interactions to form a real emotional connection.
You also need to know how to take advantage of existing micro-interactions. The ones that have already proven to be effective can improve the user experience of your app. Be careful not to overdo it. For example, an animation can be fun at first but will soon become boring and useless with repetition.
Here are several examples of micro-interactions with completely different roles but they all serve the same purpose – to maximise the user experience.
- Indicate a status change – a download in progress.
- Encourage the user to explore the application, to perform an action (call-to-action).
- Turn boring tasks into fun tasks.
SOURCES : SCHEMA, DRIBBLE, PINTEREST
