Recently we built and launched A Good Enough Guestbook, a place where you can send us doodles and they’ll print out on our little printer. It’s quite lovely and fun, and you should send us a doodle. We might also have more in store for these printers in the future.
In the meantime, it took a bit of finagling to get the doodle interface feeling just right. One issue we ran into was that users would sometimes tap “Undo” a whole bunch in rapid succession. This undo’d just fine, but on mobile devices it would also unexpectedly zoom the page in. While this is often a good accessibility behavior of double-tapping a webpage, it’s unwanted in this interface.
To be honest, the entire Pointer Events spec goes a little over my head, but it also sets up the touch-action CSS property to let you determine how something can be manipulated by a touchscreen. This offers us a solution to the problem.
touch-action: manipulation specifically states that it prevents the browser from time-based interactions like double-tapping. We just apply that to our doodle interface controls and voilà, no more double-tap-to-zoom on the “Undo” button. And the user can still pinch-to-zoom, or double-tap-to-zoom on other parts of the page if they need.
I’ve read that some developers apply this to all buttons and form elements in their apps… I haven’t yet taken that plunge, but I do wonder if that’s more expected by users?