Why, when and how you should apply FastClick

Some mobile or touch devices apply a 300 ms delay to any touch event, usually in order to detect zooming with double tap (there is a further detailed explanation in Google fast buttons article).

That delay is desirable most of the time, but when users are dealing with some specific areas like carousels, buttons or preloaded tabs, this can be felt as unresponsive and slow.

If you are in a mobile, try following buttons:

The first button shows the normal behaviour, and the second one presents the FastClick approach. Which one do you think responds faster?

When

I recommend using this trick only in specific scenarios, where we really need to trigger an action immediately, as applying it to any click will disable the double tap zoom in most of devices — and disabling default behaviours is usually a usability antipattern!

How

The easiest way is using dave1010 jQuery plugin version of FastClick.

  1. First of all, include jQuery in your head, as usual.
  2. Later, download and include FastClick jQuery Plugin after jQuery.
  3. And lastly, use it. Instead using the classic:
  $('#element').click()

you just need to use:

  $('#element').fastClick()

Easy, isn’t? Cheers!

comments powered by Disqus

This is the personal blog of Ignacio Palomo Duarte, a User experience consultant. If you're looking for portfolio and more information just have a look at the homepage, and if you like this article maybe you can consider sharing it on twitter, facebook or Google+.