3D Force Touch: beyond peek & pop

A few days ago I bought an iPhone 6S. I was super impressed with its new 3D touch and I could not wait to start experimenting.

Peek & pop is a great feature to include in an app. The downside: we don’t have much control over it. We can only add a preview and a few actions — iOS manages the rest.

Since I discovered 3D Touch, I have been thinking about new ways of interacting with the content. Peek & pop is a great interaction; but what I really want is to create my own controls.

We need to take into account that, because 3D touch is only available in iPhone 6S and 6S Plus, no action should be completed just by using this feature. The user should be able to achieve any action without using 3D touch (just like peek & pop does), and 3D touch should only provide an extra level of interaction.

Accessing force property

The new force property can be found in UITouch class. To get the user touch we should override touches methods (touchesBegan, touchesMoved, touchesEnded), either subclassing (e.g. UIView, UIButton; see example 1) or creating a gesture recognizer (see below; used in examples 2 and 3).

The force value goes from 0.0 to 6.667. For further details, I extremely recommend Exploring Apple’s 3D Touch post.

Example 1: Force Button

Force Button is a subclass of UIButton that modifies its shadow based on the input force (as seen in the top video).

The above function modifies the button shadow based on input force. You can find another example on how to modify the button scale while its being pressed here.

This button uses 3D touch only for visual purposes, it does not add any extra feature. It might be nice to add an extra event (e.g. UIControlEvents.ForceMaxInside) to add a taget action once the user has pressed the button to its maximum force.

Example 2: Zooming

We are all used to pinch to zoom in and out, it feels natural. However, sometimes it is tricky to use 2 fingers while holding the device with 1 hand. Google maps app tries to solve this issue by using a doble-tap-longPress-drag gesture (which feels weird if you are not use to it).

Using ForceGestureRecognizer (see code above), it is really easy to zoom in and out while dragging your finger. If you have an iPhone 6S give it a go, it feels great.

To achieve this effect, I simply apply a CATransform3D scale to the imageView layer. By doing this, the image scales from its center. To move the image under my finger (zooming to an specific area) I need to update the anchorPoint based on the finger’s location.

Example 3: Controlling animations

The last interaction I am proposing for the 3D touch is to control an animation. To be honest, I haven’t found any interesting use for this interaction (other than being great for fine-tunning), but I would like to mention it (someone might find it useful).

Here is a quick video of an animation being controlled with 3D touch.

These are just a few examples of new ways of interaction that 3D Touch brings to designers and developers. I hope I have convinced you to try 3D Touch.

I would like to finish by recommending FlexMonkey’s bog, and specially his latest post: 3D Retouch, where he uses 3D Touch to modify the intensity of filters.

Find the whole project in github.

Special thanks to @pivalue