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 Law7, 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)8, 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.

Theo

Dave Smith

Totally agree, although mobile platforms vary in size much more than even that range. Most mobile platform OEMs work off of an average size of approximately 160ppi. Even Android, which has an extremely wide variance of device densities, scales them all off of this as a base measurement (their MDPI bucket). However, that brings up the point that the pixel calculations in this article are flat out wrong. All these calculations were done assuming a screen density of 72ppi, which no mobile device has, it’s how font point size is defined.

It should first be noted that Microsoft’s current guidelines do not call out pixel widths, but physical sizes in mm. The linked PDF in the article is invalid:

Using the proper average, that 7-10mm recommendation that Microsoft/Nokia have is actually about 44-63px at 160ppi.

Also interesting that they completely neglected to mention the Android Interaction Design Guidelines, which recommends 48dp (48px on an MDPI device):

When you look at them from the right perspective, the individual OEM guidelines are actually quite consistent, especially in the ways they describe handling this issue across device variance. This article absolutely has the right idea and has some great points that should be taken to heart, but the calculations used to support the position are sending the wrong message.

2

4

IDIUX

It is foolish to use pixels as a unit of measurement to relate to physical space.

There are also complex error correction algorithms employed by device manufacturers and OS vendors, taking into account human touch input inaccuracies, allowing us to [fairly] successfully tap on small hit-areas such as web links.

0

5

Kim

So if I design something in Photoshop at 72ppi, throw it on a server and look at it on a mobile browser, then it will be smaller than I was thinking it would be? If so, what is the best way to design something that appears to be the same size on all devices? (I’ve never designed for mobile, so this would be nice to know.) Thanks.

Andrew E. Clark

Alex Taylor

The size of the button is important, but what we’ve found is that the space between buttons is also very important.
When designing a new menu we added 5px of space around the buttons, which _seemed_ to be more user friendly than making the buttons 5px larger all round.
I can link to the site if requested, but not sure it’d be appreciated, Alex

Adelle

Great article – thanks so much for that research! One thing to consider is that the exact pixel size is relative to the resolution of the device – something to consider when developing for multiple platforms.

Cosmin Ciobanu

sloan

This article really should not be speaking in terms of pixels. Every screen has different DPI, so you should always speak in terms of physical dimensions and then augment based on the target devices’ touch capabilities. The way most mobile/tablet screens work is not based on a “fat touch” area based on the full width of the finger, but rather, because they are capacitive and pressure is not applied evenly or at the same time, they try to determine the center of the touch in a more refined circumference. In essence, you have to test if you really want to get the best results. A good way to think about it is that sketch apps allow you to draw thin lines even though you are drawing with a fat finger-tip.

Pekka Parhi, Amy Karlson, and Benjamin Bederson have a paper titled “Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices” and is a great read for anyone interested in this kind of work as they measure task times and percent of error. Then you can also read about how capacitive screens work, but the manufacturer, the quality, and the software reading the touches all contribute as well.

0

17

naysayer

Nice article. I’ll be happier when we no longer have to squint and poke at 4 inch screens for mobile computing though. That interface is extremely limited. It’s impossible to do any serious work on those things.

0

18

Jarridb

This is a great article. One minor gripe I have is that people keep referring to Apple recommending a minimum target size as pixels. The do not recommend pixels but
what they recommend is 44 x 44 points.

Pixel is the appropriate unit of measurement to use when discussing the size of a device screen or the size of an icon you create in an image-editing application. Point is the appropriate unit of measurement to use when discussing the size of an area that is drawn onscreen.

On a standard-resolution device screen, one point equals one pixel, but other resolutions might dictate a different relationship. On a Retina display, for example, one point equals two pixels

Fabian (capnfabs)

This is a consideration I really tried to build in to the last app I developed (Timecard, for Windows Phone).

I’d further argue that having fewer, larger touch targets on the screen is a great idea in terms of keeping your application workflow simple, and helping the user to not feel overwhelmed. If you’ve got a well-designed app, you shouldn’t need too many different touch targets on the screen at the same time.

Promoting ease of interaction isn’t just about the size of your touch targets – it’s also about the consistency and logicality with which the touch targets affect the workflow.

