Blog

Understanding 3D Touch from a development perspective

Date

15th January 2020

Read

7 min

Creator

Sarat Pediredla

3D Touch for iPhone is a pressure-sensitive display technology that enables iPhone users to make “Peek” and “Pop” gestures by exerting a little physical force onto the screen’s glass panel. This causes a functional reaction‚ to access Quick Action shortcut menus‚ preview content within apps or animate Live Photos. It has the potential to transform user interface design and improve user experience significantly. 

First introduced with the launch of the iPhone 6s and iPhone 6s Plus‚ Apple had previously released Force Touch‚ which is available on MacBooks‚ Magic Trackpad 2 and Apple Watch. Force Touch‚ however‚ acts as a single press that doesn’t identify exactly where you are touching. 

Xcode 7 and iOS 9 include the necessary APIs for the development of 3D Touch-enabled applications and actions. The addition enables apps to respond to how hard the user presses on the touchscreen‚ like the keyboard shortcuts on a Mac that enable users to quickly repeat tasks. But just like keyboard shortcuts‚ essential features shouldn’t be exclusive to 3D Touch; users must be able to operate an app normally without it. 

The Apple Watch uses Force Touch technology to display actions that a user can perform. Force Touch is not a new idea; BlackBerry experimented with the concept back in 2008‚ and a few Android phone makers also examined the possibility of using Force Touch in their products. In fact‚ Force Touch support has been a part of Android for years; it was introduced in Android 1.0 (API Level 1)‚ in the form of the getPressure() API.  

The aim of Force Touch and 3D Touch is to provide contextual actions that don’t clutter up the screen with multiple options. Apple’s addition is also great for accessibility‚ including a variety of features such as activating the device.

There are currently 3 main ways to use the feature on the iPhone:

Home Screen Quick Actions: 

Home Screen Quick Actions are the easiest way to implement 3D Touch; a simple push on an app icon will reveal a list of possible actions a user can take. This list can be dynamic (depending on context) or static (a permanent list of features). The Home Screen Quick Action API allows you to add shortcuts to your app icon that anticipate and accelerate a user’s interaction with an app. 

A user has always been able to tap an app icon to launch it‚ or touch and hold any app to edit the Home screen. Now‚ by applying pressure on an app icon on the iPhone 6s or iPhone 6s Plus‚ the user obtains a set of quick actions. When the user selects a quick action‚ the app will activate and receive the message. 

The Apple Messages app is a good example of this‚ as it will show you a dynamic list of users. A static list of functions can often be implemented within a few hours. The iOS 9 SDK offers APIs that enable us to define static or dynamic quick actions‚ available to users with new iPhone models.

Peek and Pop: 

[object Object]

Source: Flickr

Peek and Pop reveals a portion of the next screen to the user. We can now enable the view controllers in our app to respond to pressures of various intensities. As the user presses more deeply‚ interaction proceeds through three phases:

  1. Indication that content preview is available. With a light press‚ surrounding content blurs to tell the user a preview of additional content—the peek—is available.

  2. Display of the preview (which is technically known as a peek) with options to act on it directly – known as peek quick actions. Press further‚ and the view transitions to show the peek‚ a view which you typically configure to display more content. If the user ends the touch at this point‚ the peek disappears and the app returns to its state before the interaction started.

  3. Optional navigation to the view shown in the preview‚ which is known as a pop. Alternatively at this point‚ the user can press deeper still on the peek itself to navigate‚ using the system-provided pop transition‚ to the view being previewed as a peek. The pop view then fills your app’s root view and displays a button to navigate back to where the interaction began.

When we employ peek and pop‚ the system determines the pressures at which one phase transitions to the next. The user can tune these transitions in Settings > General > Accessibility > 3D Touch.

A good example of this is in Instagram‚ which allows you to preview a user’s image with a peek. A pop occurs when you push harder on the peek‚ to go directly to the content. Peek and Pop can be implemented in select areas of the app; it’s often used when you are viewing dynamic content.

If‚ instead of ending the touch‚ the user swipes the peek upward‚ the system shows the peek quick actions we’ve associated with the peek. Each peek quick action is a deep link into the app. With a peek’s quick actions visible‚ the user can end the touch and the peek remains onscreen. This allows the user to tap a quick action‚ launching the associated deep link. 

The UIKit peek and pop API provide easy access within an app to additional content‚ while maintaining the user’s context. We can therefore use the peek quick actions API to provide a press-enabled replacement to an app’s touch-and-hold actions. The Web-view peek and pop API empowers us to enable system-mediated previews of HTML link destinations.

Pressure Sensitivity:

[object Object]

Source: Flickr

Pressure Sensitivity has been used in a number of drawing apps‚ including Pixelmator and Paper. Pushing harder on the screen will create a bigger brush stroke. The UITouch force properties allow us to add customised force-based user interaction to an app; whilst Apple has API’s for this‚ they are much more limited‚ so it’s not possible to build your own functions from pressure sensitivity. Some users have experimented with using it as a weighing tool‚ but this digital scale app is against Apple’s Terms and Conditions.

While integrating the feature into apps‚ developers should look past the UI to the app’s core functionality and affirm its relevance. Next‚ use the themes of iOS to inform the design of the UI and user experience; details and embellishments should be added with care‚ never gratuitously. Finally‚ be sure to design the UI to adapt to various devices and modes‚ so that users can enjoy the app in as many contexts as possible. 

Game developers could use this new input method to design more complex and elaborate mobile games. Many productivity apps could benefit from Force Touch; it could simplify operations in Word processors‚ spreadsheets and more. Where content consumption is concerned‚ Force Touch could be used to improve user experience in audio and video players and e-book readers. Meanwhile‚ this feature could add another layer of security to apps and devices.

Checking Availability:

It is important to check at runtime whether a device supports 3D Touch‚ and read the value of the Force Touch Capability property on the trait collection for any object that has a trait environment. Users can turn the feature off while the app is running‚ so read this property when implementing the traitCollectionDidChange delegate method.

To ensure that all users can access the app’s features‚ we need to branch our code depending on whether 3D Touch is available. When it is available‚ take advantage of its capabilities. When it’s not‚ alternatives must be provided‚ such as by employing touch and hold‚ implemented with the UILongpressGestureRecognizer class.

The feature is not limited to just two or three levels of pressure; different pressure levels can be used in a wide variety of apps. With millions of phones now supporting 3D Touch‚ it makes sense to enhance those users’ experiences. For a very small cost it’s possible to implement some of the simpler functions of the feature‚ like Quick Actions and Peek and Pop. 

The main problem with 3D Touch is that so few apps currently support the function. However‚ it won’t be long before these apps become the norm‚ heralding a new era of UI and UX for app developers and users worldwide.