Small details are what creates the flawless user experience. These are the details that make your website users love your online presence, or hate it. These small details are what web designers call micro interactions. They can easily be overlooked, but they are what holds the entire user experience together. So you definitely do not want to overlook micro interactions in your design.
In this article, we will cover what micro interactions are, why they are this important and how to use them properly.
Every time you interact with a product, an app or a website, you are using micro interactions in this or that form. And these small actions are crucially important because they add up to create user experience.
The trigger is what initiates a micro interaction. Triggers can be built into the system, these will occur whenever a triggering action is completed. An example of a system trigger is the sound you hear when you get a text message. There also are manual action triggers. This will be clicking an icon or a switch.
When a trigger is, well, triggered, it switches on the rules of the interaction. The rules tell the micro interaction what it can and cannot do.
Without feedback, we won’t know if the rules were engaged and if the micro interaction is working. The good example of a feedback is the vibration your smartphone makes when you put it on silent mode. The vibration lets you know that the action was triggered by you and the rules were applied correctly. If there is no vibration you immediately know something went wrong, don’t you? This is what the feedback is for.
Loops and modes are the final stages of any micro interaction. Loops determine how long the micro interaction will continue. Modes determine an uncommon action that is critical for continuing the micro interaction.
Except the obvious benefit, that is the improved user experience, there are more benefits you might want to know.
Being brief in nature, micro interactions are designed to be used repeatedly. This is why well designed microinter actions create habit loops. An action becomes a habit after it’s been done repeatedly many times. After a while users don’t even notice they perform an action you want them to perform, it becomes a habit, so they do it automatically.
Proper micro interactions are also great for increasing customer loyalty if they are designed to be a part of your particular brand. The perfect example of this will be the Facebook like button, if you remove it, users will immediately think the interface is broken.
Microinteractions have lots and lots of possible uses, let see what they are best used for.
You can significantly reduce a user’s effort with micro interactions. The awesome example here would autocomplete. It is a micro interaction that guesses the words the user is trying to find when they type each letter, this incredible micro interaction saves time and effort for the users.
Microinteractions are great for directing users’ attention to important details and changes. Small animations are especially useful here.
You should always keep the users informed about the status of their actions and the overall system you provide. Here’s an example of well used micro interaction for this very purpose - the typing indicator your friend sees when you compose your message to them in the Facebook Messenger, or any other chat.
Microinteractions are great for ensuring your users they have completed a task successfully. For instance, when a contact form has successfully sent a message it should show the user at least a checkmark, or a “sent successfully” message.
People make mistakes, it’s only human nature. Your apps and forms are not exempt to human errors, not necessarily made by the users. But users do make mistakes too. Now put yourself into your user’s place, you fill in these numerous lines in a form, only to find at the point of submission that there was an error in one of the filled lines. Excruciating and very frustrating, isn’t it? This is where a real-time inline validation micro interaction could save both the user’s time and your conversion rates. Make your interactions as clear as possible and your users will love you for it endlessly.
Don't forget to take a look at our web design WordPress themes.
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.