Haptics Lab

Haptics is treated as a progressive enhancement: audio and keyboard interaction still work broadly, but tactile output currently works only on supported Android browsers over HTTPS. Do not use desktop or iPhone for this hands-on haptics evaluation yet.

Chart Navigation Lab

The charts below are fully integrated with haptic and audio feedback. Navigate into a chart with the keyboard and move between data points with arrow keys — each point fires both a tone and a vibration whose intensity reflects the data value.

What To Notice During Testing

• Value discrimination (Staircase): Use arrow keys to navigate through the four steps (20, 50, 80, 100). Can you clearly distinguish each haptic zone by feel alone?
• Trend detection (Mountain Peak): Navigate left to right through the bell curve. Does the increasing then decreasing vibration intensity help you sense the peak?
• Zero handling: Notice the weak tick at value 0 — it confirms the value exists without creating a false rhythm.
• Sensory binding: Sound and touch within ~50 ms are typically fused by the brain. Do the audio tone and vibration feel unified?
• Eyes-closed navigation: Try closing your eyes while navigating to rely fully on haptic + audio feedback.

Browser and Device Support

Key constraints:

• Haptics require HTTPS. Vibration is blocked on plain HTTP pages.
• iOS (Safari and all iOS browsers) does not support the Web Vibration API and will silently skip the haptic step.
• Desktop browsers expose no haptic motor; only the audio channel will play.

Compatibility Policy

• PWA installation is not required. This page can vibrate from a regular website tab when browser/device policies allow it.
• Support is capability-based, not app-type-based. The deciding factors are browser support, device hardware, secure context, and user settings.
• Treat haptics as progressive enhancement. Audio, visible UI, and keyboard/screen reader flows remain the primary channels.

Android Troubleshooting Checklist

Use this quick flow when self-test works but chart interactions feel weak:

1. Run Run Vibration Self-Test in the System Status card and confirm metadata.selfTest.passed is true in exported JSON.
2. Verify phone settings: vibration/haptics enabled at OS level; Silent/Do Not Disturb/Battery Saver not suppressing haptics.
3. Navigate points with keyboard arrows and confirm new log entries show vibrate(...) sent successfully.
4. If self-test succeeds but point feedback still feels weak, place the phone on a hard surface and retest.

Resources

If you want to go deeper into haptics, accessibility, and tactile communication, these are the most useful starting points from this experiment.

1. Web API docs

• MDN: Vibration API — the main browser reference for navigator.vibrate(), vibration patterns, cancellation, and compatibility.
• MDN: Progressive web apps — broader background on installability and offline behavior. Useful context, but a PWA is not required for basic vibration support.

2. Accessibility and deafblind research

• Beyond the fingertips: imagining haptic technologies for a deafblind future — strong design framing for haptics as part of a larger sociotechnical system, especially for deafblind users.
• Nagish: Deafblind communication devices and apps — practical overview of how haptics, text, AI, braille, and communication tools can work together.

3. Practical takeaways for builders

• Start with confirmation and emphasis patterns before attempting continuous tactile encoding.
• Treat haptics as one channel in a multimodal experience, alongside audio, text, visible labels, and assistive tech.
• Design for real-time interaction and user pacing so people can explore without being overloaded.
• Expect people to assemble their own workflow from multiple tools: haptics, speech, braille, interpreters, device settings, and contextual knowledge.

4. Good questions to keep asking

• Does the haptic cue add meaning, or just motion?
• Can the user control the pace of exploration?
• Is the system still understandable without haptics?
• Are you supporting real tasks and shared experiences, not just demonstrating a device feature?

Learn More

freq (Hz) = 150 + (value x 7.5)

/**
 * HapticFeedbackManager
 * Maps data values (1-100) to Web Vibration API patterns.
 * Fails silently on unsupported browsers (iOS, desktop).
 */
class HapticFeedbackManager {
  constructor(options = {}) {
    this.isEnabled = options.enabled !== undefined ? options.enabled : true;
    this.isSupported = 'vibrate' in navigator;
    this.lastTriggerTime = 0;
    this.throttleMs = 50; // Prevents motor lag during fast keyboard traversal
  }

  /**
   * Trigger a vibration for a data value (1-100).
   * @param {number} value
   */
  trigger(value) {
    if (!this.isEnabled || !this.isSupported) return;

    const now = Date.now();
    if (now - this.lastTriggerTime < this.throttleMs) return;
    this.lastTriggerTime = now;

    const val = Math.max(1, Math.min(100, value));
    const duration = Math.round(10 + val * 1.3);
    const gap = Math.round(500 - val * 4.8);

    if (val < 40) {
      navigator.vibrate(duration);
    } else if (val < 80) {
      navigator.vibrate([duration, gap, duration]);
    } else {
      navigator.vibrate([duration, gap, duration, gap, duration]);
    }
  }

  toggle(state) {
    this.isEnabled = state;
  }
}

const haptics = new HapticFeedbackManager({ enabled: true });

chart.on('pointFocus', (data) => {
  playTone(data.value);       // existing sonification
  haptics.trigger(data.value); // new tactile layer
});