You’ve developed an app that looks impressive, has an interesting story, and stunning visual design. However, all this is not enough – more is needed, something that would be truly close to people and create the feeling of something alive. The function of this something is successfully performed by microinteractions – the secret ingredient of applications to which users come back again and again.
Thoughtful microinteractions, these “micro-moments” contribute to the engagement of the audience and at the same time remain almost invisible to the majority, only designers notice them.
You encounter them every day: whenever you skip a song in your music player, turn off the alarm (and see a text message on the screen), on your morning commute to work, when you change direction based on traffic messages. Each of these moments forms microinteractions, most likely, you do not even think about them, but these nuances are the reason why you continue to use this or that application.
What are microinteractions?
A task-oriented action performed in relation to a device – this definition can be matched to the word microinteraction. As Dan Saffer (a well-known personality in the field of microinteractions) notes in his book on this subject, microinteractions serve three functions:
- Feedback or feedback
- Action result visualization
- Assistance in performing certain manipulations on the screen
Slack is a great app that has all three features in its interface. With its help, people exchange messages in the chat, attach documents. Updates occur in real time (messages are marked as read). Navigation is simplified. There are notifications and a number of other options that allow you to synchronously establish contact with colleagues.
Microinteractions manifest themselves in an application in different ways:
- Turn something on or off;
- Comments;
- Change settings;
- Viewing a message or notification;
- Scrolling down on the mobile device screen to update content;
- Interacting with data, such as viewing the weather;
- Communication between several devices: games in multiplayer mode, or printing from a laptop;
- “Like” photo or video on the site.
In other words, microinteraction is a single action by a user that provokes another action on an electronic device. All interactions are based on the concept of human-centered design, where digital tools display various user manipulations. This is the secret sauce for a dish like usability – interactions that behave as expected.
The example posted above is a prototype website for finding female models. Under the image of a project participant, information about her parameters is indicated – height, weight, etc. When you hover the cursor, her business card is downloaded. For this scenario, the necessary information is displayed through microinteraction without any hesitation. Animation makes a digital object more visible, and user actions are displayed as if it were a physical object.
But what exactly do interactions do?
As already mentioned, microinteractions have different functions. But to summarize, you can say that they should always provoke involvement. It is worth considering them not only as support for specific tasks / actions, but in the general context of interaction experience, as one of the components of UX design. In essence, microinteractions should leave the feeling that the user has performed a physical action:
- Touched the screen
- Smiled happily
- Studied or understood anything
- Contacted other users
In the example above, the Elevate application. Here, all three aspects Saffer writes about are implemented in the training interface. In a playful style. The user clicks on the screen, answering a question or correcting answers, the click is accompanied by animation. The application acts as an intelligent trainer (this game mobile app developers dallas is designed to improve grammar). Users can share their ratings with others. Everything looks simple, doesn’t it? And this is exactly the kind of UX expected from almost every application. As noted in Mobile Design Trends 2015 & 2020, these subtle digital moments are perceived as emotional connections. Microinteractions create a sense of physical contact, allow you to feel something, touch a digital object, and establish a connection with the user.
The four elements of microinteraction
In his book, Saffer describes a four-stage structure, and this is perhaps the best way to understand how microinteractions are created.
- Trigger. Initiates microinteractions. For example, clicking the heart-shaped icon adds the item to your favorites.
- Melted. How microinteractions behave. The user cannot “see” the rules, but only understand them through feedback or feedback (next point).
- Feedback. A way to communicate microinteractions to the user. The heart icon changes color and vibrates, which is accompanied by a message informing the user about what happened, and soon this inscription disappears from the screen.
- Links of one chain. The length of the microinteraction is determined and how it repeats itself over time. For example, the described microinteraction subsequently displays content from the “favorites” page and may even recall six months later, when the page was “like”.
All the steps described are presented in each microinteraction, thereby creating a repetitive cycle. According to Saffer, most users hardly ever notice this until something goes wrong.
Take feedback into account
Feedback is the most important part of the microinteraction cycle. The feedback determines exactly how the microinteractions will work. This is a certain point of intersection between the user and the interface. Imagine the following situation, you need to wake up at 7 am and you set the appropriate time on the alarm clock. What happens when the alarm rings? You get up and turn off, or snooze to sleep for a few more minutes. In other words, you tell the application what will happen next – what the next microinteraction will be: will the alarm go off tomorrow (already within the next cycle) or will it ring in 9 minutes. The feedback loop is closed. Without user intervention, the alarm will never stop ringing.
The to-do list in the Wunderlist app works in a similar way. By checking the box next to the element, the user tells the application that the action should be deleted from the list. A quick glance at the list reveals what has already been done and what is yet to come. The pleasure received by the user from the completed task stimulates him to further activities, thus increasing the level of involvement. This is a fairly simple example. The main thing that can be learned from the case is that users need such interactions, from which the next step naturally follows.
Details of microinteractions
The way microinteractions are developed and in particular the details become defining. What should you pay attention to?
- Microinteractions must withstand the test of time. It is worth avoiding unnecessary effects and animation solely for the sake of clarity. It is imperative that microinteractions do not disappoint the people who encounter them frequently.
- Simplicity is key. Uncomplicated language, crisp typography, vibrant colors, structured design. Do a good job on the fundamentals and don’t add redundant details.
- Microinteractions are designed for the user: the text should be readable, the design should provoke emotions.
- Pay attention to copyright. Relevance and information content is important here. Choose a suitable tone so that the text has a noticeable respect for the reader.
- Moderation is appropriate in animation. Think about what happens in OS X when you install new software. Animation informs about the availability of a new program, but at the same time it does not interfere with the current work. Try to make your animation as useful as it is not only about the visual side, but also factors such as color theory. No detail should be out of context.
- Think about how microinteractions might develop over time. Do microinteractions behave the same the first time and the thousandth time? Remember how with each click on the snooze button in the alarm clock, the volume of the signal increases. These nuances must be taken into account in order for the application to stand out from the development of competing firms.
An overly complicated design will only harm the successful development of mobile applications. The signal sent to the user – in the form of animation or something else – should be replaced by a smooth return to normal mode. Microinteractions are the main component of the application, they promote engagement and improve functionality. These tiny moments’ people usually don’t notice, but it is thanks to them that the application becomes an important element of life.
, on your morning commute to work, when you change direction based on traffic messages. ){kind=link}