You’re probably convinced that you don’t know what the term “microinteraction” means. If you think of computers and other devices, you’re right. However, it is not only the developers who are in contact with them, but also you. Every computer user, phone user or just anyone using a smart device has certainly had the opportunity to see or hear at least one of them.
They significantly improve the user experience and allow you to stand out from the competition. Therefore, the message to all IT professionals and designers is to include them in their software applications.
Here’s what it’s all about.
When you download a document from the Internet, you are usually shown a circle with a number of percentages as a sign of how long you have to wait to have it on your account. Then, if you type a new password for your Gmail account, the system will give you feedback whether it’s weak or strong, or if you’re missing a number to make it valid. When you turn on a computer or phone that was shutdown, you usually hear a short tone. And there are many more examples.
These are all microinteractions.
Microinteractions help differentiate you from the competition
Microinteractions can be defined as events that have two main goals in relation to the user:
Providing information about the current state of the system
- They improve navigation through the site/application
- They facilitate interaction with the content of the site
- They provide information about the completion of an action or show that its execution is in progress
- They give recommendations to users
- They encourage sharing, liking and commenting on content
- They direct the user’s attention
Providing a unique experience while using a device.
Well-designed microinteractions are an indicator of commitment to user experience. They are the icing on the cake, without which, nowadays, it is impossible to stand out from the competition. Often, it is microinteractions that contribute to brand building, because users memory is about the sound and the image.
Despite these important features, some developers and designers do not include microinteractions in their programs, not realizing that this can negatively affect current and future customers. Especially in an era of ever-increasing competition when details make the difference between an ordinary and advanced website or application.
Microinteractions usually consist of several elements:
- Triggers – trigger a microinteraction. They can be initiated by the user or the system.
- Rules – determine what happens after a microinteraction is triggered.
- Feedback – informs the user about the state of the system. It can be text or sound.
- Modes of operation – what happens to the microinteraction when conditions change.
Microinteractions – examples
When we pointed out at the beginning of the text that all users of smart devices encounter them every day, that’s exactly what we meant. Now we will prove it through examples.
Swipe
The use of a phone, tablet or similar device is unthinkable without the so-called – swipes. It allows easy and smooth movement through the content, while providing a pleasant feeling for the user. It is an action that we often do without thinking, because it does not require effort, on the contrary – it is fun.
Data entry indicator
Creating an account on an app? Want to subscribe to Netflix? It is mandatory to enter personal data and password. Imagine that you have entered all the data and only after confirmation the system “tells” you that something is missing or not good? To prevent this from happening, there are microinteractions that immediately tell you whether the code is strong enough, whether a capital letter or number is missing, or how many digits need to be entered.
Animations
Anything that moves and has bright colors creates dynamism in the system and provides a better user experience. For example, after you pass a level in a game or complete a task, the system can display an animation congratulating you on your success. Whether it’s a jumping unicorn, clapping hands, or some sound – the microinteraction communicates the message and ensures to evoke an emotion in the user.
Indicators of the current state of the system
As we mentioned, microinteractions show at which stage the implementation of some action taken by the user is. If you add a document (upload) to your inbox on Facebook or to an email, the system shows you how long you should wait until the document is ready to be sent.
Restoring the previous state
How many times has the undo option “saved” you so far? Something clicked by accident? Entered the wrong information? Just go back to the previous state by clicking undo. What does it look like when microinteractions are turned on? For example, if you mistakenly “liked” a picture on Instagram, you can cancel this activity by identically clicking on the “heart”, which will then enlarge and slightly “shake”.
A call to action
Microinteractions encourage the user to take some action. For example, if you want to change a photo on an application, the system will offer you the option to add it from the device’s gallery or to take a new photo. This falls into the realm of mixtointeractions as these options can be displayed with motion or sound.
How to design microinteractions
Microinteractions can be challenging and exciting for designers as they are always looking for a new, creative solution that will delight their users. But in order to avoid mistakes and counter-effects, here is what you should pay attention to:
- Put yourself in the user’s shoes and when creating a microinteraction, keep in mind where, when and why someone is using your app.
- Entertain users and evoke emotion – how a user feels when using an app is what brings them back to use it again and again. Whether you will use dynamic music, bright colors or something else – it depends on the emotion you want to evoke.
- Don’t overdo it – you shouldn’t cross the line of good taste or go overboard trying to animate the user because you’ll annoy them. If it takes a long time for the microinteraction to complete, or if you repeat it several times, be sure to cause a counter-effect.
- Use human language, not technical language – the goal is for users to understand you. If text messaging is part of your microinteraction, make sure it’s in a language that all users understand.
Tools for designing microinteractions
There are many tools for designing microinteractions. Here we will list which ones are best for specific areas.
If you are familiar with coding:
Mobile: Xcode, Android studio
Mobile or Web: Framer
Web: CSS Animation
If you want to create more detailed interactions:
Adobe CC, Origami Studio and Protopie
If you want to create detailed interactions + animation:
Adobe After Effects
Key notes
- Microinteractions are different design solutions that include visual and auditory elements through which a smart device or application communicates with the user.
- Microinteractions communicate with the user by indicating his next action, but also improve his entire experience with the application.
- Examples of microinteractions are: swiping, data entry indicators, reverting to the previous state, animations, indicators of the current state of the system, calls to action.
- They also affect the positioning of the brand, because microinteractions can be the icing on the cake that will help differentiate it from the competition.
