In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices.

Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.

While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. In fact, their suggested sizes are much smaller than the average finger, which can lead to touch target problems for users on mobile devices.

Small Touch Targets Lead to Big Problems

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback. Using the finger pad would cover the entire target, making it impossible for users to see the target they’re trying to hit. Users use the fingertip to hit small touch targets because it gives them the visual feedback they need to know that they’re hitting their target accurately. But when users have to reorient their finger, it slows their movement down, and forces them to work harder to hit their target.

Not just that, but small touch targets can lead to touch errors. When small touch targets are grouped near each other, users can accidentally hit neighboring targets and initiate unintended actions. This is because the user’s finger overlaps on to the neighboring buttons. And if pressure is not carefully applied in the right spot, it’ll trigger the wrong action. It’s easy for users to make these errors with their index finger. But it’s even easier for them to make these errors if they use their thumb, because their thumb is much larger than the target. Sometimes users will tilt their thumb sideways and use the thin side to hit a small touch target. But this is a lot of unnecessary work.

Thumb use among mobile users is popular. Some users won’t always have two hands free when they’re on their mobile device. Many prefer the convenience of using only one hand and their thumb. Users shouldn’t have to switch from using one hand to two hands, or from their thumb to their index finger to hit a target accurately. And more importantly, the size of a target shouldn’t cause them to make touch errors. Small touch targets make things harder for users, where a finger-friendly target does not.

A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy.

Pixel Width of the Average Thumb

There are many users who use their index finger to tap mobile targets. But there are just as many users who use their thumb as well. The big difference with the thumb is that it’s wider than the index finger. The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.

For users who use their thumbs, 72 pixels does wonders. They’re easier and faster to hit because they allow the user’s thumb to fit comfortably inside the target. This makes the edges visible and easy to see from all angles. This means that users don’t have to reorient their thumb to the very tip to see it hit the target. Nor do they have to tilt their thumb to the side to hit it. One tap with their thumb pad is enough to do the trick.

Finger-Sized is Ideal, But Not Always Practical

As many benefits there are to using finger-sized targets, they’re not always practical in every situation. On a mobile device, you’re working in a limited space. This means when you have many finger-sized targets together, they can take up more space than your screen can afford. However, when you have a few finger-sized targets together, that’s when you can fit them all on your screen without trouble. You will need to measure the size of your screen and touch targets to know exactly how big of a touch target you can afford. If you can’t afford finger-sized touch targets on your interface, use the guidelines the mobile platform gives you instead.

Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. You can use them liberally without the fear of taking up too much space and improve tablet usability instantly. However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using less touch targets than you normally would. But this is a plus because it forces designers to keep their navigation simple and minimal.

Thumb-Sized Targets for Gaming Applications

Another thing to think about is when to use a thumb-sized target over an index finger-sized one. It’s difficult to know whether most of your users will use their thumbs or index fingers on your application. However, if your application is a game, it’s likely most users will use their thumbs to play instead of their index fingers. This is why thumb-sized targets are particularly useful for gaming applications. By making your game control targets thumb-sized, users can play the game with better handling and control. They’re able to see the game control targets as they move their thumbs, and the game will feel more adaptive to them.

It is without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your application is a game or any other, touch targets are designed for users to tap. If the user has to take their attention away from using your application to the way they move, orient or arc their finger to tap a target, it degrades their experience of your application. With this new-found insight, you can create applications that are truly finger-friendly. Finger-friendly design isn’t reserved for the few. It’s a new design standard for mobile applications to follow everywhere.

Pixels are worthless when you don’t know the pixel density of the target device’s screen. A touch area of 72×72 px could be perfect on an iPhone 3GS but is way too small on a Galaxy Nexus with it’s HD resolution or the iPhone 4’s Retina display.

Thanks for the great article! Liked it a lot. Just a quick question: what pixel densities did you assume to calculate from cm (finger size) to pixels (target size)? Different phones have different display resolutions and physical display sizes, so the physical size in cm for one pixel is different depending on the device.

72 ppi means nothing as long as you don’t up/down sample the pixel dimensions. In other words, a 320×480 72ppi = a 320×480 10000ppi image. The way it looks on the screen depend’s on the screen’s ppi and not how you chose it.

Yes, the ppi of every screen is different. The measurements aren’t exact to the human finger/thumb on every device, but they offer a good starting point. I would suggest starting with those measurements and then testing it to see how much bigger you need to make it.

Pixel as a unit of dimension is often practiced but really unreliable. Both DPI and screen size changes over time.

The traditional Human Factors literature recommends 22mm as the minimum (Check the references in my paper for sources), but it is simply impractical on a mobile phone. A basic constraint is that the 10 QWERTYUIOP keys have to fit in one row in portrait mode. On today’s iPhone each of the key is only 58.6 mm/10 = 5.8 mm. Surprisingly one can still tap on them, but it is a matter of speed/error trade-off. It is questionable if the Fitts’ law regression line exactly applies here because the finger obscure the button. …

It should be noted that the touch zones of the keys on the iPhone soft keyboard are larger than the buttons themselves, and in fact they overlap each other. Algorithms determines what your intended press was.

Of course, the issue is that a visual small tap area leads to distrust. With the keyboard, it’s great if you trust it, only good if you don’t.

First of all, thank you for your article. It contains a lot of useful information regarding the ‘touchability’ of different targets.

I concur with the others who mentioned that pixel sizes are useless in this discussion, as different screens squeeze more or less pixels into the same physical space. So only physical sizes matter, eg. 22mm.

One interesting development is that with more space being taken up by touch-friendly interface elements, applications cannot afford wasting space for unnecessary features. Imagine a touch-friendly MS Word tool bar!

Watching people use your prototype will give you the best possible validation around what the optimal button placements, groupings, spacing, feedback etc. are for your app. One great way to do this is with a filming rig like Mr. Tappy – A kit for usability testing mobile device interactions. Just strap on your webcam and watch your users tap-tappity-tap!http://www.mrtappy.com

Check out Fluid UI – http://www.fluidui.com – a new mobile prototyping tool built from the ground up with touch and mobile in mind. My advice is to make a simple prototype of your UI and test touch-target sizes on the actual device.

It’s also worth keeping in mind that the position of the button on the screen is a factor – this may determine what finger gets used for example, and position on screen also determines how much of a stretch this is for the average user.