A design exploration of 3D Touch: Affordance
When 3D Touch was first announced a couple of months ago, I was excited about the potential for new interactions on touch screen devices as it quite literally adds another dimension to how we use them.
When I first saw the videos highlighting its use, I was disappointed to say the least. When Multi-touch was first demoed back in 2007, we were all blown away by what it could do, but in 2015, my reaction to what Jonny Ive called “the next generation of Multi-touch” was ‘Really? This is all you could come up with? Three things: App Shortcuts, Peek and Pop. Yay?’
What baffled me most was the visual design behind the implementation. Which of the icons below are 3D Touch enabled?
I’ll give you another minute…
Give up? As of the writing of this article, 17 of the 23 icons above are 3D touch enabled, but you wouldn’t know it, because the design has not changed. Currently, you just have to deep press on all the icons to see what they do. Users are forced to ‘explore’ and wind up at dead ends, which is such an empty action and a waste of their time and energy. This is UX 101, something we as User Experience, User Interface Designers and Software Developers want to avoid at all costs. When designing for interaction, we want to make it clear what users can do, without them having to figure it out for themselves.
This first article will focus on static design for 3D touch, exploring how we can tell our users that something has depth. The next article will focus on feedback mechanisms to let users know how ‘deep’ they have touched.
Affordance
When our brains sense something in our environment, we have a natural ability to figure out what can do with it. Anything is possible and all animals have that ability to some degree. In the case of interactive design for 2D interfaces, our input is mainly visual so it’s the clues built into what we see that tell us what we can do with it. When we look at the above, quite easily, our brains jump to seeing this:
All this says is those black rounded things are different — do something with them! So we do based on what we know we can do: touch.
With the addition of parallax effects in iOS7, which make the items jump out from the background, this was made even more clear: This isn’t rocket science, and it totally works for 2D interactions such as touch.
Depth Affordances
The challenge now is, how do we represent that something has depth with 2D visual design? Well, this is a pretty simple question, and Steven Bradley gives a great overview of how this is done.
I’ll go over a few here, then we’ll dig deep into an exploration for iOS.
First you’ve got an object’s relative scale to other objects. The male symbol below is obviously in front of the female symbol below, because of the size and location. The box simply adds to our awareness of size in perspective.
Next, you’ve got shadow. In the image below, the left box is obviously in front of the right box, due to the different shadow it casts.
Another way to do this would be with skeuomorphism, using design languages to represent real world objects (paper textures in notepad apps, page turn animations in reading apps, etc). As Apple is moving away from this in their design language as of iOS7 in favour of Flat Design, I won’t go too deeply into this.
What is clear is that visual perceptions of depth within 2D design are influenced by the real world and how we perceive the real world. Our evolved ability to judge distance and space based on shadow, movement, size and other factors tell our brains ‘hey, there’s depth there’. The question then is, how do we do this for iOS and designing for 3D Touch?
In the next section I’ll present a few options for representing affordances for 3D Touch using iOS icons as an example, with a brief explanation of why they work / don’t work.
Examples
First we’ve got the standard Drop-Shadow. This shows depth quite well, but for darker backdrops, this would make it difficult to see. If you have a dark UIView as a button’s superview, this would be almost impossible to see.
At the same time, the visual difference isn’t great enough. See the HealthKit, Wallet and Settings icons? In order to make this difference more striking the drop shadow would have to be even more pronounced.
Another problem with this method is the addition of parallax animations post iOS7. These buttons/icons moving around against the backdrop would tell our brains they are offset on the Z-axis, so adding drop shadow to that would make it a bit confusing.
This variation on the Drop-Shadow (with little blur) shows depth through a box-like design, making it appear that the button itself is three-dimensional.
While this works quite well on the light backgrounds, it doesn’t work so well on a dark one.
It does have the advantage in keeping with a more flat design, and staying more Apple-ish.
This option simply adds a semi-transparent border to the button, telling the user that it’s different from the others. To be clear, this actually doesn’t scream ‘depth’ to the user, it just highlights a difference.
The user in this case, would need to explore and tap these different buttons to see what they could do. We can do better than this.
This design, based on the look of Time Machine, shows the button fading off into the distance.
Because we’re seeing the same button cloned, it is less easy to tell the difference between the types of buttons than we’d think.
Overall, this option is simply too busy looking, and would clutter the design of an app too much. It would look pretty cool with a parallax effect added to the ‘clones’, but overall this would be a poor choice.
What about enlarging the buttons in contrast to others to make them more visually differentiated? This totally doesn’t work because it gives no clue to depth, all it does is keep a 2D design and make the icon bigger. What does this even mean?
This is by far the ugliest option. It uses a common convention among icon and button designs to add depth. While this was just a quick and dirty representation, colours could be added to the buttons to match them, but this moves back to pre-iOS7 designs, adding skeuomorphism to create a visual representation of a physical object.
Interestingly enough, the difference between non-3D Touch buttons and those enabled with the feature, is very clear here.
This last option is a combination of some of the previous ones we’ve seen, namely the Drop-Shadow and the Border.
By adding a backdrop to the button, then a drop-shadow, we see a flat surface behind it, telling us the button is visually different, with the added bonus of seeing the button has depth.
Summary
While the examples here are by no means exhaustive (I could have gone into skeuomorphism way more), hopefully they provide a good jumping off point for how we visually represent content that has 3D Touch features.
What’s exciting as we move forward is the potential for all different kinds of new interactions and designs based on this.
Just like hamburger menus and pull to refresh, I have no doubt that other great designers and developers will work to meet this challenge.
Feedback
The next topic I’ll explore is how we can provide visual feedback to the user with regards to how deeply they are pressing. Currently, the home screen does this with the addition of a light gray border as you press, but this is difficult to see, even if you have the smallest of fingers.
Until next time…
