In darts, the bulls-eye is harder to hit than any other part of the dartboard. This is because the bullseye is the smallest target. The same principle also applies 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.
What the Mobile Platform Guidelines Say
Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.
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 only 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. 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. 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.
Pixel Width of the Average Index Finger
An MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.
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.
A Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices found that user errors declined as the target size increased. Users were able to tap the target faster without having to make intentional physical accommodations to increase accuracy such as reorienting the thumb, which would have slowed performance.
Another study on Touch Key Design for Target Selection on a Mobile Phone also found that the number of errors decreased as the touch key size increased. In addition, it was provided that the larger the touch key size, the higher the success rate and pressing convenience.
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.
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, follow the guidelines the mobile platform gives you.
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. 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.
But if your app 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 apps.
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. It will make the game feel more adaptive to them.
It’s without a doubt that matching your touch target sizes to the average finger size improves mobile usability for many. Whether your app 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 app to the way they orient their finger, you’re degrading their experience.
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.
Book
Affiliate
Sir, your argument is probably invalid, or I missed something very important. In which part of the MIT article about the FEM finger model do you read the average man finger width?
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.
You’re confusing Device Density & CSS Density…
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 the standard for web graphics.
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.
“The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.”
Really? And what device are you using with a 72 PPI screen?
72 ppi is just a standard reference. To derive actual number of pixels, you can always multiply: n * (your ppi / 72)
72ppi is not a standard reference, it is a complete irrelevance. There is no ‘your ppi’ to multiply by, it is different for all phones.
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Here is an 2007 study I was involved in on the performance of touch screen soft buttons http://dl.acm.org/citation.cfm?id=1518750
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.
Quick mockups is the simplest way to be sure.
Best,
Ian
Fluid UI is now launched and live: https://www.fluidui.com/editor