How to use microinteractions in UX design

Microinteractions are small moments where the user and design interact. When they’re well designed, micro interactions enhance the user’s experience with the design. When they’re poorly designed, they damage the experience.

microinteractions are one of the hottest UX trends right now.

Dan Saffer, author of the book Microinteractions and VP of Product for Mayfield Robotics, defines microinteractions as “contained product moments that revolve around a single use case — they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or ‘like’ something, you are engaging with a microinteraction. They are everywhere: in the devices we carry, the appliances in our house, the apps on our phones and desktops, even embedded in the environments we live and work in. Most appliances and some apps are built entirely around one microinteraction.”

According to Saffer, microinteractions are good for:
accomplishing a single task and a single task only
interacting with a single piece of data, such as the temperature or rating a song
controlling an ongoing process, such as the volume for a song on Spotify
viewing or creating a small piece of content, like a status on Facebook
turning a feature or function on or off

Microinteractions: Full Color Edition: Designing withDetails 1st Edition

We can use some Digital element:

Digital element +Reason

User triggered; visual feedback to user changing location within a page
Digital alarm:
System triggered; auditory (and visual) feedback to time condition being met
Pull-to-refresh animation:
User triggered; visual feedback to a user action
mail notification:
System triggered; provides user with feedback that a new message has arrived
Current system status:
If the users are not informed chances are that they will get annoyed and close the site or app.
Animated Button:
User triggered; visual feedback to a user action
Call to action:
Microinteractions essentially nudges the user to interact with an application or website.
It helps the user quickly switch between the tabs and acquire more information about the product.
Data input:
This action can easily raise hackles. While proactive suggestions on password strength and usage makes it easy for user to proceed ahead, some interactive interactions at the time of data input also keep users engaged with the process and help accomplish the goal.
Make tutorial interting:
Tutorials with the help of microinteraction, guides the users about working of an application by simplifying and highlighting the basic features and important controls for easy understanding.

Why we use Triggers

A Trigger initiates a microinteraction. The Rules determine what happens, while Feedback lets people know what’s happening. Loops and Modes determine the meta-rules of the microinteraction. Each part gets detailed in its own chapter in Microinteractions.

  • Encouraging engagement
  • Displaying system status
  • Providing error prevention
  • Communicating brand


The trigger engages the rules. This is what happens during the interaction and it needs to feel natural for a user.

7 reason, Why microintration improve Ux design?

1. Response time

2. Repetition

3. Simplicity

4. Relatable


6. Animation