User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
1  
Would you have more buttons than the keyboard? – JeffO Sep 2 '10 at 16:49
    
I'm looking at 50. – Mongus Pong Sep 2 '10 at 17:38
1  
Do you really need to put all 50 buttons on one screen? – Kostya Sep 2 '10 at 21:23
    
Yes. It is emulating a 5x10 grid of numbers that the user selects from - similar to a lottery ticket. – Mongus Pong Sep 2 '10 at 22:07
    
How about adding a scroll wheel for picking the numbers similiar to this a3.mzstatic.com/us/r1000/026/Purple/30/ab/8c/… – kba Jun 12 '11 at 0:25
up vote 10 down vote accepted

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

share|improve this answer

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.

share|improve this answer
    
The Apple links are now dead. Can you repoint them to the correct ones? I'm not sure of the specific targets for them (There are now loads of Apple HIGs, what with the Apple TV / Watch etc). – JonW Mar 1 at 11:21

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

share|improve this answer
1  
And how does this translate into cm, mm etc.? Referring to @jensgram 's answer here. – Jonta Jun 12 '11 at 8:26

Just as an addition: Google material design suggests a minimum of 7-10mm for the touch target size https://www.google.com/design/spec/search.html?q=Touch+target+size

share|improve this answer

A lot of UX guidelines revolve around finger tip size and these guidelines vary in recommended size and spacing. Finger tip sizes should not be the sole factor in determining what minimum size controls and spacing should be.

Contact Patch

Consider the actual 'contact patch' made by the finger/thumb when making contact with a touchscreen. You also need to consider errors in judgment made by the user in thinking they have visually centred their touch on the target but in fact the actual contact made with the screen might be slightly off to one side.

Device type

Due to ways that different devices are held and the difference in distance from the user (compare mobile phone to a tablet for example, a phone might be held closer), minimum touch sizes and spacing can vary too. You could arguably get away with smaller minimums on a phone because they are held closer to the viewer and mistakes less likely to be made. For a larger device like a tablet held further away, you may need to increase your minimum sizes to cater for higher chance of mistakes.


There is a great article talking about this and other factors on UXmatters (http://www.uxmatters.com/mt/archives/2013/03/common-misconceptions-about-touch.php).

Snippets from the article:

...only part of the finger or thumb makes contact with the screen...the contact patch varies by pressure and angle

Physical sizes matter, so all good guidelines are in millimeters, inches, typographers’ points, or other real-world scales.

there’s no need to increase the size of the visible target. Instead, you can simply increase the dimensions of the clickable area around a link or button

Design for both visual and touch target areas. Consider users expectations.

Sizes:

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.