3D Touch: Bring Your Apps to a New Dimension

Overview

I’m gonna be talking about the 3D Touch APIs. I currently work as an iOS Engineer at SoundCloud in Berlin, a music streaming app. Just to set the overview of what we’re gonna be going through, first we’re gonna take a look at 3D Touch and why it rocks. Then we’re going to go through how you can integrate this into your app. 3D Touch was first introduced in iOS 9 in 2015. And it was improved upon in iOS 10 last year. There are about five different integrations so we’ll take a tour through each of these. The last thing we’ll look at is a deep dive into the APIs so we can see how we can actually build these integrations into our app.

Brief History of 3D Touch

Probably most of you have heard of 3D Touch before but just in case, we can take a zoom out to look at a little history. 3D Touch was first introduced with the iPhone 6S in September 2015. And any phone that came out later than that is equipped with a 3D Touch display that can sense the pressure that a user applies to the screen. Apple apparently spent five years working on this. So it was quite a bit in the making. So it’s ever the more reason why we should integrate this into our apps.

Benefits of 3D Touch

Starting with iOS 9 these APIs were exposed for us to utilize. So, why should we add 3D Touch support to our apps? From a product perspective, 3D Touch integrations speed up the time it takes for your user to get to feature that they want to use in your app.

Higher User Interaction

More and more each year, Apple is introducing ways for the user to interact with apps without actually opening them the traditional way. We’ve seen all sorts of extensions come out in the past couple of years. 3D Touch is another way to get to the feature in the app without going through many screens to get there. We’re competing for users’ attention more and more each year so this is a way to circumvent that.

App Store Visibility

Another thing that is a benefit of integrating 3D Touch into your app is that you can get some more visibility in the App Store. Apple actually has a section in Featured called Enhanced for 3D Touch. So you can potentially reach more users if you integrated this.

Easy to Use

Most importantly though, the 3D Touch APIs are actually really easy to use. That’s the reason why I wanted to talk about these with you today. Because if you haven’t had experience with them yet, it can be a really simple way to provide quick wins to your users.

Getting Started with 3D Apps

Let’s get started on our tour of what options are available for integrating 3D Touch support into your app. We’re gonna take a look at Home screen quick actions Widgets (formerly Today Extensions, renamed at iOS 10) Peek and Pop Custom IP Preview Interactions- Notification Content Extensions.

I thought it’d be nice to look at how we integrate these 3D Touch integrations through the lens of building an app. For the purpose of this talk, I created an app called the Caribou app and it’s a phrasebook app that provides you the phases you need in a foreign language. In this case Japanese, to help you in a particular situation.

For example, when you open the app you’ll see familiar everyday experiences like going to a cafe, going to a bar, or asking for directions. You can tap on cafe for example, in the Experiences tab and the app will show useful phrases for ordering a cup of coffee or tea. And you’ll see the text as well as be able to hear the audio.

With this sample app in mind, Caribou, let’s add Home screen quick actions to it. There are three actions that appear when the user 3D Touches on the app. You’re able to provide up to four so you should prioritize what you think would be most important to your users and provide them a high value. In this sample app we have two static quick actions, Search and Saved Phrases, and one dynamic quick action, Add a Cafe.

Static Quick Actions

I’ll go through the differences between static and dynamic quick actions. Probably you’ve seen some of these before. Static quick actions are set once and generated during compile time. They’re available as soon as the app is installed. To provide static quick actions is super simple. All you have to do is define what the quick actions will be in the info.plist file.

You can provide up to four, but your then your app will only be able to have static quick actions. In this screenshot of the info.plist there are two shortcut items that were provided. Out of the properties that you need to define in the info.plist there are two that are required and three that are optional. The two that are required are very straight-forward.

There is the UIApplicationShortcutItem type. This is used as an identifier later on when you decide what to do when the user selects that quick action. The other one that’s required is the UIApplicationShortcutItemTitle, It’s a bit of a tongue twister. And that’s very self-explanatory. It’s just what the user sees when they 3D Touch on your app icon. Those were static quick actions.

Dynamic Quick Actions

Now on to dynamic quick actions. These are registered in your app at runtime. So if the user has never used the feature that generates the dynamic quick action, they won’t appear.

Dynamic quick actions are defined using the same ShortcutItem class as static quick actions. But instead of being in the info.plist, you’ll just define it when it makes sense to store that as a dynamic quick action. For example, if the user in the Caribou app just tapped on “Going to a Cafe” that might be a good point to add a ShortcutItem “At a Cafe.” So we would create the ShortcutItem and then add it to the UI application’s ShortcutItem array.

That gets us through what the user sees when they 3D Touch on the app icon, but how do we bridge this with the action that happens when they tap on the quick action? For instance, if they tap on a Saved Phrase, you wanna go to Saved Phrases tab.

In the AppDelegate, your application will receive callbacks when the user selects a quick action. This when you wanna check the UIApplicationShortcutItem type and according to that type, you wanna deep link the user to the appropriate place. For Caribou there was Saved, Search, Saved, and Recent Experience so you would deep link into each of those tabs.

Widgets

Now onto Widgets. I find that it’s interesting that Apple decided to rename Today Extensions to Widgets and they’re trying to feature them a little bit more than they were in the past. In order to take advantage of Widgets, which appear when you 3D Touch the app icon, all you need to do is convert your Today Extension, if you already had one for your app, into providing two different display moves: compact and expanded.

When you 3D Touch the app icon the compact mode shows up. So you just need to make sure that it’s implemented so that the right information is going to be shown. It’s super simple process.

Peek and Pop

