Part I of this article looked at various affordances and conventions surrounding 3D Touch, such has how to visually represent depth and the ability for the user to differentiate between 3D Touch-enabled buttons and areas of the screen, and those that just allow for normal touches. This article will focus more on feedback mechanisms for showing how ‘deeply’ the user is pressing in various contexts.

As a review from part I, it should still be noted that Apple’s implementation of 3D Touch, while the technology is really exciting) does lack in the design department due to the lack of visual cues in 3D Touchable areas of the screen. Before a user touches a 3D Touchable area, ideally there should be some visual clue than this UIButton is smarter than the average UIButton. For more on this, refer back to part I.

So far, Apple has marketed 3D touch as a way to do things faster, as evidenced in the recent TV spot featuring Aubrey Plaza, telling everyone to ‘do stuff quicker’

https://www.youtube.com/watch?v=oU-_O9gslgo

Based on the above presentation of 3D Touch, many sources have cited it as simply being the ‘right click’ of touch interfaces, allowing users to perform contextual actions in faster ways, which takes away a lot of the power of the technology. While ‘right clicking’ is only binary in nature, finer motor control can be used in 3D Touch. There are already lots of music apps, such as iMaschine 2 using the feature for volume, tempo and other controls..

When we want to implement 3D touch in non-right click and non-peek and pop ways, visual and tactile design should focus mainly on a single touch point per finger. I think it’s safe to say that ‘3D Swipe’ or ‘3D Pinch-to-Zoom’ gestures would not be easy to perform from a user perspective, so those will be left out.

Dimensional Reference and Depth of Press Feedback

When a user pushes something in the real world, a few things happen depending on the object, and its context. Representing depth and the change in pressure is all about showing changes in an objections relationship with their reference planes. For iOS, and mobile design in general, the reference plane should simply be the standard screen that we see as 2D space.

Scale

In the real world, when an object is pressed or pushed on, it tends to move away within the field of view or in other words, it gets slightly smaller due to the increased distance. As such, providing realistic feedback on the depth of a press should do the same, just so long as the item being pressed does not scale to the point of being too small to see, or obscures information that might still be necessary to the user, such as text.

Victor Baro did some great work in going deeper into 3D Touch, but one of his examples actually made a button grow, which is counter to what the user may expect, given their experiences in a 3 dimensional world.

Instead of making the object in question shrink, another option is to show that the other objects are growing, thus showing a change between the reference plane and the object / button in the other direction.

What’s important here is that users get feedback on the depth of their press. The first and easiest way to do this is through visual feedback.

Visual Feedback

Shadows

An object being pushed down on a flat plain suspended above it would cast a shadow in the real world. Pressing on the object would push it closer to the plane and reduce the blur on the shadow while making its radius smaller. Drop shadows are very easy to add to objects, are easily recognizable and are probably the most accessible way to show depth in 3D space.

While flat design trends in the last few years have eschewed representations of the real world in the form of skeuomorphism (including drop shadows). With that being said, there is a difference between skeuomorphism and dimensional reference. Skeuomorphism is all about keeping the ornamental designs of a real world object to give the user clues to its use. This usually includes textures, topographies and shadows. In using drop shadows, the Dread Pirate Skeuomorphism is still being avoided, but dimensional reference is retained.

Another option is to add geometry that is essentially a cleaner drop shadow, in line with flat design trends. This requires motion of the button in 2D space as there is no blur on the shadow, by showing that the button is moving down, which might take a little more work to make it look right.

Another option is instead of your button or object hovering over the 2D plane, provide an inner shadow on press, so that the button actually sinks below the reference plane, instead of appearing above it as in the previous example.

Pincushion distortion

The above 2 examples have groundings in 3D space, given that the object is not simply a 2D object, but hovering in 3D in relation to another flat plane or object.

When we’re dealing with a flat object with no relation to another object, what happens usually is that is squishes in, much like pressing into a pillow or other soft object. The visual change we see is referred to as a pincushion effect (the opposite of the barrel effect that we get in wide angle images like on a GoPro). If the item being acted upon is larger than the standard 7–10mm size for UIToolbar or UITabBar items, such as a larger UIButton, the pincushion effect may need to apply to exactly where the touch is occurring, not simply the center of the button, which would lead the user down to uncanny valley. the other problem with this is the pincushion effect needs to be big enough to be seen despite the user’s finger obscuring the effect.

Quantified Feedback

Round Buttons

For round buttons the common convention to provide feedback on long touches is to animate a border around the frame of the button. The same could be done for depth of touch.

Square Buttons

For rectangular buttons the same could be done for round buttons above.

Another option is to show the depth of the press along the top edge of the rectangle, either above or within the button itself much like progress-bar style visualization of depth

It should be said though, that this will not immediately connect the user with their experiences in the real world. When users push something in 3D space, no borders or progress bars appear, so this design should be used as a second option to visually representing depth in 3 dimensions.

Maximum depth reached

The advantage of quantifying the depth of the press as shown above, though, is that the user can see when they’ve hit bottom. With visual feedback it’s not as clear, so how can the bottom hit be represented? A simple way to do this would be to change the color of the item, or to add taptic feedback just as a vibration to the interaction.

Fun stuff

Other options for displaying depth of touch are only limited by the imagination. Presented below is a simple barn door animation fed by the force of the user’s touch. Other options could be tied to any other sort of animation, such as pixelation, blur, color tone or hue changes, etc.

Summary: It has to make sense

With all of these examples stated, designers should always be aware of the context of applying these techniques. Currently, Apple’s User Interface Guidelines don’t allow for unique 3D touch interactions, but simply as alternatives for existing regular touch interactions. In other words, the user shouldn’t be able to do something with 3D Touch, they can’t do in another way without it.

Useful questions for designers to ask include:

• Why is 3D touch needed, instead of using existing design conventions?
• How does 3D Touch enhance the user experience in my app?
• What does the visual representation of depth in my app currently look like?
• How can I create interesting interactions within 3D space without confusing my users?

With these questions being posed, sometimes types of interactions and visual designs are simply there to apply to the emotional side of a user experience, in essence to delight them. This is definitely a great reason to use 3D Touch interactions, but in delighting a user, it should ADD to their experience, not take away from it in any way.

It’s important to remember that while 3D Touch does not literally add another dimension to iOS interactions (it still is a 2D plane the user is touching), it does allow for higher sensitivity for interactions we have all been using for almost 10 years.

There may not be a rush to use ‘Force Swipe’ or ‘Force Pinch to Zoom’ any time soon, but the possibility for 3D Touch in multi-finger gestures is definitely possible (think of playing a piano app, resting your fingers on the keys vs. hitting them with various depths to create louder or different sounds.

GitHub repo contains UIButton subclasses for all types of buttons mentioned, with demo app.

NOTE: I haven’t made these IBDesignables yet, but I will in the future.

Originally Published on http://wp.me/p6T66K-4dL