microinteractions

name	microinteractions
effort	high
description	Use when a UI element feels off, robotic, or incomplete — or when adding polish and delight to moment-to-moment interactions. Triggers on: "버튼 느낌이 어색해", "로딩 애니메이션", "toggle 디자인", "UI 디테일", "인터랙션 개선", loading state", "feedback animation", "이 버튼 어떻게
scenarios	["이 좋아요 버튼이 너무 밋밋한데 어떻게 개선해?","로딩 스피너 대신 뭔가 더 나은 피드백을 보여주고 싶어","How should the submit button behave after the form is sent?","toggle 상태 변화를 어떻게 표현하면 좋을까?","We want the empty state to feel more human","pull-to-refresh 어떻게 디자인해야 해?"]
compatibility	{"optional":["think-tool"],"remote_mcp_note":"think-tool이 있으면 마이크로인터랙션의 complexity가 UX 가치와 균형을 이루는지 체계적으로 평가할 수 있습니다. Claude 설정 → MCP Servers에서 remote SSE 엔드포인트를 추가하세요."}
related	["brainstorming","problem-reframer"]
license	MIT
metadata	{"author":"wondelai","version":"1.0.0"}

Standing Mandates

• ALWAYS define trigger → feedback → rules for every microinteraction before designing motion.
• ALWAYS match animation duration to the perceived weight of the action — heavier actions warrant longer feedback.
• NEVER add animation for decoration; every motion must communicate a state change.
• NEVER design a microinteraction in isolation from the surrounding flow and context.

Microinteractions Framework

A systematic approach to designing the tiny, contained product moments that users interact with every day -- toggles, password fields, loading indicators, pull-to-refresh, like buttons. Based on Dan Saffer's four-part structure (Trigger, Rules, Feedback, Loops & Modes), this framework turns invisible details into the polish that separates forgettable products from beloved ones.

Core Principle

The difference between a product you tolerate and a product you love is almost always in the microinteractions. A microinteraction is a contained product moment built around a single use case: changing a setting, syncing data, setting an alarm, picking a password. They are so small that users rarely think about them consciously -- but they feel them. Every microinteraction follows the same four-part structure: a Trigger initiates it, Rules determine what happens, Feedback shows what is happening, and Loops & Modes define its long-term behavior.

Scoring

Goal: 10/10. When reviewing or creating microinteractions, rate them 0-10 based on adherence to the principles below. A 10/10 means every interactive moment has a deliberate trigger, clear rules, immediate feedback, and thoughtful loop/mode behavior. Lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.

The Microinteraction Structure

Six areas of focus for designing world-class microinteractions:

1. Triggers

Core concept: The trigger is what initiates a microinteraction. It can be manual (user-initiated -- a tap, click, swipe, voice command) or system-initiated (a condition is met -- time, location, incoming data, error state). The trigger is the front door of every microinteraction.

Why it works: Without a clear trigger, users cannot discover or initiate the interaction. Without a system trigger, the product cannot respond to changing conditions. Well-designed triggers make functionality discoverable and set accurate expectations for what will happen next.

Key insights:

• Manual triggers live inside existing UI controls: buttons, switches, icons, form fields, gestures
• System triggers fire automatically when conditions are met: time elapsed, threshold reached, data received
• A trigger must communicate three things: that it exists, what it does, and what state it is in