Summary of Research on Touch/Pointer Target Size

Here are some excerpts from research on target size.

While the main orientation of the research was for kiosks, the researchers found that the button size was a main factor in subjects being able to accurately complete the task.

Duff, Irwin, Skye, Sesto, & Wiegmann, 2010, THE EFFECT OF DISABILITY AND APPROACH ON TOUCH SCREEN PERFORMANCE DURING A NUMBER ENTRY TASK; PROCEEDINGS of the HUMAN FACTORS and ERGONOMICS SOCIETY 54th ANNUAL MEETING - 2010

Post-hoc tests revealed that each button size was significantly different from the other (p"0.01) in order from smallest to largest, with the smallest button(10mm) size being associated with the greatest amount of inaccurate touches and the largest (30mm) with the fewest. Figures 3 and 4 it appears that although significant, improvements occur at much smaller increments between the 20mm, 25mm, and 30mm buttons.

If a touch screen is going to be used, regardless of the approach, it appears that buttons should be at least 20mm. Using anything smaller may result in significant performance decrements. A compromise usually has to be made between button size and available screen space,or “real estate”. If this tradeoff must be made, it appears that 20mm is the most optimal size, since using larger buttons does not provide enough benefit to performance to justify using the extra space.

This study does not study people with disabilities, but is noteworthy because the optimal target size for non-disabled people is larger than the minimum we were discussing.

[Patrick] Note that the study cites button sizes in mm as measured on the screen, in a controlled environment ("This study’s task was performed on a 15” resistive technology touch screen", though it does not mention what resolution the touch screen was running at). As previously discussed, content authors have no way of guaranteeing at what actual physical size (as rendered on the screen) their content will be displayed. Therefore, the data point is interesting, but not directly actionable/translatable into absolute guidance.

Qin Gaoa and Qiqi Sun, Examining the Usability of Touchscreen Gestures for Older and Younger Adults, published in Human Factors The Journal of the Human Factors and Ergonomics Society (Impact Factor: 1.69). 05/2015; 57(5). DOI: 10.1177/0018720815581293 Source: PubMed

Results..Button sizes that are larger than 15.9*9.0 mm led to better performance and higher satisfaction. The effect of spacing was significant only when the button size was notably small or large.

[Patrick] Note that the study cites button sizes again in mm. According to the paper "Two touchscreen all in one computers, an HP TouchSmart 600P1168cn (optical touchscreen) and a Lenovo A700 (SAW touchscreen), were used in the experiment. Both computers were equipped with a 23inch screen, which had a resolution of 1920×108", so again a single controlled environment.

This study showed a minimum button size of 20mm, but in addtion, this group tested with people with disabilities vs a control group and found that 30mm improved performance. The full paper was P2P. This quote is from the Abstract.

Karen B. Chena, Anne B. Savageb, Amrish O. Chourasiaa, Douglas A. Wiegmanna, c, Mary E. Sestoa, Touch screen performance by individuals with and without motor control disabilities, published in Applied Ergonomics Volume 44, Issue 2, March 2013, Pages 297–302.

The objective of this study was to investigate the effects of button and gap size on performance by individuals with varied motor abilities. Participants with (n = 38) and without (n = 15) a motor control disability completed a digit entry task. Button size ranged from 10 to 30 mm and gap size was either 1 or 3 mm. Results indicated that as button size increased, there was a decrease in misses, errors, and time to complete tasks. Performance for the non-disabled group plateaued at button size 20 mm, with minimal, if any gains observed with larger button sizes. In comparison, the disabled group's performance continued to improve as button size increased. Gap size did not affect user performance. These results may help to improve accessibility of touch technology.

Another P2P from Springer that Jeanne would like to see. (The next time Jeanne is at MIT, I'll look at the larger article).

Francisco Nunes , Paula Alexandra Silva, João Cevada, Ana Correia Barros, Luís Teixeira, User interface design guidelines for smartphone applications for people with Parkinson’s disease

Niamh Caprani, Noel E. O’Connor and Cathal Gurrin, Touchscreens for Older Users, accessed 28 April 2016.

Touch screen applications best afford point and select interaction and buttons are the most appropriate target for this action. The optimal button size for finger selection is believed to be at least 20mm square (Chung et al., 2010; Waloszek, 2000). Strauss (2009) proposed that wider buttons (20mm by 31.75mm) are more appealing to users based on the Golden Ratio Phi (Livio, 2002). Minimum recommended button size is 10mm (Lee & Zhai, 2009) and a slightly larger 11.43mm for older users (Jin et al., 2007). Regarding button spacing, Jin et al. recommended that a space between 3.17mm and 12.7mm is needed to lower performance error rates for older users.

[Patrick] This paper mentions button sizes in mm, without any qualifier about screen size/resolution/etc. Again, this would then mean authors/developers have to aim (with all the variables involved) for some rough approximation of this value, taking into account all possible screen sizes/resolutions/etc

Slidedeck from CSUN with research on accessible touch voting systems done on an Android tablet.

James E. Jackson, Jennifer Ismirle, Ian O’Bara, and Sarah J. Swierenga, Touchscreen user interface design for persons with dexterity impairments. Slide showing button size of 20mm and spacing of 6.35mm with references of the research it was based on.

Comparison of web content sized in px and physical size of rendered content on common device screens

Using http://codepen.io/patrickhlauke/full/JXmpbV/ below is an initial comparison measuring (with an actual ruler against the screen) what 45x45px renders at on various common touchscreen-enabled devices. Note that the test page forces the browser to use its "ideal viewport" (width=device-width, initial-scale=1), which is the general approach for mobile/tablet sites - the ideal viewport dimensions and device pixel ratio are in brackets, provided via http://mqtest.io

Nexus 10 (1280 x 800, dpr 2) - 8mm
Samsung galaxy nexus (360 x 640, dpr 2) - 7.5mm
iPad 2 (1024 x 768, dpr 1) - 9mm
iPad Air 2 (1024 x 768, dpr 2) - 9.5mm
iPhone 6s (375 x 667, dpr 2) - 7.5mm
iPhone 6 (320 x 568, dpr 2) - 7.5mm
iPhone 5 (320 x 480, dpr 2) - 7.25mm
iPhone 4s (320 x 480, dpr 1) - 7.25mm
Nexus 7 (1st generation) (962 x 601, dpr 1.33) - 7.5mm
Nokia Lumia 720 (320 x 533, dpr 1.5) - 8mm
Surface 3 (1280 x 853, dpr 1.5) - 8.5mm
Asus s200e (1366 x 651, dpr 1) - 9mm
Blackberry Playbook 2 (1024 x 600, dpr 1) - 7mm
Dell 23" P2314T touchscreen monitor (1920 x 1080) - 13mm

These measured sizes are approximate to the nearest quarter millimeter (there may also have been a few very marginal errors due to parallax effect of measuring, but that should be negligible in the larger scheme here).

Although these results demonstrate the variability of how measures that authors can actually define in their CSS (and the situation is the same for native development) are translated into real-world measures, they also show that with a rough target size of around 45x45px an author would generally gravitate around a range of around 8mm (with obvious variations up and down).

Although some of the research into optimal touch target sizes recommends control sizes up to 30mm x 30mm, it is worth noting that this would translate into very large px values (larger than 150px x 150px, so for instance on most mobile phones, a button that's about half the width of the whole screen), which may be excessive. Therefore, it may be that context also matters - e.g. in an ATM touchscreen scenario, where a user is standing/sitting at arm's length, it's clear that large target sizes are essential, whereas a mobile phone held in the hand at 1-2 feet from the user may allow for smaller target sizes.

Related to the discussion around defining active target sizes in px, rather than in real-world measures, see also this demo http://codepen.io/patrickhlauke/full/zqabMR/ which shows that using physical units (like pt, but the same is valid for "mm") in CSS is meaningless since these are also anchored on the CSS reference pixel (i.e. defining, say, 9mm in CSS does not guarantee an actual physical rendering of 9mm on screen).