45x45px and what physical (measured on screen) size it renders at in different devices

Did a fairly quick test this morning using 
http://codepen.io/patrickhlauke/full/JXmpbV/, measuring (with an actual 
ruler against the screen) what 45x45px renders at on various touch 
devices I have in my testing lab. 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 one of my early points about the 
variability of how measures that authors can actually define in their 
CSS (and the situation is the same for native development) actually 
shake out into real-world measures, they also - to my mind anyway - 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). Combined with the research that is being 
collated in the wiki 
https://www.w3.org/WAI/GL/mobile-a11y-tf/wiki/Summary_of_Research_on_Touch/Pointer_Target_Size#Summary_of_Research_on_Touch.2FPointer_Target_Size 
this can probably inform / justify whatever value we settle on.

I note that in some of the research there's mentions of sizes up to 
20x20 or even 30x30mm. This would translate into very large px values 
(larger than 150x150px, so for argument's sake on a mobile phone, a 
button that's about half the width of the whole screen), which I doubt 
will be met with anything but pushback from designers/developers. I'm 
wondering if context also matters here (I've not studied the linked 
research just yet) - e.g. if it's an ATM type 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. Anyway, just worth considering 
that there are likely more factors involved here in deciding minimum 
sizes (circling back to the BBC's suggestion of 44px, Apple's 44 points, 
etc).

As an aside, for those who may not have seen my lengthy rambling in the 
context of font sizes, there's 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).

P
-- 
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Friday, 29 April 2016 10:14:39 UTC