I touched briefly on the ideas of scale and proximity, but since this is such an important topic it’s worth reviewing in greater detail so you can make an informed decision about the layout of your user interface and how you manage the presentation of controls.
Just to clarify, when I say control, I’m referring to any interactive object that appears on the screen of an iOS device. There are two basic factors you need to take into consideration when designing any touch-based control:
Scale: The size of the target area for the control that you are designing.
Proximity: How close that control is to the other user interface elements surrounding it.
These ideas apply equally to both the iPhone and the iPad and are somewhat independent of display resolution. I say “somewhat” because the overall resolution density of the iPad and iPhone is high enough that resolution isn’t a factor anymore. So we have these two basic concerns, target size, and target proximity. Learn more iOS App development Course
Before the iPhone era, I would be making some pretty explicit recommendations about the size of your touch targets. Up until just a few years ago, it was conventional wisdom up that touch targets could not be smaller than a specific minimum size without causing significant usability issues for the user.
This minimum size was usually quoted to be something between 1 cm2 to 1.5 cm2. If you think about it, that’s a pretty big button, bigger than the app icons in iOS. To add to this, it was often recommended that touch targets be spaced apart by that same minimal area as well; in other words, space with a minimum gap of 1 cm on each axis. There was a reason for this.
The technologies that drove some of the older touchscreen systems were not all that accurate. In many cases, the mechanism sensing touch was offset spatially from the actual display itself. To have a usable system you had to account for all kinds of possible discrepancies, including misaligned touch sensors and the parallax associated with an offset surface.
Adding to that was the concern that users needed the psychological assurance of larger controls that appeared comfortably touchable. Luckily we don’t have to deal with all that anymore. However, you still want to be considerate of scale and proximity so as not to create too many challenges for the user. The scale is not so much an issue unto itself.
The capacitive technology used in iOS devices is highly accurate and highly resolved. You’ve probably noticed this when browsing the Web on your iPhone. Even without enlarging the view, you can still tap those tiny little links on a web page with the edge of your pinkie finger. So I don’t necessarily want to be dogmatic about the minimum size of a touch target, at least not in a vacuum.
The key to this is the understanding of proximity. Proximity is important just for the fact that the closer touch targets are to one another, the greater the chance of error on the part of the user. I think that’s pretty much common sense.
But again, I don’t think we need to get dogmatic about spacing distance either because I don’t believe absolute values are useful or even relevant, for that matter.
Here’s how you need to think about control spacing:
The spacing between touch targets should be inversely proportional to the size of the adjacent targets
The spacing between touch targets should be inversely proportional to the size of the adjacent targets. That is, the greater the size of your touch targets, the closer they can be grouped. Conversely, as your touch targets get smaller, they should be spaced farther apart. Smaller targets are more difficult to hit, and when mapped together in a dense configuration they will be prone to user error.
Large targets are easy to hit, so they can be spaced closer together with less risk of user error.
So have at it: make a button as big a single pixel, just know that it may be the only button on the screen when all is said and done!
