UI + UX Cross-Device And Physical Interaction standard

Haptic feedback

Create a small, optional haptic vocabulary mapped to meaningful interaction events; check capability and user settings, synchronize effects with visible states, keep patterns brief, suppress repetition, provide reduced or no-hardware alternatives, and never make haptics the only channel for status, errors, warnings, progress, or confirmation.

Decision first

Choose this pattern when the problem matches

Use when

  • A tactile pulse reinforces a direct manipulation, boundary, threshold, selection, successful action, recoverable warning, or physical game/control event.
  • The interaction already has visible or audible state, and haptics improve confidence without becoming mandatory.
  • The platform has reliable haptic conventions and users can disable, reduce, or ignore them safely.

Avoid when

  • The feedback is required for comprehension and no visible or audible equivalent exists.
  • The event is decorative, frequent, passive, delayed, or unrelated to a user action.
  • The device or browser support is weak and no fallback state is designed.
  • The pattern could be confused with system notifications, alarms, medical alerts, or accessibility cues.

Problem it prevents

Tactile feedback can make digital interactions feel immediate and physical, but haptics are hardware-dependent, settings-dependent, platform-specific, easy to overuse, and inaccessible when they carry meaning without visible or audible backup.

Pattern anatomy

What a strong implementation has to make clear

User need

The product runs on touch, game, wearable, mobile, web, or controller hardware where tactile output may be available.

Pattern promise

Create a small, optional haptic vocabulary mapped to meaningful interaction events; check capability and user settings, synchronize effects with visible states, keep patterns brief, suppress repetition, provide reduced or no-hardware alternatives, and never make haptics the only channel for status, errors, warnings, progress, or confirmation.

Required state

Capability unavailable, unsupported browser, no vibration hardware, or no controller rumble state.

Recovery path

Required status is delivered only through a vibration pulse.

Access contract

Never rely on haptics alone for success, failure, warning, validation, progress, or confirmation.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A slider gives a light detent when crossing whole-number stops, shows the value visually, and suppresses repeated vibration while the thumb rests on the same stop.
  • A drag-and-drop board gives a short impact when an item crosses the valid drop threshold and shows the target highlight at the same moment.
  • A user drags a reorder handle and feels one detent at each valid slot while the row preview and insertion marker move visibly.
  • A user attempts a destructive swipe, feels a warning pulse at the commit threshold, sees Delete revealed, and can cancel before release.
Weak implementation

Vague, hidden, hard to recover from

  • Every button press uses the same heavy vibration regardless of whether the action selected, warned, failed, or succeeded.
  • A validation error only vibrates the device and leaves no field message or recovery path.
  • A user cannot tell whether a pulse means success or failure because the same pattern plays for all outcomes.
  • A user in a quiet meeting gets repeated vibration from decorative hover-like effects.
UI guidance
  • Render haptic feedback as an optional tactile layer attached to visible interaction states, with labels or settings that explain when vibration, impact, selection, warning, or detent effects happen.
  • Keep haptic effects short, event-specific, and synchronized with the visual state they reinforce; use visible text, color, motion, or audio alternatives for any information users must understand.
UX guidance
  • Use haptic feedback when touch can reinforce direct manipulation, action commitment, selection movement, boundary crossing, snap points, warnings, or successful completion without becoming the only feedback channel.
  • Design a small semantic haptic vocabulary, respect platform conventions and user settings, suppress repeated effects, and provide no-hardware or reduced-feedback behavior that still leaves the task complete.
Implementation contract

What the implementation must handle

States

  • Capability unavailable, unsupported browser, no vibration hardware, or no controller rumble state.
  • User haptics disabled, reduced feedback, notification silence, or battery-sensitive state.
  • Light press or button down feedback state.
  • Selection changed feedback state.

Interaction

  • A haptic effect plays only for a user-relevant interaction event and stays synchronized with the visible state change it reinforces.
  • Users can complete and understand the task when haptics are unavailable, disabled, delayed, unsupported, or suppressed.
  • The same haptic pattern does not mean conflicting outcomes such as success and failure.
  • Repeated gestures, loops, long waits, and animation frames do not create continuous or fatiguing vibration unless the user explicitly opted into a game/controller effect.

