Seattle Software Developers


Pugetworks Blog Archive!

Minimum touchable area on mobile devices

A recent article on Smashing Magazine discussed the challenge of fitting buttons on mobile devices to the size of a user's fingertip. It's a useful article, and I don't take issue with its overall message, but it did remind me of something I'd been meaning to write about for some time.

A lot of guides for mobile app design quote the minimum touchable area (which you may read as "button size") as 44px. This number comes from the original iPhone Human Interface Guidelines document from the 1st generation iPhone. The Smashing Magazine article also quotes sizes given by Microsoft and Nokia in their own guidelines (34px and 28px, respectively), then goes on to dismiss them as "not consistent with each other, nor ... consistent with the actual size of the human finger."

The thing is, listing different minimum pixel sizes doesn't necessarily mean the guidelines are inconsistent. On different devices, the minimum touchable area will be different, and should be. When deciding on a minimal button size, the important thing to consider is the pixel density of the device's screen in Dots Per Inch (DPI) or Pixels Per Inch (PPI), which are the same thing as far as I'm aware. The pixel density is the number of pixels over a linear diagonal inch (yes, on the diagonal, rather than on a side). So, on devices that crowd more pixels into an inch, the density will be higher, and the fingertip will touch more pixels when it presses the screen.

For example, older iPhones have a minimum touchable area of 44px, and a resolution of 320x480 pixels. iPhones with the Retina display have twice the resolution (640x960 pixels) but the same physical screen size, thus they have twice the pixel density. As you would expect, the minimum touchable area on Retina displays is twice that of older displays, or 88px.

The message here is that if you develop applications for multiple mobile devices (as many of us increasingly do), you can't just memorize a single "best" button size and use that for every screen. You've got to base it off the density of the screen in order to keep it consistent with what actually matters, which is the size of the fingertip.

How to figure out the minimum button size on any mobile device

We assume an average fingertip of 1cm. This is a the width of a hefty finger, or about the size of an average thumb.

If you know the resolution (in DPI or PPI) of your screen (which should be available on the manufacturer's website) you can easily estimate the size of that fingertip on your screen with this equation:

[js] Radius of minimum touchable pixel area = (PPI / 1.414) / 2.54) [/js]

If you don't know the DPI/PPI of your device, you can easily figure it out using the Pythagorean Theorum.

I took the liberty of figuring out the minimum button size for a number of popular mobile devices. This list is already a bit out of date, and will certainly be even moreso by the time you're reading this, but the methodology should still apply even in your futuristic era, dear reader.

Common fingertip sizes on different devices (in px)

  • 45iPhone 4G
  • 74Motorola Droid
  • 71Google Nexus One
  • 65Samsung Galaxy S
  • 60HTC Inspire
  • 58Samsung Infuse
  • 45iPhone 3G
  • 37iPad
Phone DPI Size of
HTC Arrive 259 72px
HTC Desire 252 70px x 70px
HTC Evo 217 60px x 60px
HTC Inspire 216 60px x 60px
HTC Sensation 256 71px x 71px
HTC Thunderbolt 217 60px x 60px
Google Nexus One 254 71px x 71px
iPhone 3G 163 45px x 45px
iPhone 4G 326 91px x 91px
iPad 132 37px x 37px
Motorola Defy 264 73px x 73px
Motorola Droid 265 74px x 74px
Motorola Droid Incredible 252 70px x 70px
Samsung Infuse 207 58px x 58px
Samsung Galaxy S 233 65px x 65px
Samsung Galaxy S II 219 61px x 61px

Design, iPhoneAdam