Smallest button size and spacing for a touchscreen

Question

For a touch screen, such as the iPhone, what is the smallest size for a button you could get away with?

And how closely could they be shoved together?

I've got an app thats going to have a lot of buttons on one screen, and need to design it so its useable.

Answer 1

(Since I'm kind of lazy, I'll start off by reprinting my answer from a thread on SO)

Recent scientific research has found that:

[A] target size of 9.2 mm for discrete tasks [i.e., single-target pointing tasks] and targets of 9.6 mm for serial tasks should be sufficiently large for one-handed thumb use on touchscreen-based handhelds without degrading performance and preference.

Cited from Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices (Parhi, Karlson, & Bederson 2006). Other sources agree on this "close-to-0.4-inch-rule" (e.g. Designing Gestural Interfaces (Saffer 2008, p. 42)).

Given the iPhone's pixel density of 163 PPI (6.417px/mm), you should preferably aim no lower than 59px diagonal for any target.

(Please note that this is verified for one-handed thumb use only.)

---

If you follow these guidelines the spacing can be eliminated.

tl;dr? It all boils down to the pixel density.

Answer 2

Refer to the iPhone Human Interface Guidelines (that link goes to the guidelines for web apps) for recommendations by Apple. There's a chapter called "Provide Fingertip-Sized Targets" you can probably use to base your decisions on.

Also, don't guess, test. Get some people with differently sized fingers (within your target audience) and have them try to press differently sized buttons in a prototype. That will teach you a lot about what to expect.

Edit: Microsoft's UI Design and Interaction Guide for Windows Phone 7 details "minimal touch target sizes" on page 4. Overall this guide is excellent and a must-read for UI designers working on touchscreen UI.

Answer 3

While developing some android based mobile applications I had to test the smallest touch area that the user can easily and precisely access with a finger/touch (perform click and drag actions).

The tests were made on 3 android based phones: HTC Hero, Samsung Galaxy Spica, T-Mobile Pulse. The phones had 3.2 inch screens except for the Pulse (which has 3.5 inch screen), all of them with screen resolution of 320x480 pixels and capacitative screen surface.

Long story short, everything that was smaller than 20x20 pixels was unusable. Also bare in mind that there should be space around the button (5 pixel margin).