UI/UX Design Microinteractions

A microinteraction is a small, single-purpose moment inside a product. The heart icon that fills with color when you tap it is one. The pull-to-refresh spinner is another. Microinteractions rarely take more than a second, yet they shape how a product feels. Polished ones create delight; missing ones make an interface feel dead.

The Four Parts of a Microinteraction

Designer Dan Saffer describes every microinteraction through four parts.

 TRIGGER  →  RULES  →  FEEDBACK  →  LOOPS AND MODES

Example: the Like button

 TRIGGER   User taps the heart
 RULES     Toggle like on; add one to the count
 FEEDBACK  Heart fills red, small burst, count updates
 LOOPS     Tap again to remove; reset after 24 hours of no change

Trigger

A trigger starts the action. Manual triggers come from the user, such as a tap or swipe. System triggers come from the product, such as a low-battery warning.

Rules

Rules define what happens once the trigger fires. They keep the interaction simple and predictable.

Feedback

Feedback tells the user that the action worked. Color change, sound, vibration, or motion can carry the message.

Loops and Modes

Loops decide how long the interaction runs and whether it repeats. Modes change the behavior under special conditions, such as a different layout in offline mode.

Where Microinteractions Help

• Confirming actions: A button changes to a checkmark after saving.
• Showing status: A progress ring fills while a file uploads.
• Preventing errors: A password field shows strength as you type.
• Guiding attention: A subtle bounce draws the eye to a new feature.
• Adding personality: A friendly animation greets users on a completed task.

Example: A Password Strength Meter

User types:  p
[█░░░░░░░░░]  Weak     Add more characters

User types:  pass1234
[████░░░░░░]  Fair     Add a symbol or capital letter

User types:  Pass#1234!Sun
[██████████]  Strong   Looks good

The meter replaces a long rule list with a live signal. The user improves the password while typing and never sees an error message after submitting.

Example: Toggle Switch

OFF STATE            DURING (150 ms)        ON STATE
[ o      ]           [   o    ]             [      o ]
 gray track           knob slides            green track
                      track fades            "On" label

Timing and Motion Guidelines

• Keep most microinteractions between 100 and 500 milliseconds
• Use easing so motion starts and stops smoothly
• Match the motion to the meaning: a delete action slides away, a save action settles in place
• Respect the "reduce motion" setting for users who feel dizzy with animation

Rules for Good Microinteractions

Serve a Purpose

Ask what the microinteraction communicates. If it communicates nothing, remove it.

Stay Subtle

Users complete the same action hundreds of times. A flashy animation that charms on day one irritates on day thirty.

Remain Consistent

Similar actions deserve similar feedback across the product. A system of motion patterns builds trust.

Keep It Fast

Feedback that lags behind the action feels broken. Respond within 100 milliseconds for direct manipulation.

Documenting Microinteractions

Write a short spec for each: trigger, rules, feedback, duration, and easing curve. Attach a short prototype clip. Developers then build the exact behavior without guesswork.

Key Points

• A microinteraction is a small, purposeful moment with four parts: trigger, rules, feedback, loops
• Good ones confirm actions, show status, and prevent errors
• Subtle, fast, and consistent beats flashy
• Always honor reduced-motion preferences
• Document timing and behavior for developers