Microinteractions are contained inside every feature, website or app. But we never notice them because they gel so well with the environment. They are meant to be like that. The likes, the emojis, muting a device, rating an app- these are microinteractions that elevate the user experience.
What are UI microinteractions?
Microinteractions are the small user interactivities taking place on the website or applications that greatly improve the user experience. Sometimes, these are barely noticeable. But, it definitely takes the user interactivity to the next level. The Facebook LIKE, the preloader icon interaction, or the ON toggle switch- all these are fine examples of microinteractions.
The four parts/components in a microinteraction are:
1. Trigger
This is to start the microinteraction. This can be initiated by the user or the system itself.
2. Rule
This is used to determine what happens when a microinteraction is started.
3. Feedback
This is the part where the user gets to know the result of the microinteraction through visual, vibration or audio or combination of them.
4. Loops and Modes
This determines the rules for the microinteractions when the conditions change or not.
Interested in microinteractions?
Let us see the basic rules you need to follow when designing the microinteractions.
Rules For Microintercation Design
1. Microinteraction Usage Limits-
Do not go overboard trying to fit the microinteractions everywhere on the application. Keep it less and simple. Like in a Hangout chat, 3 dots keep moving when someone is typing. On Facebook, you even get the message ‘a friend is writing a comment’ if that function occurs when you wish to comment on a post.
2. Microinteraction Function-
A microinteraction has to be strictly used for a functional purpose. In almost every e-commerce website, if you add an item to your cart, the cart icon on top gets overlapped with the number ‘1’ meaning that one item has been added to your cart. This is a fine example of functional microinteraction where the buyer is informed of the count of items in the cart through it.
3. Microinteraction Intent-
A microinteraction has to entertain the user and not irritate or distract them. The user should not get puzzled and think about what that microinteraction was for. It has to bring a smile on the user every time he visits the page. Like in Facebook wherein balloons and confetti get released when you comment ‘Congratulations’ on any post.
4. Microinteraction Designing-
It has to seamlessly merge with the page elements. The design and style have to support your product and its perception. The toggle for a ‘Yes’ or ‘No’ is a good example of this. The toggle goes green if it is a ‘Yes’. This type of microinteraction fits into any page design.
5. Microinteraction Merging-
Fit in the microinteraction in the existing parts of your app or website. Do not make changes on the page just to introduce the microinteraction. A fine example is fitting a microinteraction when your screen is getting loaded. An innovative yet simple minimalistic preloader microinteraction can replace the boring hourglass or spinner design.
6. Microinteraction Engagement-
Use human emotions in microinteractions to get engagement. Take, for instance, various emojis that have attained a cult status in online messaging. Facebook and Instagram ‘Like’ is also a fine example of microinteraction that pleases the user.
7. Microinteraction Usage-
Insert microinteractions when it could benefit the users. The best example here is when your password text box transitions from red to green as you keep typing a strong acceptable password.
8. Microinteraction Norms-
Do not try to play with the norm when you insert microinteractions. Do not confuse the viewer. Like if the green color is associated with a YES and red with a NO, do not reverse the normal color when using it in a microinteraction. It will deviate the viewers from the function of the microinteraction and this is something that you do not want on your website.
Conclusion
Microinteractions are meant to elevate the user experience and take it to another level. It helps you to engage your potential customers in a subtle yet interesting way.
So, do you want your website to have some interesting microinteractions?
Consult us to build your website and include microinteractions that generate user interest.