My new project: Tact, a simple chat app.

The Force Touch trackpad, and how to work with its web events

July 13, 2015

One of the new pieces of technology in recent Apple laptops is the Force Touch trackpad. It first shipped in the new MacBook, and more recently also in the latest MacBook Pro models. I got one of the MBP-s, and force touch was naturally a point of interest for me.

The technology is very interesting. Unlike the mechanical “diving board” type of previous trackpads, the Force Touch pad has four tiny engines under it, that simulate physical feedback. There are no real moving parts. When the computer has no power, the pad is immobile. When there is power, the pad gives feedback that is supposed to feel like a real click.

How does it actually feel? Some people complain on podcasts, and talk about how this is a mistake. Others are OK with it.

As for me, it feels quite natural. Sure, it’s different from the physical click, mainly because it is more subtle. But it more than makes up for it with the uniform application of the feedback and click responsiveness over the whole surface, unlike the divingboard-pads where the response was drastically different in the top and bottom parts. And I quite like the subtle fake-click, plus also the second level, the “force click.” There are three strength settings for the click feedback, with “middle” being the default. I tried all three, but I stuck with middle.

So, complaining about force touch is for me the equivalent of complaining about floppies, CD-s, FireWire and other obsolete technology going away. It’s just going to happen and seems inevitable.

Playing with the web events

What good is a new technology if you can’t hack it? The Force Touch trackpad brings many new capabilities that you can read about here. The easiest of them to think about and also build is “force click”, essentially a second-level deeper click. In El Capitan and Safari 9, there are also web API-s to work with force click, and I thought I’d try them.

You can see all about web events and force click in WWDC 2015 session 501 and the accompanying WebKitPhotoBrowser demo, but here’s a quick summary and a code example. (I tried it in JSFiddle first, but for some reason, the force events did not come through correctly there. Hence a separate file.)

The model for force click is very simple, it’s just another level of clicking, with some associated new events. There are extra features you could use, like tracking the raw pressure value and changes in it, but I’m not covering them in this demo.

Two things are of interest regarding the force click.

First, most people don’t and won’t have hardware supporting it. It’s more of a niche thing. Apple also stresses in the WWDC session that you should use force-click as an extra shortcut or decoration, and it shouldn’t be the only way to access important features.

Secondly, it’s tempting to think of force-click as right-click or contextual-click. For example, you can use force-click to trigger QuickLook in many places in OS X, which is kind of a shortcut of an alternative action. While this could be an appropriate use case, note from the state machine that it is possible to repeatedly go between “mousedown” and “mouseforcedown” states without ever fully ending the touch. I didn’t really think about this before starting to look into it more deeply: my initial instinct was to treat force-click more as a right-click and one-shot thing. But it really is continuous and you can repeatedly go between the states. So, when basing any UI on it, just be aware of this continuity.