Fire feedback with its cause

Fire sight, sound and haptics on one frame, only when it matters.

From apple-design, §13, after Designing Audio-Haptic Experiences.

Haptics: checking

Harmony: one frame

Flip both switches and listen.

Sound on transitionendBad
Alerts

el.addEventListener("transitionend", play)
Sound in click handlerGood
Alerts

setChecked(); play(); vibrate(10)

Causality: fire on the snap

Drag each knob slowly, then release between stops.

Tick on every moveBad

pointermove → tick(); vibrate(10)
Tick when it snapsGood

enter detent → tick(); vibrate(10)

Utility: sound for outcomes

Add a tag, then a duplicate, then tap the rows.

Beep on everythingBad

    keystroke, hover, add, error → beep()
    Sound on commitGood

      add → success · error → error · remove → tick

      Why it matters, pros and cons

      Why it matters

      Senses fuse only when they arrive together. Constant feedback gets tuned out.

      Pros

      • Controls feel physical and weighted.
      • Success and error differ by ear.
      • Confirms when the finger hides the control.

      Cons

      • iOS Safari and desktops ignore navigator.vibrate.
      • Most web apps should stay silent by default.
      • Never make sound the only carrier of meaning.