Micro-interactions and Their Importance in UX
By Saba Aftab, Graphic Designer at Smart Marketing Group
Micro interaction can be defined as the interaction between a user and a design.
It is the reaction you see on a social media post, a notification that appears on your screen whenever you receive a new email or a message, a Skip Ad button that appears while watching a YouTube video.
Even the pull to refresh feature that appears in digital apps falls under micro-interaction.
Structure of Micro-interactions
Micro-interaction consists of four main parts: Triggers, Rule, Feedback, and Loops & Mode.
Tigger is what initiates a micro–interaction. The trigger can be initiated by a user or through a system.
An example of a user-initiated trigger is a user clicking on a Facebook like button and that button turning blue.
While an example of a machine-initiated Trigger is whenever you receive a new email or a message notification pops on your screen.
The rule determines what will happen when a micro-interaction will be triggered. For example, the rule for the Facebook thumbs up button is clicked it will turn blue.
Feedback is what a user sees, hears, or feels when a micro-interaction takes place.
When you receive a new message your cell phone produces a small beep sound, and you receive a notification, that is Feedback.
Loops and Modes determine what will happen to the micro-interactions once their condition change.
For example, you have received an email notification and you have decided to check the email. Now when you open the email the notification will disappear, this act of disappearance is what is determined by loops and modes.
Types of Micro–interactions
With the advancement in technology, many new micro-interactions are being introduced every now and then.
Some of the fundamental micro-interactions that are being used nowadays in digital products are:
- Tap effects
- Swipe effects
- Tap and hold effects
- Scroll-into-view
- Pull-to-refresh
- Progress bar
- Errors
- Sound
- Button state changes
- Mouse over / hover effects
- Slide-in/out
- System feedback
- Page transitions
Effect of Micro-interaction in UX
A well-designed digital product consists of well–structured information architecture, good visuals, usability, well-written content, and a good user experience.
One of the things that contribute to developing and improving a good user experience is the use of the right micro-interactions.
The use of micro-interactions in any digital product makes them fun and easy to use. They can help in boosting digital product usability and intuitiveness through constant feedback like for example a user can instantly share their feedback through a like and dislike button.
Or, whenever you are registering yourself on any social media platform for the first time, directly after entering a username it tells you through a pop-up message whether the username is available or is taken.
The success of micro-interactions in UX depends on the following things:
- They should be small and simple, for example, a like, a thumbs up, or heart micro interaction in FB and twitter.
- They should be quick in grabbing user attention for a brief moment and then should fade.
An example is when we click on the heart on Twitter it turns into a red and confetti effect appear and then this effect disappears immediately grabbing our attention for nanoseconds only. - They should be predictable and should not be questioning behavioral patterns. We know that drag down action is used in our devices to refresh any social media screen.
But suppose a developer and designer decides to use this action for some other purposes like opening a pop-up. This will be questioning the set behavioral pattern in our mind and will cause confusion.
Micro–interactions let you experience the feeling aspect of any digital product. Visuals are the first driving force that directs a user to a digital product but good UX established using the right micro-interactions is what helps retain those users.
