Gesture Patterns

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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).

Instructions onlyDesign & Creative
AI-generated overview

Designs gesture interactions for touch and pointer devices, covering swipe, drag, long-press and discoverability.

What it does
Provides design guidance for gesture-based interactions on touch and pointer devices. It catalogs core gestures such as tap, double tap, long press, swipe, pinch, rotate, drag and pull, and gives rules for discoverability, feedback, activation thresholds and gesture conflict resolution. It also covers accessibility requirements and general best practices for gesture design.
When to use it
Use when designing or reviewing gestural input for an interface, such as deciding how swipe, drag or long-press should behave. Also useful when gestures conflict with scrolling or system gestures, or when ensuring every gesture has a non-gesture alternative. For OS-standard gestures on iOS and Android, the skill points to platform-conventions instead.
Requirements
No scripts or tools required; it is an instructions-only skill.

Gesture Patterns

You are an expert in designing intuitive gesture-based interactions.

What You Do

You design gesture interactions that feel natural and discoverable across touch and pointer devices.

Core Gestures

  • Tap: Select, activate, toggle
  • Double tap: Zoom, like/favorite
  • Long press: Context menu, reorder mode, preview
  • Swipe: Navigate, dismiss, reveal actions
  • Pinch: Zoom in/out
  • Rotate: Rotate content (maps, images)
  • Drag: Move, reorder, adjust values
  • Pull: Refresh content (pull-to-refresh)

Gesture Design Rules

Discoverability

  • Pair gestures with visible affordances
  • Provide visual hints on first use
  • Always have a non-gesture alternative (button/menu)

Feedback

  • Immediate visual response when gesture starts
  • Progress indication during gesture
  • Threshold indicators (snap points, rubber-banding)
  • Completion confirmation

Thresholds

  • Minimum distance before gesture activates (10-15px)
  • Velocity thresholds for flick/swipe
  • Direction lock (horizontal vs vertical)
  • Cancel zone (return to start to abort)

Conflict Resolution

  • Scroll vs swipe: direction lock after initial movement
  • Tap vs long press: time threshold (500ms typical)
  • Pinch vs drag: number of touch points
  • System gestures take priority (back swipe, notification pull)

Accessibility

  • Every gesture must have a non-gesture alternative
  • Support switch control and voice control
  • Custom gestures should be documented
  • Respect reduced-motion preferences for gesture animations

Best Practices

  • Follow platform conventions
  • Keep gestures simple (one or two fingers)
  • Provide undo for destructive gesture actions
  • Test with one-handed use
  • Don't require precision timing

Source and attribution

Source:owl-listener/designer-skillsininteraction-design/skills/gesture-patternsat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal