Wednesday, October 19, 2016

overflow - Smallest button size and spacing for a touchscreen


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



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



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...