Why Instagram rushed to adopt Apple’s 3D Touch technology

With the introduction of Apple’s latest iPhone models, one of the most interesting features is its 3D Touch. This enables a so-called “Peek and Pop” feature that lets users press on the screen lightly to launch a quick pop-up window that offers a glimpse of the content.

Naturally, once it was revealed to the world, 3D Touch became of interest to developers. Instagram became one of the first to integrate it into its popular photo-sharing application. Today the team has shared some insights into how they used 3D Touch to enhance the user experience within the app.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":1814446,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,dev,social,","session":"A"}']

Apple’s 3D Touch is a hardware feature currently exclusive to the iPhone 6s and 6s Plus. In order for applications to use it, developers have to access three API feeds, each of which powers different interactions. The first enables Quick Actions, which lets you select up to four context menu items from the app’s icon. The next gives you the Peek and Pop feature, while the last concerns the exact pressure (or force) needed to execute the whole process.

Because the whole purpose of Instagram is for people to enjoy looking at friends’ and total strangers’ creative photos, simply enabling 3D Touch wasn’t enough. It needed to be done carefully to make sure that users either had the same or an even better experience.

https://youtu.be/3DMOSn6WLwg

Within the home screen, users can force-press on the screen to pull up some commonly used actions: search, send a direct message, create a new post, and view activity. Instagram said adding these shortcuts to the home screen wasn’t difficult — it just required some extra lines of code within the application, and then some tweaking to account for whether a user is logged in or not.

So once a user has accessed Instagram, the next step was making the Peek and Pop option cool. The use case the company settled on was when you come across photos and videos and want to have more information without having to load the entire image.

Previously, when you’re browsing through your notifications and tap on someone’s username, the app takes you to a different page. Then you have to hit the back button to get back to the previous screen — it’s a very interruptive experience.

With Peek and Pop, when you force-press on a username in the News Feed, or on an image or video within the notification tab, Instagram will let you glimpse that profile or media without having to commit to navigating there.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":1814446,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,dev,social,","session":"A"}']

Instagram said it deployed some code in its app that basically is conditioned to display a preview of something if a 3D Touch is registered. Usernames anywhere in the app and thumbnail images are the main options that will display a peek if force-pressed.

https://youtu.be/2Lu396IrLhk

One issue Instagram came across was how to display a profile peek if not all the data is available. As it stands, the app only loads data that is currently needed and caches it for later reference to prevent wasting users’ bandwidth. To overcome this, Instagram tweaked its code to accommodate specific events that make calls to fetch network resources and update the latest photos or follower counts in the peek.

In the end, Instagram views 3D Touch as more than a fancy way to “right click” on a mobile device. In the company’s hands, the feature offers new depth and interaction that really give users a new perspective on how to view photos. With over 400 million monthly active users on the social network, quite a few photos and videos are being uploaded every day. The quicker and simpler it is to take action, the better the experience users will have.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":1814446,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"bots,dev,social,","session":"A"}']

For more information about Instagram’s use of 3D Touch, click here.