Now Peek and Pop. This is next 3D Touch interaction we’ll explore. You’re probably familiar with this one as well. It’s used in lots of Apple’s apps such as Photos and some really popular 3D party apps such as Slack and Instagram. Peep and Pop let you preview content as you can see in the animation. By touching on the content before, it allows you to preview what’s going on before you commit to navigating to it.

In our example for Caribou, it might be useful for the user to be able to 3D Touch one of the experiences to preview the English to Japanese translations without having to navigate to the screen.

But before you actually implement this, there’s something important that you need to do. You need to make sure that you check that the user is able to use 3D Touch because according to what device they’re using or what iOS version, or if they’ve just decided to turn off 3D Touch capabilities in the system wide settings. You may or may not be able to take advantage of this.

So how do you do this? Whatever viewer is taking advantage of Peek and Pop needs to check at runtime if the device supports 3D Touch. We can do this by checking the Trait Collections for such Capability Property.

Apple recommends that you do this in viewdeadload After you check if the user is able to take advantage of 3D Touch in viewdeadload you need to make sure that you listen for updates on the Trait Collection because it’s possible for the Trait Collections properties to change during runtime.

The user can decide to opt out of 3D Touch while they’re using your app. So you need to make sure that you either register or un-register for previewing in this case for Peek and Pop according to if Force Touch capability is still available.

Since this isn’t available for all users, you might be wondering, “Should we provide some sort “of backward compatibility?” To be able to take advantage of something that’s similar Force Touch and Apple suggests that you provide an alternative if you can. The closest interaction that they suggested is to use UILongPressGestureRecognizers press and hold. This will help alleviate some features that users could be missing out on that don’t have the newer devices.

Once you have these safety check in place though, you can go back to Peek and Pop. Once you’ve registered for previewing in view deadload your view controller should conform to the UIViewControllerPreviewingDelegate.

View Controller for Location and Commit

This delegate only has two required methods. It has a view controller for location and view controller to commit method. For view controller for location for our example, it would pick up on the CollectionViewCells location for Cafe and it would decide to return the view controller relevant for Cafe Phrases. And for view controller to commit, this is the view controller that you want to be showing once the user has decided to continue with Force Pressing. So the view controller is past tense, all you need to do is call show. This is such a dead-simple integration to your apps it really could take such a short amount of time. And it makes sense to add it to your app if you have a relevant feature.

UI Preview Interactions

Peek and Pop allows to determine when the user was pressing hard enough to activate the threshold at Peek and Pop. But what if you wanna customize the behavior of the app according to the exact pressure the user is sending via 3D Touch? That’s when UI Preview Interactions come in handy.

These were introduced in iOS 10. They allow you to determine the exact amount that the user’s Force Touching on a view on a scale from zero to one. If the user, when they start pressing, it’s gonna be closer to zero. As they continue to apply more pressure, we’ll get a reading that’s closer to one.

For the Caribou app, for someone who doesn’t know any Japanese at all, I don’t think that the audio is actually working. Or it’s very, very low. So I’ll quickly explain what’s going on. If you tap on one of the phrases, for example if you wanna ask, or if you wanna say that you’ll have a coffee please, you would tap on the first table view cell. And it would start playing the audio in Japanese of how to ask this. And according to the pressure sensitivity reading that you’re getting back, it will either play a slowed-down version of this phrase or the regular speed.

I mentioned before that this was introduced in iOS 10 and the scale goes from zero to one, soft press to a hard press. So how do we do this? First you create a UIPreviewInteraction with the source view. In the example that I just showed the source view would be the table view cell. And then we would set our cells as a delegate. And implement to required functions.

In our case, the first function callback that you get when you’re conforming to UIPreviewInteractionDelegate is preview interaction did update preview transition with transition progress. We can change the alpha of the play button that was appearing with the transitionProgress and we can change the playback rate according to the transitionProgress, as well.

We’re also required to implement previewInteractionDidCancels. So this is when the user picks up their finger from the phone indicating that their intent is to no longer continue with the preview interaction. In this case, you may want to reverse the actions you started when they were first touching. In our case, we could take away the play button to set the playing view alpha to zero and pause the playback of the phrase.

Maybe you’re getting the gist of it that a lot of these 3D Touch integrations really just require implementing some sort of delegate and then there are two or three required methods. So, pretty quick way to increase value to your users.

In iOS 10 notifications had quite a bit of changes and one of the changes that they had were that there, when you 3D Touch on the notification, you can display more content to your user. 3D Touch on a notification makes the notification much more interactive.

In our example app, I actually integrated with the Foursquare API in order to determine the user’s location and if the user is walking by a coffee shop, then the user will get a notification asking if they’re trying to order coffee in Japanese.

UNNotificationContentExtension

If the user Force Touches on the notification then it will come up with the phrase and the translation. The way that this is done is, there are three steps for this. First you need to create a UNNotifications framework. This is a separate, you need to add the UNNotifications framework and you need to create a notification extension, which is a separate process from your app.

In this UNNotificationContentExtension you need to conform to the protocol in the View Controller. This UNNotificationExtension in the View Controller and the extension, they’re just one required method that you have to implement. It’s called didReceive and it receives that notification that was sent through.

In order to determine what to display to the user, your notification should provide information the user info dictionary that’s going to give you enough information to populate the view with whatever is necessary.

In the Caribou app example, we are able to pick up on the phrase from the user info dictionary and then the phrase has a original phrase and a translation phrase. So we set the text labels accordingly in the view.

I’ve shown you all the different ways that you can integrate 3D Touch into your app. I think this is a really easy way to save time for the user and as you can see it’s really easy to integrate into your app. These are some quick wins to keep users engaged without them having to go through a more laborious process of tapping through the app in many different places.