Visual experiences dominate the web.
Yet most people browse it on mobile devices with vibration motors built right in - and few web applications use haptic feedback to enrich the experience.
Why touch?
Touch is our most immediate sense. Reaction-time studies consistently show that we respond to tactile stimuli faster than to visual ones, which is why a well-timed vibration feels instantaneous: when you tap an interface and feel it respond, your body registers the connection before your eyes do.
We also rarely give our screens full attention. People use their phones while walking, carrying bags, and juggling other tasks (Ng et al., 2017), which makes feedback that doesn't depend on vision even more valuable.
HCI research backs this up:
- Tactile messages can convey information without requiring users to look at the screen (Brewster and Brown, 2004);
- Adding tactile feedback to touchscreen keyboards helps people type faster and make fewer errors (Hoggan et al., 2008);
- Wrist-worn devices that alert through vibration get noticed reliably, even when users are visually distracted (Lee and Starner, 2010);
- Combining audio and touch feedback changes how people perceive and connect with an interface (Seaborn and Antle, 2011).
Haptics also matter for accessibility. Blind users have clear preferences for touchscreen gestures and perform better with the ones designed around them (Kane et al., 2013), and tactile feedback has proven useful even for tasks like authentication (Kuber and Yu, 2010).
Announcing the useVibration hook
Many developers shy away from adding vibration because it seems complicated.
It's actually pretty simple with the Vibration API — and to make it even simpler in React, I built the useVibration hook:
import useVibration, { VibrationPatterns } from "@luxonauta/use-vibration";
export const Component = () => {
const [{ isSupported, isVibrating }, { vibrate, stop }] = useVibration();
if (!isSupported) {
return <p>Vibration not supported on your device</p>;
}
return (
<>
<button
type="button"
onClick={() => vibrate(VibrationPatterns.tap)}
disabled={isVibrating}
>
{isVibrating ? "Vibrating" : "Tap me for haptic feedback"}
</button>
{isVibrating && (
<button type="button" onClick={stop}>
Stop Vibration
</button>
)}
</>
);
};
The hook provides:
- Support detection - automatically identifies whether the device supports vibration;
- Predefined patterns - no need to create patterns from scratch;
- Minimalist API - a gentle learning curve;
- TypeScript support - type safety and auto-completion out of the box.
Some design and accessibility considerations
When implementing haptic feedback:
- Be unobtrusive - keep vibrations subtle to avoid irritating users;
- Be consistent - the same pattern should always convey the same meaning;
- Be optional - let users turn haptic feedback off;
- Use in combination - never rely solely on haptic feedback.
Current limitations
Vibration support is still inconsistent across browsers and devices:
- Safari does not support the Vibration API;
- Desktop browsers generally lack support;
- Some Android devices may ignore complex patterns.
The hook's
isSupportedcheck makes it easy to fall back to visual or auditory alternatives when needed.
The future is multisensory
Haptic feedback is an opportunity to build interfaces that feel more intuitive and accessible. As Moyes and Jordan (2021) argue, interfaces that engage multiple senses can become a real competitive advantage.
When we add thoughtful haptic feedback (or even sound) to our interfaces, we build apps that people remember and connect with on a deeper, more intuitive level. 🌱
References
- Ng, Brewster and Williamson (2017) - Study on how mobile device use is affected when occupied with other tasks.
- Brewster and Brown (2004) - How tactile messages (through vibration) can convey information without looking at the screen.
- Hoggan, Brewster and Johnston (2008) - Research on the effectiveness of tactile feedback on touchscreens.
- Lee and Starner (2010) - Study on wrist devices that alert through vibration.
- Seaborn and Antle (2011) - How audio and touch feedback can increase empathy.
- Kane, Wobbrock and Ladner (2013) - Useful gestures for blind people: preferences and performance.
- Kuber and Yu (2010) - Study on touch-based authentication.
- Moyes and Jordan (2021) - How interfaces using multiple senses can be a competitive advantage.
This is my first one. If you have any suggestions or want to contribute, feel free to do so. I would appreciate it very much! 😊
Top comments (5)
That's so many references! Did you take classes on haptic feedback? How did you find the resources?
Great post. I have never really though about using haptic feedback on the web. I love the idea of using it to "increase contrast" in a non visual way and make things more accessible.
I wonder how much of an issue this is. I have gotten the impression that since JAWS is more powerful than Voiceover, most people using a screen reader are not on MacOS. (I should find a reference for that information haha)
They have been my hyperfocus for the past two weeks! 😂
I found the references using Perplexity. I refined my search until I found them. Unfortunately, some of these references required payment, and oh, they are expensive.
Real research costs money. Good work.
Great post about haptic feedback! It's incredible how this functionality enhances user experience on web and mobile while helping developers with its simple code. 😎
And this feedback is very important for people who have motor limitations.
Now, the only thing missing is API support on iOS and Safari (Why, Safari? Why? 😅)
Great take on haptic feedback! 👏 Touch can enhance web experiences, and your useVibration hook makes it easy to implement. 🚀