69

I'm designing an iPhone app that features a rather large set of onscreen rounded rect buttons. Given finger-based touchscreen UI, what do you think would be the smallest sensible button size? I need to fit as many of them as I can in the viewport without compromising the usability too much. Maybe there's an Apple-recommended minimum size? Right now it's 33x33, and it looked OK on a simulator, but I was playing with the app on a real phone last night, and it was awkward - the buttons felt too small.

Seva Alekseyev
  • 59,826
  • 25
  • 160
  • 281
  • 2
    This may sound snarky, but have you considered a different UI? There are very few situations where you need to have a screen full of buttons all available all the time. – Alex Feinman Dec 18 '09 at 17:24
  • 2
    This may found snarky, but yes I have :) This button sheet (not necessarily buttons, on other platforms it's clickable images) is the defining feature of the app. There are all kinds of collapsing/highlighting/filtering options for navigation, but the default view is, yes, kinda large - 10 columns of average length 63. On PC/Web it's three pages worth of vertical scrolling. On WinMobile, it's 9 pages. On iPhone - to be determined... – Seva Alekseyev Dec 19 '09 at 18:58
  • This question appears to be off-topic because it belongs to the UX Stackexchange site @ http://ux.stackexchange.com/ – kumarharsh Jun 26 '14 at 10:43

6 Answers6

110

Apple says that the avg finger tap is 44x44 (from WWDC). All table rows are recommended to be at least that height. It is common for icons to appear 32x32, but have padding to make the touchable area 44x44. Of course, people can tap a 1x1 if they are very careful, but why make people try harder than they need to in order to use your app?

coneybeare
  • 33,113
  • 21
  • 131
  • 183
  • 77
    And of course Apple violates this with the infuriating App Store application free/install button... – Aaron Dec 18 '09 at 15:56
  • Thanks. The scrolling will be a kill. On Windows Mobile, I was getting away with 24x24 buttons, 'cause of the whole stilus thing... :) Then again, who knows how many customers did I lose with that. – Seva Alekseyev Dec 18 '09 at 16:15
  • 3
    When you are talking about the finger tap being '44x44' this is in points correct? – Mark Norgren Apr 26 '11 at 21:24
  • 2
    At the time of this posting, it was the non-retina display and in reference to pixels on the device. Now, with the retina, it would be doubled to 88 pixels. – coneybeare Apr 27 '11 at 01:24
  • 16
    Don't think pixels when talking about UI, think points. The answer is still 44x44 points no matter retina or not. – Jonny Mar 08 '12 at 09:23
  • Is the "width: 44pt" and "height: 44pt" same as this? I guess pixels isn't correct? – Capuchin May 06 '16 at 11:03
55

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

jensgram
  • 31,109
  • 6
  • 81
  • 98
  • 2
    +1 for mentioning actual dimension and not pixels ^^ (though I guess Iphones so far use identical screens perhaps?) – Oskar Duveborn Jan 07 '10 at 11:13
  • @Oskar Duveborn The pixel density is the important part. The rest is just arithmetics :) – jensgram Jan 07 '10 at 11:27
  • Fantastic. This is a great point of reference for developing touchscreen UI in general. Thanks a lot! +1'ed – Dev Kanchen Apr 02 '12 at 20:40
  • 9
    Btw, if you consider 9.6mm to be the ideal (instead of 9.2), then the minimum size comes out to be 61.6 px diagonal, which in turn corresponds to a 44-px square - exactly what Apple recommends! Once again (came here on an unrelated search after 2 years!) nice research. – Dev Kanchen Sep 15 '14 at 14:12
  • I just thought that I'd add, for a square button, 59px diagonal is just under 42 x 42 sides. This is compared to Apples recommend 44. – narco Dec 18 '18 at 11:01
4

Apple is not consistent in this, and there are no hard rules.

They recommend you provide Fingertip-Size Targets in the UI Guidelines, and then go on to say that the calculator buttons are 44x44.

Also in that document they say that images for toolbar and navigation icons should be 20x20, and for tab bar icons should be 30x30.

I think you have to simply test your application and make sure that it's easy to press the buttons - even when you have fairly large hands...

-t

Tim
  • 2,794
  • 1
  • 17
  • 10
  • 2
    "Also in that document they say that images for toolbar and navigation icons should be 20x20, and for tab bar icons should be 30x30." -The icons, yes, but the hitbox extends around the icon. – Maciej Swic Feb 21 '13 at 13:21
2

I could have sworn they said the minimum was 37 pixels, but I'm finding 44 today. Either way, 33 seems small.

(Note that images can be smaller because they're often part of a larger rectangular area.)

(You might get away with fewer pixels on other devices, if the pixel size is larger.)

David Dunham
  • 8,139
  • 3
  • 28
  • 41
  • 8
    I could've sworn for the life of me it was 42, since it's the answer to the Ultimate Question of Life, the Universe, and Everything. – The WebMacheter Jul 22 '12 at 19:18
2

In practice while creating a custom web-based device UI on early touch screens, we found it important to design for what one of our beta testers referred to as "my fat fingers." And he was right: it is easy to design elegant, fine controls that a significant number of users will find error prone or unusable. In that project, the exact size was application dependent, but that tester found 40 x 40 to be usable (double that for hi-def/Retina displays), anything less increased the number of misses and errors (and frustration); and as a bonus, people with slender fingers found it felt like they could move faster and didn't have to be as precise, which made the whole thing feel smoother, less subjective friction, more breathing room. The trick is to make controls of that size not seem clunky or overbearing; one solution is mentioned above, making the visual part of the control smaller than its actual dimensions, though that isn't a universal solution.

Marlin Ouverson
  • 101
  • 5
1

According to HIG it should be at least 44pt x 44pt:

Provide ample touch targets for interactive elements. Try to maintain a minimum tappable area of 44pt x 44pt for all controls.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Uladzimir
  • 3,067
  • 36
  • 30