T.S

INITIALIZING SYNAPSE...

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.

Tags

Showing 16 / 16 patterns

Pointer & Cursor

Use the cursor to express intent and provide immediate feedback.

Cursor-as-instrument, trail, intent, and precision feedback.

CursorFeedbackMotionPerformance

Hover & Proximity

Signal interactivity before the click.

Pre-attentive cues that respond to approach and focus.

CursorFeedbackMotionPerformance

Magnetic Targets

Make targets feel easier to hit without changing layout.

Guided selection via subtle attraction and snapping.

CursorDirect ManipulationMotionPerformance

Microinteractions

Every action gets a clear, tiny “yes, I heard you.”

Small, meaningful responses that confirm intent and state.

FeedbackMotionAccessibility

Motion & Springs

Motion communicates structure: where things come from and go to.

Physics-inspired motion that reinforces hierarchy and flow.

MotionFeedbackPerformanceAccessibility

Scroll Narrative

Reveal complexity over time; let scroll be the “timeline.”

Scroll-driven storytelling and progressive disclosure.

ScrollMotionPerformanceAccessibility

Gesture & Drag

Let users “grab” the UI and move it with constraints.

Direct manipulation: drag, fling, and constraint-based movement.

Direct ManipulationMotionPerformanceAccessibility

Physics Systems

Physical metaphors create intuition and delight.

Collisions, constraints, and emergent behaviors for play.

Direct ManipulationMotionPerformanceSpatial

Spatial / 3D

Use depth to encode hierarchy and invite exploration.

Depth, parallax, and embodied spatial interaction.

SpatialMotionPerformanceDirect Manipulation

Shaders & Procedural

Make visuals respond to interaction, not just decoration.

Procedural visuals, generative textures, and GLSL-driven UI.

VisualMotionPerformance

Audio & Voice

Sound can confirm, guide, and add rhythm—when optional.

Audio feedback, synthesis, and voice-driven interaction.

AudioFeedbackAccessibility

Multimodal UX

Use multiple channels to reduce load and increase clarity.

Combining modalities: vision, motion, haptics, and audio.

AudioSpatialFeedbackAccessibility

AI-Assisted

AI should be a collaborator with clear boundaries and controls.

Co-creation workflows: suggestion, summarization, and agents.

AIFeedbackAccessibility

Data Visualization

Make insight discoverable through interaction, not clutter.

Readable, interactive visuals for insight and exploration.

VisualFeedbackAccessibility

Feedback & Status

Users should never wonder “did it work?”

Clear system status: progress, success, error, and latency.

FeedbackAccessibilityPerformance

Accessibility

Inclusive defaults make every pattern better.

Keyboard, reduced motion, contrast, and inclusive interaction.

AccessibilityPerformanceFeedback

Experience Canvas.

A large interactive space to feel the pattern. Select a pattern above (or click Experience) to load its demo.

Experience Canvas • Select a pattern

Move • Click

Select a pattern to load its interactive demo.