Tap a like button and the heart fills in. Pull a list down and a spinner drops in at the top. Both of those pair one trigger with one narrowly targeted feedback response around a single task, and that pairing is what people mean by a micro-interaction. A toggle switch works the same way.
Product designers and front-end developers mostly use the pattern to show system status or head off an error. Some also use it to carry brand tone. The usual breakdown comes from Dan Saffer’s 2013 O’Reilly book, which splits it into trigger, rules, feedback, and loops and modes.
On timing, Nielsen Norman Group (2020) puts simple feedback, such as a toggle switch, at about 100 ms, which is roughly where a response starts to feel immediate.
What Are Micro-Interactions?
The trigger is either a user action or a change in system state. What comes back is a small, contextual change in the user interface, usually visual, and when a click or tap sets it off it sits close to the control that was used (Nielsen Norman Group, 2018).
That model, from Saffer’s book Microinteractions, published by O’Reilly, is the one most teams still work from.
Nielsen Norman Group’s summary of the pattern lists the same uses mentioned above, and honestly the first two do most of the work.
A scrollbar qualifies because the user triggers it and it shows position on the page. Pull-to-refresh and swipe animations qualify too. So do system-triggered ones, like an email notification or a digital alarm that sounds.
Several things look like micro-interactions and aren’t.
- GIFs, because nothing triggers them
- A video player as a whole (it is a feature, though its volume control qualifies)
- Static elements that are always on screen
- Flows made of several actions
Buttons are a gray area. One that does nothing on click isn’t a micro-interaction, and one that responds to the press is, so it depends entirely on the button.
What Are the Parts of a Micro-Interaction?
Saffer’s structure is the one O’Reilly’s catalog lists for the book. A trigger starts the thing and rules decide what happens. Feedback shows the result, and loops and modes control repetition and variation.
Trigger
A trigger comes either from the user or from the system.
- A user can start it with a GUI command, a gesture or a voice command.
- The system starts it once predetermined conditions are met. A new email arriving or an alarm time being reached both do that.
Hover works as a trigger on desktop only. If a hover effect built in CSS carries any meaning, give it a tap or focus equivalent, since touch screens have no hover state.
Rules
Rules decide what happens once the trigger fires, and users never actually see them. They work them out from the feedback.
Pull-to-refresh has a distance rule, so the list has to be pulled far enough before a release counts. eBay’s registration form has one rule per password requirement, checked as the user types (Nielsen Norman Group, 2018).
Feedback
Feedback is where the rules become visible. O’Reilly’s description of Saffer’s book lists graphics and sounds as vehicles for it, with vibrations alongside.
Whatever the channel, the question being answered is whether the system registered the action.
Loops and modes
According to O’Reilly’s listing, Saffer’s example of a loop is fetching data every 30 seconds, and modes let users set preferences or modify the micro-interaction.
A loop controls what repeats, while a mode changes how the same control behaves.
iOS gives a familiar mode example. Pressing and holding an app icon makes all the icons shake, and the home screen then waits for a delete tap or a drag (Nielsen Norman Group, 2018).
Visual, Audio and Haptic Feedback in Micro-Interactions
Most micro-interactions rely on visual feedback, with audio and haptics in a supporting role. Apple’s Human Interface Guidelines say haptics should complement the other feedback in an app, and that combining channels lets people receive feedback even when they silence a device or look away from the screen. Nielsen Norman Group describes micro-interaction feedback as usually visual.
Visual feedback
Visual is the default, since the trigger lives on a screen anyway.
On Gap.com, the favorites heart pumps briefly when a shopper taps it, and a second tap returns it to its original grey state (Nielsen Norman Group, 2018). That one short animation says the item saved and shows how to undo it.
Common visual changes include a color shift, movement, a progress indicator or an icon swap.
Color or motion on its own leaves some people out. Anyone who can’t see the change gets nothing, so the channel choice is a web accessibility decision as much as a visual one.
Audio feedback
Xbox One lights its button and plays a short, recognizable melody at startup. Nielsen Norman Group counts that sound as part of the Xbox brand (2018).
Audio suits system-initiated triggers, where the user probably isn’t watching the screen, and an alarm is the obvious case.
It falls apart on muted phones and in shared spaces, which is why it shouldn’t be the only channel.
Haptic feedback
Apple’s Human Interface Guidelines sort standard haptics by purpose. Notification haptics report the outcome of a task, such as depositing a check or unlocking a vehicle. Selection haptics fire while a value is changing, and impact haptics are a physical metaphor that complements the visual.
iOS and watchOS play them for events such as an Apple Pay confirmation or an arriving notification. People recognize them because the system plays them the same way on standard controls.
Those guidelines also say to use haptics consistently and sparingly, and to make them optional.
Custom patterns, mostly for games, go through Core Haptics.
Micro-Interaction Examples Broken Down by Part
Here are a like button, a toggle switch, pull-to-refresh, a typing indicator and a password requirements list, taken apart using Saffer’s model.
| Example | Trigger and rules | Feedback | Loops and modes |
|---|---|---|---|
| Like button | User taps or clicks. One tap registers the like, a second tap removes it | Icon fills, count changes | Long press opens a reaction picker on mobile (Facebook) |
| Toggle switch | User taps or drags. State flips between on and off | Thumb slides, track changes color | None |
| Pull-to-refresh | User pulls the list past a set distance and releases. Refresh starts | Arrow or spinner appears at the top (LinkedIn uses a circular progress indicator) | Spinner loops until the data returns |
| Typing indicator | System detects that the other person is typing | Animated dots, or a Bitmoji with a thought bubble in Snapchat | Animation loops while typing continues |
| Password requirements list (eBay) | User types in the password field. Each requirement is checked as the input changes | List updates live, red error if requirements stay unmet | Re-checks while the user types |
Facebook launched the Like button on February 9, 2009, with a Note titled “I like this” (Fast Company). It gave people a single click in place of typing approval comments.
Pull-to-refresh started in Tweetie 2. Loren Brichter had found that refreshing in Tweetie 1.0 meant scrolling to the top, then lifting a finger to tap a button, so he made the refresh part of the scroll gesture itself, as MacStories reports.
The toggle has the simplest rules in the table, with two states and one input. It’s cheap to build too, because a checkbox restyled as a toggle switch in CSS gets you the slide and the color change from a single transition.
The typing indicator is the one system-initiated row, since the viewer does nothing and the other person’s typing is the trigger.
eBay’s list heads off the error that would otherwise show up after submit. Showing requirements while the user types removes the repeat work of refilling the form (Nielsen Norman Group, 2018).
Loops and modes are optional, and the toggle gets by with neither.
When Does a Micro-Interaction Earn Its Place?
A micro-interaction earns its place by answering a question the screen would otherwise leave open, like whether an action registered or whether the system is still working. Whether something can be undone counts too. Delight alone doesn’t qualify, since Nielsen Norman Group calls motion most appropriate as subtle feedback rather than entertainment (2020).
My rule of thumb is simple. If you can state the question it answers in one line, build it, and if you can’t, skip it.
Leaving one out has a cost, and Cuisinart.com shows it. After a shopper clicks Add to cart, the cart badge changes with no animation. The badge is small and far from the button, so the change is easy to miss and the product can end up in the cart twice.
You will see secondary blogs credit Nielsen Norman Group with figures such as users staying up to 9% longer on a site or task completion rising by up to 30%. Neither comes with a link to a primary study, so neither appears here.
When to skip a micro-interaction
Motion pulls the eye whether you want it to or not. When it has nothing to do with the task, it degrades the user experience instead of supporting it.
Skip it in cases like these.
- The result is already obvious on screen
- It only fills waiting time, the kind that often frustrates usability test participants
- Several of them would fire at once
- The action repeats all day, so the animation has to get shorter and subtler
- It exists to pressure the user, like a flashing sale countdown
Hipmunk’s flight search is a good cautionary example. Its loading screen stacked a flying chipmunk, a climbing result counter, a progress bar and animated ellipses. Nielsen Norman Group judged the pile overwhelming because each animation competed with the rest.
How Long Should a Micro-Interaction Last?
According to Nielsen Norman Group (2020), simple feedback such as a checkbox or toggle lasts about 100 ms. Larger screen changes run 200 to 300 ms, and anything near 500 ms starts to drag.
There’s a reason for the 100 ms figure. At that length the response feels immediate and gives the illusion of handling the object directly.
| Context | Duration | Source |
|---|---|---|
| Simple feedback (checkbox, toggle) | About 100 ms | Nielsen Norman Group, 2020 |
| Substantial screen change (modal in) | 200 to 300 ms | Nielsen Norman Group, 2020 |
| Typical mobile transition | About 300 ms | Material Design 1 |
| Desktop animation | 150 to 200 ms | Material Design 1 |
Some design glossaries and blogs give 200 to 500 ms as the range for micro-interactions. Nielsen Norman Group sets simple feedback near 100 ms and calls 400 ms very slow, reserved for big movements across large screens.
Most of the gap comes down to distance and size. Material’s guidance says to adjust each duration to the distance travelled instead of using one number, and a toggle thumb barely moves while a modal crosses the screen.
I’d treat 200 to 500 ms as a ceiling for transitions, not a target for micro-interactions.
As of October 2026, Google’s archive labels Material Design 1, the source of the mobile and desktop rows above, as no longer maintained. Material 3 expresses motion as duration tokens, and the Material Components for Android documentation lists motionDurationShort2 at 100 ms and motionDurationMedium2 at 300 ms.
Material Design 1 also adjusts by device. Tablets run about 30% longer than mobile, so 300 ms becomes 390 ms, while wearables run about 30% shorter, which turns 300 ms into 210 ms. On mobile, transitions past 400 ms may feel too slow.
Entrances and exits do not share a duration. Nielsen Norman Group suggests 300 ms for a popup appearing and 200 to 250 ms for it disappearing, while Material’s mobile figures run 225 ms entering and 195 ms leaving.
Two independent sources point the same direction, so spec the exit separately instead of reusing the entrance value.
Material Design 1 gives CSS easing values for each direction of movement.
- Entering uses deceleration, cubic-bezier(0.0, 0.0, 0.2, 1)
- Leaving uses acceleration, cubic-bezier(0.4, 0.0, 1, 1)
- Moving between on-screen positions uses standard easing, cubic-bezier(0.4, 0.0, 0.2, 1)
Ease-out is the usual pick for most animations, and linear motion looks unnatural.
How to Design and Build a Micro-Interaction
The order below is the one I’d use for any new micro-interaction.
- Name the single task. One trigger and one response, and if the description needs an “and”, you have two micro-interactions.
- Decide who starts it, the user or the system, and check that the trigger exists on every device you support.
- Write the rules, including undo, which Nielsen Norman Group files under error prevention.
- Pick the feedback channel, then take duration and easing from the values above.
- Prototype it and test with motion on and off. Slow the animation while building so you can see what happens, then restore the real duration.
- Spec it for developers by listing each moving element, its trigger, the properties that change, the durations in milliseconds and the easing curve.
- Record it in the design system.
A compiled video doesn’t count as a spec. Developers who get one end up guessing the easing curves frame by frame, which is why Nielsen Norman Group recommends a timeline with durations in milliseconds, not frames.
Easing is what gets lost most often. Each platform writes it differently, and Material Design 1 gives the same standard curve in these forms.
- In CSS it’s cubic-bezier(0.4, 0.0, 0.2, 1)
- iOS takes control points 0.4, 0.0, 0.2, 1.0
- Android uses FastOutSlowInInterpolator
- After Effects wants outgoing velocity 40% and incoming velocity 80%
Once the micro-interaction ships, log its trigger, rules, feedback, timing and easing in the team’s design system. The next screen then reuses the behavior instead of inventing a new one.
Which tools prototype and ship micro-interactions?
The lightest tool that covers the interaction is usually the right one. For a prototype, prototyping in Figma handles most small state changes through smart animate.
- Figma’s smart animate matches layers by name and hierarchy, then animates scale, position, opacity, rotation and fill between frames.
- After Effects animations exported as JSON through Bodymovin play natively in Lottie, Airbnb’s library for Android, iOS, React Native, web and Windows.
- Rive keeps its logic in state machines, which connect animations and drive the transitions between them. Runtimes exist for the web, React, React Native, Flutter, Apple platforms, Android, Unity and Unreal.
- GSAP is a JavaScript library for scripted sequences.
- CSS transitions are the lightest option for state changes such as hover, focus and toggles.
Each has limits too. Figma’s documentation says smart animate does not support layers with drop shadows or inner shadows, or transitions between shapes, and layers that do not match between frames get a dissolve instead. CSS transitions skip elements that were just added to the DOM or just left display none, unless the CSS supplies starting values with @starting-style (MDN).
Making Micro-Interactions Accessible With Reduced Motion
Under WCAG 2.3.3, Animation from Interactions, users must be able to disable non-essential motion animation triggered by interaction. It sits at Level AAA. The standard mechanism is the prefers-reduced-motion media query, which reads the operating system’s reduce-motion setting (W3C, 2025).
Motion can trigger dizziness and nausea in people with vestibular disorders, and sometimes headaches. The W3C note on the criterion says the impact can be severe, potentially requiring bed rest to recover.
The W3C gives a few ways to meet the criterion, and any one is enough.
- Avoid unnecessary animation
- Give users a control that turns off non-essential animation triggered by interaction
- Honor the reduce-motion feature in the browser or operating system
Under the WCAG definition, motion animation creates the illusion of movement. A change of color or opacity that leaves size, shape and position alone doesn’t count.
That makes a toggle easy to adapt. Google’s Material toggle combines a sliding thumb with a color change and a fading halo (Nielsen Norman Group, 2020). In reduced-motion mode, drop the slide and the halo and keep the color change.
In code, the media feature takes the value no-preference or reduce, and browsers have supported it since January 2020, according to MDN. Writing the motion inside a reduce-motion rule is a standard use of media queries, and the W3C lists it as technique C39.
MDN’s own example swaps a scaling pulse for a slow dissolve instead of deleting the effect. That fits the setting’s wording, which says remove, reduce or replace.
JavaScript-driven animation needs its own check, listed by the W3C as technique SCR40. GSAP’s gsap.matchMedia(), added in version 3.11.0, runs setup code only while a media query matches and reverts the animations when it stops, and its documented example sets the duration to 0 when reduce motion is on.
Users turn the setting on in different places depending on the device.
- On iOS, go to Settings, Accessibility, Motion.
- Android 9 and later has it under Settings, Accessibility, Remove animations.
- On Windows 11, it’s Settings, Accessibility, Visual Effects, Animation Effects.
A blanket rule that switches off every animation also removes spinners and progress bars, the status micro-interactions users rely on. The criterion exempts motion that is needed for the function or the information, so keep those and strip the decoration.
Test each micro-interaction with the setting on, and add that check to your web accessibility checklist.
Micro-Interactions FAQ
Is it micro-interaction or microinteraction?
Both spellings name the same pattern. Dan Saffer’s book and Nielsen Norman Group’s article title use the one-word form, while many design blogs hyphenate it.
Pick one spelling and keep it consistent across a project.
Are micro-interactions the same as animations?
No. Animation is one way to deliver feedback, but a micro-interaction also needs a trigger and rules, and its feedback can be a sound or a vibration instead.
A GIF moves but is not a micro-interaction, because nothing triggers it (Nielsen Norman Group, 2018).
Do micro-interactions slow down a page?
Yes, when they are built badly. Nielsen Norman Group (2020) notes that opacity changes are computationally expensive on many platforms when many elements change at once, and Material Design 1 says complex web transitions often drop frames unless built for GPU acceleration.
Shorter durations make dropped frames less noticeable.
Can micro-interactions exist outside a screen?
Yes. Google Home shows a four-dot animation after it hears its wake phrase, signaling that it is listening (Nielsen Norman Group, 2018).
Saffer’s book also applies the model to a physical appliance, per O’Reilly’s description.
Which Micro-Interactions to Cut, Keep or Rebuild First
Start the audit with the micro-interactions that ignore the reduce-motion setting and rebuild those. Next, cut anything with no status, error or confirmation job, and retime whatever is left.
Accessibility failures go first because motion triggers nausea and migraines in people with vestibular disorders, while a slow animation only annoys. Cutting comes second since deleting a decorative effect needs no retest.
Retiming catches an easy mistake. A toggle copied from a 300 ms mobile transition runs three times longer than the 100 ms Nielsen Norman Group sets for simple feedback.
The price of this order is some brand personality, since a product left with only functional feedback reads plainer.
Timing values were checked in October 2026 against Material Design 1, which Google no longer maintains, so recheck them against Material 3 tokens before locking a design system.
Prototype the new timings first. The walkthrough on how to animate in Figma shows where duration and easing are set.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026