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