Gestures and UX on touch devices

1) Why gestures and when they are appropriate

• Predictable (in line with platform expectations).
• Detectable (the user guesses that the gesture is available).
• Supported by feedback (visual/audio/tactile).
• Reliable with erroneous touches and different device grabs.

Principles: first explicit UI elements → then hint gestures → then advanced hidden gestures. Critical actions - always duplicate with explicit buttons.

2) Gesture taxonomy

Tap/Double-tap/Long-press - selection/add. menus/advanced actions.
Swipe (mountain/vert) - navigation, deletion/archiving, disclosure of actions.
Drag-and-drop - sorting, transfer, hierarchy change.
Pinch/Spread (zoom) - scale (galleries, maps, graphs).
Rotate - rare, appropriate in editors/views.
Pull-to-refresh/Release-to-action - update/secondary action.
Edge-swipe - system navigation (back/menu), carefully on the web.
Multi-touch - 2-3 finger gestures for advanced scenarios.
System gestures - screenshots, PiP, system "Back" (Android) - take into account conflicts.

3) Ergonomics and thumb areas

Thumb-zones: reach zone - lower half of the screen; key CTAs, chip filters and tabs are at the bottom.
Hit-target: minimum 44 × 44 pt/48 × 48 dp. Add a hit-slop for small items.
Edge indents: reduce false edge-swipe; critical interactions - not close to the edge.
Orientation: portrait - default; landscape - optimize for two thumbs (especially in games/videos).

4) Detectability and training

Affordance: hints of gesture (semi-visible card on the side, "pen" on the bottom for sheet).

Micro-onboarding: one-off clues ("Swipe to delete"), not intrusive, with "Got it."

Trial gesture: demo animation at the first appearance of the pattern.
Repeatability: Gestures should work the same way in all places with similar content.

5) Feedback: visual, tactile, audio

Visual: shadow, parallax, sticking to guides, progress indicator when pull-to-refresh.
Haptics: light impulse when grabbing drag, more "heavy" - when dropping/success.
Audio (moderate): short clicks/clicks in games or tangible events (win/error).
Cancellation states: visual "red zone" with destructive swipe, vibration hint before removal.

6) Gesture conflicts and priorities

Recognition hierarchy: internal scroll> swipe card> system edge-back (on the web - vice versa). Configure gesture-arena/priorities.
Vertical scroll vs horizontal swipe: Lock one axis after 10-15 px of movement.
Edge-swipe vs own gestures: Add an internal indent or a "pen" gesture so as not to intercept the system.
Global back-gesture (Android/iOS): do not break the expected navigation - duplicate important actions with the "Back" button.

7) Scripted patterns

7. 1 Lists and cards

Swipe-actions: short swipe - hint of actions (icons), long - instant action.

Undo-paradigm: after destructive-gesture show snackbar "Cancel."

Drag-reorder: drag on the "handle"; Fix the vertical axis.

7. 2 Maps, galleries, graphs

Pinch-zoom + double tap for scaling.
Inertia & bounds: elastic boundaries, smooth inertia.
Tap-hold for "magnifying glass "/details of the point on the graph.

7. 3 Navigation and shields

Bottom-sheet: pull gesture from handle, collapsed/partial/full state; swipe-down to close.
Tabs/Chips: horizontal swipe between tabs with progress indicator.

7. 4 Game and fast scenarios

One-hand play: Large betting/action zones at the bottom edge.
Double gestures: double tap as "repeat bet" (confirmation haptic).
Threshold on destructive: "lock" your finger at 300ms or go through the "red zone" to execute.

8) Availability (A11y)

All gestures are duplicated with buttons or menu items.
VoiceOver/TalkBack: correct descriptions and focus order.
Motor accessibility: alternatives to long-press (icon "⋮"), increased touch zones.
Contrast and scale: Gestures shouldn't be the only way to get to the action.

9) Performance and reliability

INP (Interaction to Next Paint) ≤ 200ms for key gestures.
Touch latency: target <50-100ms before first response (visual capture/illumination).
60 FPS: smoothness for drag/scroll; turn off heavy shadows and blur when moving.

Hit-testing: avoid overlaps (z-index/overflow) - traps are "soft."

Grip tests: right-handed/left-handed, thumb/small finger, standing/in transport.

10) Web vs Native

Web/PWA: passive listeners ('passive: true') for scrolling, 'touch-action' for locking axes, avoid intercepting system gestures unnecessarily.
iOS/Android native: use system recognizers (UIGestureRecognizer/Android GestureDetector), standard haptics, predictive "Back" (Android 14 +).

Webview: bridges and safe zones, predictive closure of shields - inside the web, without breaking the system "Back."

11) Multi-touch and advanced gestures

Two fingers: panning while zoom is locked; on the cards - a gesture "two fingers down" for the add. layer.
Three fingers: for power-users only; always give an alternative.
Combinations: long-press + drag for range selection/group movement.

12) Validation, telemetry, metrics

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Success Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Drop-off for gesture conflict.

13) Localization and cultural differences

RTL languages: Mirror horizontal gestures and icons.
Symbolism: "swipe left = remove" is not universal - confirm in onboarding.
Tactile patterns: use system profiles, they are already familiar to the user.

14) Security and bugs

Destructive gestures - only with undo/confirmation.
Edge swipes should not accidentally close critical processes (payment/CCM).
Shiver protection: motion threshold (5-10 px) before starting the gesture.
Disabling gestures in blocking states (payment loader, confirmation modal).

15) Touch Table/Tablet Patterns

Two-handed scenarios: separation of control zones.
Multi-user mode: gestures do not conflict, touch time priority.
Large hit-targets: 56-64 dp; visual guides for drag operations.

16) Antipatterns

Hidden critical actions by gesture only (no button).
Gestures that conflict with system (edge-back, notification shade).
Long-press without visual "scramble" and sound/vibe.
Horizontal swipe inside vertical scrolling without axial lock.
"Heavy" shadows/blur when drag → lag and FPS drop.
Inconsistent gestures in different parts of the application.

17) Implementation checklist (step by step)

1. Gesture map: where and what - with alternatives for A11y.
2. Recognition priorities: axial lock, edge-safe zones, gesture-arena.
3. Feedback: visual trap, haptics profiles, animations ≤ 200 ms.
4. Performance: FPS INP/60, drag/scroll profiling.
5. Onboarding: prompts and trial gestures with the ability to turn off.
6. Telemetry: success/misfire/undo, heatmap touches.
7. Test matrix: devices, densities, left-handed/right-handed, bad network cases.
8. Documentation: gesture guide in the design system, examples and anti-cases.

18) The bottom line

A competent gesture is fast, understandable and reliable. It reduces the path to the goal without breaking system expectations and ensuring accessibility for everyone. Design gestures as part of the design system: uniform patterns, clear priorities, rich feedback and strict performance control - then touch UX will be equally pleasant on any device and in any scenario.