Let’s talk about touch targets, and how the common knowledge of “bigger is better” manifests itself in ways that may at first glance appear wrong and counterintuitive, yet are very usable in the end.
Look at your iPhone’s “missed calls” screen, or any other screen that has the “blue tappable chevron” which in Apple developer lingo is a “disclosure indicator”.
What do you think are the touch targets in each individual row? Clearly, there’s the big section on the left that makes a call, and there’s the disclosure arrow that looks at more detail.
But what are their individual exact borders? At first glance, you might think they go like this.
So there’s this full-width outer container that contains a round-button-like tap target. This is reinforced by the fact that when you actually do tap on the disclosure arrow, just the arrow itself goes into a “pressed” state, but nothing happens to the surrounding space, so it feels like the surrounding space has nothing to do with it.
Long story short, here are the actual tap targets.
I know you can come to this conclusion by just reading the API docs where it talks about how the content of the cell is narrower when using a disclosure indicator etc. But I didn’t connect the dots myself until recently.
So, even though it looks that only the arrow is tappable, in reality, you are seeing two equal-height tappable controls here. If you tap anywhere on the right side of the cell that is in the rectangular area close to the disclosure indicator, it’s the same as if you had precisely tapped on the indicator itself.
The above is not particularly new or insightful to any touch device interaction designer. This information is readily available by reading API docs or experimenting.
One interesting question is, does it matter? Is the small-target version any less usable than the big-target version? By how much?
To answer the question, I did a usability test. Well, this was not the focal point of the test. We were doing a formal usability test of a bigger feature where we had built out a custom table that looked like the first version, where there was a custom table row, where there was a custom disclosure indicator about the size of the blue circle. Just the circle was the tap target, and the area around was still the main cell. So conceptually, it looked like the image above where there is a circular tap target inside a big main cell.
I asked regular users to tap on the disclosure indicator.
The results were eye-opening and devastating. No one could do it.
I’m not talking about 10% or 50% less usable. Literally, people could not hit the smaller touch target even after multiple tries. No matter how much they tried, they kept hitting outside the target into the main cell.
And yet, when I as a professional designer who had been staring at this component for a long time and tapping it over and over tried, I could it hit at every attempt. This is simply because I had learned where the tap target was and could position my finger appropriately, but the target position was different enough from where a normal person taps, that this was a big problem for regular users.
I knew this would be a problem before I went into the test, but it was enlightening to see this validated over and over by several people.
The lesson here is that on touch screens, bigger targets are always and unconditionally better, and sometimes it is OK to fake and lie a little. There is no visible indicator for the blue disclosure indicator tap target—you don’t know where the main cell ends and the blue indicator tap target begins. In the language of Alan Cooper’s “Inmates are running the asylum”, you trade off a little understanding (of where exactly is the border), and what you get in return is success and task completion (being able to actually tap on the disclosure indicator).