adumpaul

Max

Andrew

What is great is that innovation can reduce some of these problems. I was recently testing Chrome browser beta on Android.

A common webpage design pattern for a forum is a series of page numbers to jump to a specific page. These are often very small on a mobile browser and wthout zooming it is easy to press the wrong page.

Chrome browser gets around this problem by detecting that you pressed more than 1 clickable element and magnifies that part of the page so that you can select the element you want to click.

Despite these elements being around 10px*10px with a 2px margin this feature stops accidental incorrect selection.

Now I am just waiting for Apple to patent this feature and sue Samsung for using it ;)

1

24

Arun Krishnan

Rakesh

Target sizes are increasingly ignored in favour of eye candy and the article does a good job in bringing forth some general recommendations that could be followed on all devices (though, as pointed out in comments, the measurement units are inappropriate).

The article could have said what it has to say in one third of its length. I’d request Smashing Editorial to give importance to the brevity of an article – people don’t have much time to read. I have a long list of articles bookmarked and unread, solely for the reason that the articles are long. But when I come across small articles I read them then and there.

———————————————————-

1

26

Brett

Nicholas

I believe that the best way to ascertain target size is through testing and use. As noted, screens are fluid, and a touch target should be measured in the real world. I have created smaller targets that are useful, as well as larger targets that due to the use case are useless…

What is the context? What is the purpose? And, how focused is the user?

idEric

This was a great read! As responsive web design becomes more popular, web designers will need to think more about aspects of touch design friendliness to ensure that their designs are truly multi-platform.

1

30

Javier

You are 2 of my favourite blogs to visit and I am glad you are both doing well. Healthy coomptien is good as you encourage each other along the way. Keep it up and I look forward to more quality posts Lye. Your blog rocks Patricia Perth AustraliaPatricia recently posted..

Anders

The general Idea of this article is good but the follow through wasn’t…

As many readers already have pointed out you can’t define touch areas in pixels unless it’s for a specific device or a specific screen size with known dpi. Hopefully the author realizes his/hers mistake and corrects the article so it follows normal smashing magazine standards

Vikram

fjpoblam

You’re absolutely correct. Using your principles, I rewrote a client’s website’s navigation. First, I designed an icon for each link. Then, I rethought navigation: this was an important exercise. Give the visitor only the links *needed* on each page, no dropdowns. Bandwidth-friendly, and even looks nice on large screen.

1

38

Matt

It’s quite simple really – use your common sense. If the button/link looks too small it probably is! If you create your designs using fluid elements rather than fixed size pixel based graphics you will be able to scale your UI elements to the optimum size, no matter what device you’re using.

-1

39

Perry

“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.” Really? So much work? The side of the thumb and the tip of an index finger require the same amount of calories to perform the tapping the function.

If you are testing your experiences along the way with real users, then you would have discovered this anyway. If you are merely designing then throwing things over the wall to development, then yeah, you need some measurements to start with.

The next research someone needs to do is how people hold X device and what range they actually have with their holding hand. Most designers are just pasting functions in the periphery forcing the user to reposition their hands for every action anyway.

Chris link

Elliot Tsang

Steven Hoober

I wish there was a way to purge some of this stuff from the internet. The information here is misleading at best (as discussed in comments, using pixels instead of actual physical sizes) and flat wrong in many other cases. There’s real research on how touchscreens work, and how people use them. For starters, it doesn’t much matter how big your finger (or thumb) is.

You can find a summary of this research here, and links are included to read the longer research reports it’s all based on: 4ourth.com/tppt

manoj

HI Sir/Madam
Can you outsource some SEO business to us? We will work according to you and
your clients and for a long term relationship we can start our SEO services in
only $99 per month per website.
Looking forward for your positive reply
Thanks & regards
manoj
PS:Humble request we are not spammers. We take hours to research on sites and
keywords to contact webmasters. If by sending this email we have made an offense
to you or to your organization then we extremely apologize for the same. In
order to stop receiving such emails from us in future please reply with “Remove
or Not Interested” as subject line. Many thanks for having your kind look to our
email.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

It's finally here. Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Get the book.Free shipping.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.