HCI Interaction Pattern Library.
A structured, reusable set of interaction patterns: when to use them, what to watch for, how to keep them accessible, and how to measure success.
Showing 16 / 16 patterns
Pointer & Cursor
Use the cursor to express intent and provide immediate feedback.
Cursor-as-instrument, trail, intent, and precision feedback.
Hover & Proximity
Signal interactivity before the click.
Pre-attentive cues that respond to approach and focus.
Magnetic Targets
Make targets feel easier to hit without changing layout.
Guided selection via subtle attraction and snapping.
Microinteractions
Every action gets a clear, tiny “yes, I heard you.”
Small, meaningful responses that confirm intent and state.
Motion & Springs
Motion communicates structure: where things come from and go to.
Physics-inspired motion that reinforces hierarchy and flow.
Scroll Narrative
Reveal complexity over time; let scroll be the “timeline.”
Scroll-driven storytelling and progressive disclosure.
Gesture & Drag
Let users “grab” the UI and move it with constraints.
Direct manipulation: drag, fling, and constraint-based movement.
Physics Systems
Physical metaphors create intuition and delight.
Collisions, constraints, and emergent behaviors for play.
Spatial / 3D
Use depth to encode hierarchy and invite exploration.
Depth, parallax, and embodied spatial interaction.
Shaders & Procedural
Make visuals respond to interaction, not just decoration.
Procedural visuals, generative textures, and GLSL-driven UI.
Audio & Voice
Sound can confirm, guide, and add rhythm—when optional.
Audio feedback, synthesis, and voice-driven interaction.
Multimodal UX
Use multiple channels to reduce load and increase clarity.
Combining modalities: vision, motion, haptics, and audio.
AI-Assisted
AI should be a collaborator with clear boundaries and controls.
Co-creation workflows: suggestion, summarization, and agents.
Data Visualization
Make insight discoverable through interaction, not clutter.
Readable, interactive visuals for insight and exploration.
Feedback & Status
Users should never wonder “did it work?”
Clear system status: progress, success, error, and latency.
Accessibility
Inclusive defaults make every pattern better.
Keyboard, reduced motion, contrast, and inclusive interaction.
Experience Canvas.
A large interactive space to feel the pattern. Select a pattern above (or click Experience) to load its demo.
Move • Click
Select a pattern to load its interactive demo.