A few weeks ago I was listing the top things to consider when moving from non-touch screens to touch screens. One of the things I mentioned was to ensure that the touch areas for your UI elements are big enough.
As I said then, we recommend the minimum size to be approximately 7×7 mm with 1 mm gaps. What this actually means is that when placing two separate UI elements next to each other, there is a 1mm non-touchable gap between them. This is to ensure that it’s easier for your app to recognize which element has been tapped.
The most important thing here is that the touch area size reaches the target size; the graphical item for the touch area could be a bit smaller, but there is a risk to this. The user might not realize that touch area is bigger than the graphical area, and cause unwanted triggering of actions when tapping close to the graphic. So the safest way is to keep the graphics and actual touch areas the same size. And certainly you never want a graphic that is larger than the touch area! If y ou did, the user might try to tap on the item and wonder why it doesn’t work (as the touch area is smaller).
In case you are wondering why the minimum size is presented in millimeters, it’s simply because the pixel size depends on your target phone’s pixel density. So it varies between different phones. To avoid using a ruler to see if you have reached the target size for your UI elements, you can rather easily calculate what the target mm size is for the target phone. If you assume the pixels are square, you can use the following equation:
a = width of the screen in pixels
b = height of the screen in pixels
c = diagonal of the screen in pixels
d = diagonal of the screen in inch
l = pixel side length in mm