Interaction Design

Design meaningful interactions with micro-animations, state machines, gestures, error handling, and feedback patterns.

Skills (22)

• animation-principles — Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
• conversational-ux — Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.
• doherty-threshold — Apply the Doherty Threshold — keep system response under 400ms to preserve user flow. Use when diagnosing perceived slowness or setting a performance budget. For what to show during unavoidable waits, use loading-states.
• error-handling-ux — Design error prevention, detection, and recovery across a product — message content, placement, and escape routes. Use when errors span multiple flows. For validation inside a single form, use form-design.
• feedback-patterns — Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use loading-states; for failures use error-handling-ux.
• fitts-law — Apply Fitts's Law — target acquisition time depends on size and distance. Use when sizing and positioning controls, especially for touch. For how many controls to show at once, use hicks-law.
• form-design — Design a form end to end — field order, grouping, validation, and completion. Use when the artifact is a form. For product-wide error strategy use error-handling-ux; for first-run signup use onboarding-design.
• gesture-patterns — Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use platform-conventions (ui-design).
• hicks-law — Apply Hick's Law — decision time grows with the number of simultaneous choices. Use when a screen offers too many options at once. For how many items survive in memory afterwards, use millers-law.
• interfaces-that-feel — Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use aesthetic-usability (ui-design).
• jakobs-law — Apply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use platform-conventions (ui-design).
• loading-states — Design waiting experiences — spinners, skeletons, optimistic updates, and progressive reveal. Use when content takes time to arrive. For the latency budget itself use doherty-threshold; for success confirmation use feedback-patterns.