Accessibility

  • Never rely on haptics alone for success, failure, warning, validation, progress, or confirmation.
  • Respect system haptic, vibration, reduced motion, sensory, notification focus, and accessibility settings.
  • Provide visible labels, status text, affordance changes, live-region messages, or audio alternatives for every haptic meaning.
  • Allow users to disable or reduce product-specific haptics when the product adds custom effects beyond platform defaults.

Review

  • What exact event does each haptic represent, and is that event visible at the same time?
  • Can users distinguish selection, threshold, warning, success, and error effects without overloading memory?
  • What happens when hardware, browser support, system settings, battery saver, or preferences suppress haptics?
  • Is any required information communicated only through touch?
Interactive lab

Inspect the states before you copy the pattern

Reinforce touch events with tactile feedback

Inspect unsupported hardware, haptics disabled, reduced feedback, light press, selection changed, drag threshold, snap detent, boundary reached, success, warning, error reinforcement, destructive commit, repeated-effect suppression, cancel vibration, web vibration pattern, preference preview, and quiet context states; compare haptic-only error, same strong pulse, vibration progress, ignored settings, decorative buzz, delayed buzz, and alarm-like loop failures.

Haptic feedback
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Capability unavailable, unsupported browser, no vibration hardware, or no controller rumble state.

Keyboard / Access

Keyboard users receive the same visible state changes as touch users even when no haptic plays.

Avoid Generating

Using haptics as the only error, warning, or success message.

Evidence trail

Source-backed claims behind this guidance

MDN Web Docs: Vibration API

MDN Web Docs - checked

Supports web vibration support limits, pulse patterns, cancellation, and unsupported-device behavior.

W3C: Vibration API

World Wide Web Consortium - checked

Supports vibration pattern semantics, cancellation, security considerations, and user-agent limits.

Full agent/debug reference

Problem Context

  • The product runs on touch, game, wearable, mobile, web, or controller hardware where tactile output may be available.
  • Haptic events may reinforce button press, selection movement, snap detent, drag threshold, boundary hit, refresh, success, warning, failed gesture, destructive commit, notification, or game event.
  • Users may disable vibration, use assistive technology, hold the device on a table, use desktop hardware, have reduced-motion or sensory preferences, be in quiet contexts, or use unsupported browsers.
  • Haptic feedback is adjacent to touch gesture, toast notification, error state, confirmation dialog, progress bar, notification preferences, and sound or motion feedback.

Selection Rules

  • Choose haptic feedback when the tactile effect reinforces a visible interaction milestone and improves physical confidence without carrying required information alone.
  • Use touch gesture when the main design question is how input is recognized, thresholded, canceled, or made equivalent through controls.
  • Use toast notification when a short visible message, undo, or status copy is needed after an action.
  • Use error state when users need persistent explanation and recovery; haptics may draw attention but cannot replace visible errors.
  • Use confirmation dialog when users must explicitly review and choose before risk; haptics can follow final commit but not replace the decision.
  • Use progress bar when duration or percent complete matters; do not use repeated vibration as progress indication.
  • Map haptic intensity and pattern to semantic weight: selection and detents should be lighter than warnings or destructive commits.
  • Respect system settings and product preferences for vibration, haptics, reduced motion, notification mode, and quiet hours.
  • Provide no-hardware and no-permission behavior for web and desktop environments where vibration is unavailable or ignored.
  • Avoid haptics for decorative delight, passive page load, hover-only interactions, repeated errors, long waits, or background events users did not initiate.

Required States

  • Capability unavailable, unsupported browser, no vibration hardware, or no controller rumble state.
  • User haptics disabled, reduced feedback, notification silence, or battery-sensitive state.
  • Light press or button down feedback state.
  • Selection changed feedback state.
  • Drag threshold reached state.
  • Snap detent or boundary reached state.
  • Invalid gesture, blocked movement, or limit reached state.
  • Success or completion feedback state.
  • Warning or recoverable-risk feedback state.
  • Error reinforcement state paired with visible recovery.
  • Destructive commit feedback state after explicit confirmation.
  • Repeated-effect suppression or debounce state.
  • Cancel current vibration or stop pattern state.
  • No-hardware fallback state with visible and audible alternatives.
  • Web vibration pattern state with duration and cancellation limits.
  • Preference preview and test feedback state.
  • Privacy or quiet-context state where vibration is suppressed.

