Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

Advertisement

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.

Finger-Friendly Design: Ideal Mobile Touch Target Sizes1
(Image credit: ogimogi2)

What the Mobile Platform Guidelines Say

Apple’s iPhone Human Interface Guidelines3 recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide4 suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines 5suggest 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.

Finger tips and finger pads

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.

Finger and thumb targets

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.

Pixel Width of the Average Index Finger

An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense6 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.

57 pixel target

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.

72 pixel target

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 Devices9 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 Phone10 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. 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.

11
Gyro13 Steam Copter Arcade12 has larger touchscreen targets

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.

(al) (fi)

Footnotes

  1. 1 http://www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
  2. 2 http://www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
  3. 3 http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1
  4. 4 http://go.microsoft.com/?linkid=9713252
  5. 5 http://library.developer.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF.html
  6. 6 http://touchlab.mit.edu/publications/2003_009.pdf
  7. 7 http://en.wikipedia.org/wiki/Fitts_law
  8. 8 http://en.wikipedia.org/wiki/Finger_(unit)
  9. 9 http://research.microsoft.com/pubs/75812/parhi-mobileHCI06.pdf
  10. 10 http://www.arnetminer.org/viewpub.do?pid=495564
  11. 11 http://gyro13.com/
  12. 12 http://gyro13.com/

↑ Back to topShare on Twitter

Creator of UX Movement, a treasure trove of user experience design articles he wrote. Creator of Interface Libraries, a professional wireframing toolkit, Interface Styles, a visual interface tool and Productivity Papers, a system for reaching your goals and becoming an expert.

Advertising
  1. 1

    How can you count target size in pixels? Density varies from 217ppi to 326ppi.

    • 2

      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.

      • 3

        Completely agree, Dave.

        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.

      • 4

        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.

      • 5

        It is (somehow) possible – you should definitelly look at css property device-pixel-ratio

      • 6

        Just want to say that 96px is the standard of sorts for fonts, not 72px.

    • 7

      Andrew E. Clark

      July 18, 2014 8:01 pm

      Exactly. Unless we’re referring to a single pixel density or single device. Pixels are arbitrary.

  2. 8

    This is a brilliant article! This is the type of usability that should be studied more!

    • 9

      It’s not a good article.

      • 10

        Sorry, hit submit by accident. This has been studied in great detail. There a lot of in depth articles on this on sites like ux matters and ux booth. Also some great videos on uie.com.

  3. 11

    Awesome! I had this kind of trouble when I designed the UI for our smartphone app.(MySchnipps)
    Good to know.

  4. 12

    Great to know! Glad someone did the research and found out average pixel widths :)

  5. 13

    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

  6. 14

    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.

  7. 15

    I knew something was up. I can never hit the little x that appears in search bars on my iPad.

  8. 16

    Fabian (capnfabs)

    February 21, 2012 5:38 pm

    Good article, thanks!

    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.

  9. 17

    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.

  10. 18

    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.

  11. 19

    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

  12. 20

    Tim from IntuitionHQ

    February 21, 2012 4:52 pm

    This is a great article. There should be more usability studies about this. I was happy to find out the average pixel widths. Great research.

  13. 21

    Nice tutorial of finger-Friendly Design.Thank you for sharing.

  14. 22

    Thank you, very very interesting! :)

  15. 23

    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 ;)

  16. 24

    Very good article…

  17. 25

    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.

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

  18. 26

    A handy list of mobile device display PPI values.

  19. 27

    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?

  20. 28

    Great article I liked that research ,but pixel is not a standard measure unit . So that’s another thing to worry about working on cross-platforms applications

  21. 29

    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.

    • 30

      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..

  22. 31

    Considering that we have varied finger sizes, testing would probably the best measure.

  23. 32

    awesome tutorial for new technology.i think it can change our future by taking this article.if we follow this,we can become a technologist.thanks.
    dream

  24. 33

    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

  25. 34

    48 dp for Android. How does that compare with others that specify pixels?

  26. 35

    I was developing an application for iPad. This tutorial could have been written four month before… Anyway very helpful for future projects.

  27. 36

    Brilliant! good to know and thanks for sharing the research.

  28. 37

    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.

  29. 38

    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.

  30. 39

    “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.

  31. 40

    I read with interest this writing. There is one more thing that caught my attention. This site has full details on photoshop. I highly recommend.

    good work

  32. 41

    It’s a good thing to have

  33. 42

    This is great! Thanks for sharing~

  34. 43

    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

  35. 44

    Here are some major elements that this blog have taken a deep dive intp iOS 8 features to find out what makes it special. – http://bit.ly/1nFPUxP

  36. 45

    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.

↑ Back to top