Touch Targets

The nuts and bolts: The sections of the screen that respond to human interaction are known as touch targets. They go beyond an element’s visible boundaries.

In traditional web design, links and buttons are designed around pixel-precise mouse cursors. But users’ fingers are wider — and therefore less precise. Larger links and buttons make mobile-optimized sites easy to use. Touch interfaces require us to think in inches and pixels because we must account for how easy (or hard) people find tapping on a given button.

Good touch targets make great use of space

One of our upcoming projects requires a mobile-friendly interface. And not just “optimized for devices,” but optimized for people’s fat fingers. Navigation gets extra padding. Footer elements are more spread out. If part of a widget looks tappable, then the whole thing is.

We took extra effort in this product’s interface because we know people are casual. Whether it’s the flick of a finger or a casual mouse move, they’re likely to miss targets that are smaller and further from their starting point.

Let’s say someone’s mouse cursor is on the bottom left side of a browser window. They want to click a link in the upper right. The smaller that link is, the more time they’ll spend trying to get their cursor in just the right spot to click.

Touch-based UIs have a different problem with the same solution. Moving one’s finger to a different part of the screen requires less coordination than moving a mouse cursor. We’re better at hand/eye coordination without a mouse in between them. But fingers press on many more pixels at once. If two small links both fit under a user’s finger, figuring out which the user meant to tap is harder for the computer to figure out.

Not that they don’t try. Touch-based operating systems today actually register taps a few pixels below the “real” tap point because we’ve learned that people tend to press their fingertips slightly below the element they mean to tap.

The rest is up to design.