Interaction Contract

  • A haptic effect plays only for a user-relevant interaction event and stays synchronized with the visible state change it reinforces.
  • Users can complete and understand the task when haptics are unavailable, disabled, delayed, unsupported, or suppressed.
  • The same haptic pattern does not mean conflicting outcomes such as success and failure.
  • Repeated gestures, loops, long waits, and animation frames do not create continuous or fatiguing vibration unless the user explicitly opted into a game/controller effect.
  • Warning, error, destructive, and payment-related haptics are paired with visible copy and controls.
  • Settings and platform conventions decide whether haptics are enabled, reduced, previewed, or suppressed.

Implementation Checklist

  • Inventory all candidate tactile events and remove decorative, redundant, background, or high-frequency effects.
  • Define a semantic vocabulary for light tap, selection, detent, threshold, success, warning, error reinforcement, and destructive commit.
  • Check platform support and use platform-predefined effects where available before custom vibration patterns.
  • Respect user and system settings for haptics, vibration, reduced motion, notification focus, battery saver, and accessibility preferences.
  • Synchronize tactile output with visible state changes, not delayed network responses unless the visible state also changes then.
  • Debounce repeated effects during drag, scroll, slider, game loop, and validation states.
  • Provide visible text, live status, audio, animation, or control state alternatives for every haptic meaning.
  • Test unsupported hardware, disabled haptics, reduced settings, long press, drag thresholds, boundary hits, repeated errors, keyboard use, screen readers, and quiet contexts.

Common Generated-UI Mistakes

  • Using haptics as the only error, warning, or success message.
  • Playing the same strong vibration for every tap and outcome.
  • Looping vibration during progress, loading, or background work.
  • Ignoring system haptic or vibration preferences.
  • Adding decorative pulses that are not tied to interaction meaning.
  • Assuming web vibration works on every browser and desktop device.
  • Playing warning haptics before users understand the visible consequence.

Critique Questions

  • What exact event does each haptic represent, and is that event visible at the same time?
  • Can users distinguish selection, threshold, warning, success, and error effects without overloading memory?
  • What happens when hardware, browser support, system settings, battery saver, or preferences suppress haptics?
  • Is any required information communicated only through touch?
  • Are repeated effects debounced during dragging, scrolling, validation, loading, or game loops?
  • Is this really haptic feedback, or does touch gesture, toast notification, error state, confirmation dialog, or progress bar own the main problem?
Accessibility
  • Never rely on haptics alone for success, failure, warning, validation, progress, or confirmation.
  • Respect system haptic, vibration, reduced motion, sensory, notification focus, and accessibility settings.
  • Provide visible labels, status text, affordance changes, live-region messages, or audio alternatives for every haptic meaning.
  • Allow users to disable or reduce product-specific haptics when the product adds custom effects beyond platform defaults.
  • Avoid long, repeated, intense, startling, or decorative vibration patterns that can cause discomfort.
  • Do not use haptics to replace keyboard focus indicators, screen-reader announcements, field errors, or visible confirmations.
  • Make haptic preference previews optional and clearly labeled.
  • Test the flow with haptics unavailable, disabled, device on a table, keyboard-only input, screen reader, and reduced-feedback settings.
Keyboard Behavior
  • Keyboard users receive the same visible state changes as touch users even when no haptic plays.
  • Space and Enter activation do not depend on vibration for pressed, committed, failed, or successful state.
  • Arrow-key slider, stepper, or reorder interactions expose value, boundary, and snap states visually as haptic equivalents.
  • Escape or cancel stops pending vibration patterns where the platform API allows cancellation.
  • Focus does not move solely because a haptic played.
  • Preference preview controls are reachable by keyboard and describe the effect being previewed.
  • Repeated keyboard navigation does not trigger fatiguing haptics when the platform treats keyboard input separately.
  • Visible status remains available after the tactile moment has passed.
Variants
  • Selection haptic
  • Impact haptic
  • Drag threshold haptic
  • Snap detent haptic
  • Boundary haptic
  • Warning haptic
  • Success haptic
  • Destructive commit haptic
  • Game controller rumble
  • Web vibration pattern
  • Preference preview haptic
  • Reduced haptic mode

Verification

Last verified: