Haptic feedback tests

Wouldn't it be great to give users of your website some haptic feedback to improve your multisensory brand perception?

On this page you'll find out how to do this with only a few simple lines of code.

Beware – I do not recommend to use vibration feedback for everything!

CONTENT

    About haptic feedback from browsers

    Currently the only way to give haptic feedback from the browser is the vibration. That's why we are going to use the Vibration API.

    The feature is only supported by chrome browsers running on android devices which isn't too much of a problem since over 60% of Website Traffic comes from Google Chrome users according to statcounter.

    To check wheter your browser is supporting the Vibration API or not we can use this single line of code:

    var supportsVibrate = 'vibrate' in navigator;

    Your browser for example --- the API. Of course your device has to support the function, too.

    Examples

    Different strengths of feedback

    First I'll show you a few different strengths we can give the user a feedback with.

    In these examples the feedback is given when somebody clicks on one of the buttons.

    function verySoftVibration(){
    navigator.vibrate(25);
    }
    function softVibration(){
    navigator.vibrate(35);
    }
    function softVibration(){
    navigator.vibrate(50);
    }
    function softVibration(){
    navigator.vibrate(80);
    }

    Patterns

    When experimenting with patterns we can get a little bit more out of these otherwise pretty boring vibrations.

    If you want to stop a vibration pattern just click on the background.

    The following vibration example is already subtle enough that the sound of your devices vibration engine could be perceived first. This one might be interesting if you don't want to alarm your user but give a decent feedback.

    Force sensitive feedback

    Apple is implementing what they call Force Touch in their devices since 2014. This enables them to distinguish between different levels of force being applied to their touchscreens by the users.

    In this example we are trying to imitate this feature in chrome.

    We can't exactly do what Apple does since Android devices simply don't provide this feature. But we can work around this. Assuming the users fingerprint on the screen gets bigger with increasing force applied to the touchscreen, we can simply calculate it's size to imitate a force detection.

    Chrome already does exactly this for us. Just run the following function on touch element detection to receive a value between 0 and 1.

    function forceDetection(e){
    var force = e.changedTouches.item(0).force;
    return force;
    }

    This button gives a feedback if the force of the touch event exceeds a certain treshold. In this example 0.5.

    Applied force:

    What to do if the vibrations aren't supported on our visitors setup?

    The simple solution is: nothing. Just don't run the according functions and let the experience be as it has always been. Your website should – in most cases – work perfectly fine without the vibration feedback. We do only use this experimental feedback to enhance our users experience and their multisensory brand perception.

    Haptic feedback is often most effective when associated with other sensory modalities and must be designed in conjunction with them.

    Karon E. MacLean

    As E. MacLean puts it: You can't rely on haptic feedback alone.

    Because its support and our abilites with it are limited as of now, you should first build your Website as usual and afterwards add those extras on top of it. Vibrations ar an additional feature that isn't recommended for many use cases. Furthermore many users won't be even able to experience it. So use it but don't rely on it.

    Other approaches to give haptic feedback

    Vibration isn't a very good option to give haptic feedback since our possibilites with it are very limited. But there are companies like Ultrahaptics that work on very interesting ideas. I'd definitly recommend to check out how they give haptic feedback with ultrasound.

    Disclaimer

    This website is built to work with google chrome on android.

    If you are using another setup, you won't be able to notice the haptic effects.

    Furthermore the feedback was tested with a Huawei P8 Lite. There is a chance that things could feel different then described on other devices because of the built in hardware.