Micro-Interaction Examples: 14 Ways to Optimize Your UX

In his book “Microinteractions: Designing with Details,” Dan Saffer breaks down micro-interactions into four parts: trigger, rule, feedback, and loops and modes.

How do micro-interactions work?

1. Trigger

The trigger initiates the interaction. It can be user-initiated (clicking, swiping) or system-initiated (when certain conditions are met, like completing a task).

2. Rule

The rule determines the action that follows a trigger. What happens after a user clicks an icon? The rule must be logical and predictable for the user.

3. Feedback

Feedback keeps users updated about what’s happening. A classic example is inline form validation: a red border for an error and a green one for success.

4. Loops and Modes

Loops and modes define the micro-interaction's meta-rules. A loop determines how long an interaction continues (e.g., a loading spinner), while a mode is a setting that remains until changed (e.g., dark mode).

Successful Micro-Interaction Examples

Progress Bars in Checklists

Progress bars set user expectations for a process's duration and encourage completion. As users get closer to the end, their motivation to finish increases. This is a powerful tool in onboarding flows.

Password Error Feedback

Subtly alerting a user about a password requirement they missed—without forcing them to resubmit the entire form—is a great example of user-respectful design. It saves time and reduces frustration.

Tooltips in Onboarding

Tooltips provide contextual help exactly when and where a user needs it. They are less intrusive than pop-up modals and are perfect for guiding users through a new interface without overwhelming them.