Rules Of Microinteractions In A Website Design

Category :Web Application

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-

web designing- microinteraction

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- 

web designing- microinteraction

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-

web designing-microinteraction

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-

web designing-microinteraction

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-

web designing-microinteraction

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-

web designing-microinteraction

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-

web designing-microinteraction

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-

web designing-microinteraction

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.   



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. 


Tags :