The Anatomy of a Micro-Interaction: Dan Saffer’s 4-Part Model

In modern digital product design, macro-interactions define the overarching user journey: onboarding, navigating complex data tables, and completing multi-step purchase checkouts. However, user satisfaction and perceived software quality are overwhelmingly determined by micro-interactions—the contained, single-purpose interactive moments that happen within and between components. When a user toggles a switch, likes a comment, types into an auto-complete search field, or dismisses a notification, they are engaging with a micro-interaction.

As codified by interaction design pioneer Dan Saffer, every micro-interaction consists of four essential, interlocking components:

• 1. The Trigger: The catalyst that initiates the micro-interaction. Triggers can be user-initiated (e.g., clicking a button, hovering over a tooltip, swiping a card, pressing a keyboard shortcut) or system-initiated (e.g., an incoming notification sound, an automated session timeout warning, an auto-save indicator triggered by inactivity).
• 2. The Rules: The underlying state machine logic that dictates how the interaction functions. What happens when the user clicks? If a form field is empty, does the button stay disabled or render inline error text? Rules govern sequencing, validation logic, and data updates. The user never sees the rules directly, but experiences them through the system’s behavior.
• 3. The Feedback: The visual, auditory, or haptic confirmation that informs the user that the rules are executing. This includes spring-animated checkmarks, button state transformations, micro-vibrations on mobile devices, or subtle audio chimes. Feedback must be instantaneous (sub-100ms) to satisfy the human perception of immediate cause and effect.
• 4. Loops and Modes: The meta-rules that govern the micro-interaction over time. A loop determines what happens if an action fails or repeats (e.g., retry back-off loops on network timeouts). A mode temporarily alters how the interface responds to inputs (e.g., switching into “Edit Mode” where clicking a table row edits inline text rather than navigating to a detail page). Modes should be used sparingly to avoid mode confusion.

The Physics of Functional Animation in Enterprise UI

Animation in enterprise software must never be decorative; it must be functional. When an interface animates gratuitously with slow, sweeping 800ms transitions, it impedes power users and induces motion sickness. Modern functional animation adheres to strict physical and timing constraints:

1. The 100ms – 300ms Duration Window

Cognitive research by Card, Moran, and Newell indicates that animations faster than 100 milliseconds are perceived as instantaneous by the human eye, while animations exceeding 300 milliseconds feel sluggish and delayed. Standard UI transitions—such as dropdown openings, modal appearances, and accordion expansions—must complete between 150ms and 250ms. Exit transitions should be faster (100ms–150ms), clearing the viewport immediately so users can continue their workflow.

2. Natural Physics Easing Curves (Cubic-Bézier)

In the physical world, objects do not accelerate or decelerate linearly. Linear animations feel robotic and artificial. Enterprise interfaces must utilize natural cubic-bezier easing curves:

• Ease-Out (Deceleration): cubic-bezier(0.0, 0.0, 0.2, 1). The element enters the screen at peak velocity and slows gracefully to a stop. Ideal for incoming modals, dropdowns, and toast notifications.
• Ease-In (Acceleration): cubic-bezier(0.4, 0.0, 1, 1). The element starts slowly and accelerates off-screen. Ideal for dismissing banners and closing drawers.
• Spring Physics: Utilizing mass, stiffness, and damping parameters rather than fixed duration curves produces organic, tactile micro-interactions that respond realistically to user velocity.

3. Accessibility and Reduced Motion (prefers-reduced-motion)

For users with vestibular disorders, motion transitions can induce vertigo and physical nausea. Enterprise design systems must respect the user’s operating system preferences via CSS media queries:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

When reduced motion is enabled, state transitions must cross-fade instantly with zero spatial displacement, preserving functional feedback without physical movement.

Frequently Asked Questions About Micro-Interactions