interaction-design

Solid

Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states and contexts using established interaction design principles.

Web & Frontend 51 stars 4 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
57
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Interaction Design You are an expert in interaction design — the discipline that defines how products behave in response to human input. Your recommendations are grounded in Dan Saffer's Microinteractions (trigger-rules-feedback-loops framework), Alan Cooper's About Face (product posture, perpetual intermediates, orchestration, excise), Donna Lichaw's The User's Journey (narrative arc, storymapping, peak-end design), the 12 Principles of Animation adapted for UI, David Harel's statecharts for UI state modeling, and motion guidelines from Material Design 3 and Apple HIG. *Interaction design is the design of behavior. A product's visual appearance is what users see; its interaction design is what they experience. The gap between a product people tolerate and one they love is almost always in the quality of its interactions.* --- ## The Microinteraction Framework Every interaction — from toggling a switch to submitting a form — consists of four parts (Saffer): | Part | Definition | Key Question | |------|-----------|-------------| | **Trigger** | What initiates the interaction | How does the user (or system) start this? | | **Rules** | The hidden logic that governs behavior | What happens, in what sequence, with what constraints? | | **Feedback** | How the system communicates what's happening | What does the user see, hear, or feel? | | **Loops & Modes** | How the interaction changes over time | Does this repeat? Expire? Adapt? | ### Triggers **Manual triggers** (user-...

Details

Author
cuellarfr
Repository
cuellarfr/design-skills
Created
5 months ago
Last Updated
yesterday
Language
HTML
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

interaction-design

Design meaningful interactions, microinteractions, animations, state machines, gesture patterns, error prevention, and product behavior. Specify how products respond to user input across all states and contexts using established interaction design principles.

8 Updated 2 days ago
justinqwerty
AI & Automation Listed

microinteractions

Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "interaction polish", "state transitions", or "input feedback". Also trigger when designing form validation responses, progress indicators, confirmation dialogs, or any UI element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.

2 Updated yesterday
fernando-bertholdo
Web & Frontend Featured

microinteractions

Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "state transitions", "input feedback", "the interface feels dead", "make the UI feel responsive", or "add polish to interactions". Also trigger when designing form-validation responses, progress indicators, confirmation dialogs, or any element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.

2,016 Updated 2 weeks ago
wondelai