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

Patrick -

This is excellent, thank you for putting this together.  It is definitely helpful.  Did you add this to the WIKI page?  If you didn't if you can do that, I would appreciate it.  We don't want to lose this information.

Best,

Kathy
CEO & Founder
Interactive Accessibility
 
T (978) 443-0798  F (978) 560-1251  C (978) 760-0682
E kathyw@ia11y.com  
www.InteractiveAccessibility.com
 
NOTICE: This communication may contain privileged or other confidential information. If you are not the intended recipient, please reply to the sender indicating that fact and delete the copy you received. Any disclosure, copying, distribution or action taken or omitted to be taken by an unintended recipient in reliance on this message is prohibited and may be unlawful.

-----Original Message-----
From: Patrick H. Lauke [mailto:redux@splintered.co.uk] 
Sent: Friday, April 29, 2016 6:14 AM
To: public-mobile-a11y-tf@w3.org
Subject: 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 11:36:56 UTC