Dan Saffer Microinteraction Mapping

Map user triggers, system rules, dynamic feedback, and meta-loops for product features using Dan Saffer microinteraction mapping.

5 time blocks, 40 minutes in total.

Time blocks

Define the Trigger: 5 min
Identify human or system action that initiates the microinteraction
Map the Core Rules: 10 min
Outline exact logic, sequence, and parameters governing the response
Design the Feedback: 10 min
Detail visual, auditory, or haptic cues confirming state changes
Set Loops and Modes: 10 min
Establish long-term behavior rules, counters, and special modal states
Review Microinteraction Flow: 5 min
Walk through trigger to feedback cycle to catch edge cases

About this routine

Product designer Dan Saffer introduced a structured framework for defining functional details in digital products. Rather than sketching broad UI wireframes, microinteraction mapping zeroes in on single, focused moments like toggling a setting, pulling to refresh, or submitting a form.

Saffer breaks every microinteraction into four distinct components: triggers, rules, feedback, and loops or modes. Defining each component prevents developer confusion, reduces edge case bugs, and ensures the interface gives clear, satisfying feedback to the user.

Running this focused mapping session helps product teams document micro-animations, state changes, and error behaviors before writing code. It turns abstract feature ideas into precise specifications.

Why this routine works

Clarifies user interface behavior before software development begins
Eliminates edge cases in form inputs and toggles
Ensures consistent feedback across visual, auditory, and haptic cues
Reduces friction in micro-conversations between user and product

FAQ

What are the four components of Dan Saffer microinteraction mapping?

The four components are triggers, rules, feedback, and loops or modes. Triggers initiate the moment, rules dictate what happens, feedback communicates state changes, and loops or modes define long term behavior.

How does microinteraction mapping differ from standard wireframing?

Standard wireframing maps macro navigation and layout across full screens. Microinteraction mapping focuses on a single functional detail, detailing state changes and feedback step by step.

When should designers map microinteractions?

Map microinteractions during feature refinement after basic user flows exist, but before engineering handoff.

Sources

Microinteractions: Designing with Details by Dan Saffer, O'Reilly Media

More routines

Ryan Singer Fat Marker Sketching