Re: Inline links with large-enough activation (touch) target (rough idea)

Hi Patrick,
just to be clear, I think yours is a good tech stub and might actually be a sufficient technique for some cases. It remains to be seen if the coloured area would have to have a contrast of plus 4.5:1 both to the background AND the text colour, which would make these links more visible but arguably less attractive for designers who don’t want to break the text flow.

I personally have had few issues with activating inline text links even on rather small text UNLESS links stack up in adjacent lines, but I take your point that even for single links a larger active area is better.

I believe that the 50 x 50 requirement will be difficult to meet also for inline text and therefore we will probably need 

- either an exception of sorts  for inline text links
- OR a specification that might indeed set a minimum text size for inline text links

I acknowledge that it might get messy especially taken together with a requirement of 25 x 25px for fine pointer input, but that may be unavoidable.

I know that the lack of an absolute minimum text size requirement in favour of requiring text resizing by 200% has often been criticised by the LV community (if you start tiny, 200 % of tiny is still too small) , and I wouldn’t be surprised of the LVTF will/has come up with a SC for minimum text size - which taken together with the touch target SC would go some way towards avoiding the 1px height / 50 px wide scenario that you mentioned. If we were to arrive at something like "min. 50 px width" AND "min. font size of, say, 14 px" (I bypass for now the problem of actually measuring text size in testing on mobile), taken together with a requirement for the link to be well discernible (high contrast, underlined etc) we might have something workable that might be an easier sell to frontend folks than the currently somewhat blunt 50x50px requirement for touch input.

Detlev

> On 14 Nov 2016, at 18:45, Patrick H. Lauke <redux@splintered.co.uk> wrote:
> 
> 
> 
> On 14/11/2016 17:43, Detlev Fischer wrote:
>> If the inline link is clearly visible (underlined / rendered bold,
>> strongly different color, whatever) I do not see a decisive advantage
>> in havong a visible padding going beyond the link text.
> 
> The background color in my example is there to visualise what's actually going on. It's not intended for production. It helps visualise what my example's doing in terms of enlarging the standard target size for the inline link.
> 
>> The practical
>> problem touch users have is to hit the right line if above or below
>> is another link, especially as the finger obscures the target. So I
>> think the actual separation by line height would the factor needed to
>> facilitate touch activation in a scenario of lots of inline links in
>> a piece of text.
> 
> Yes, to make absolutely sure things work best for touch users, you'd choose a much higher line height. My demo was only there to show an approach in scenarios where this is not desired/possible, as that was often cited on this list and in meetings as a problem that was impossible to tackle somehow.
> 
>> As to the size of the target, I had previously proposed to require
>> more specifically that *at least one dimension* of the target is 50
>> px wide AND that the other, if narrower (as is the case with, say,
>> 11pt inline text) would need a separation of 50 px measured from the
>> centrer of target to the centre of the adjacent target (if there is
>> one).
> 
> If a user has potential difficulty accurately pinpointing a small target (with their finger, wand, whatever other input they're using), then I'd posit that only solving this for one dimension still leaves half the problem unsolved. How narrow would the other dimension be allowed to be? Extreme case a rectangle that's 50px high by 1px wide...or we define ANOTHER minimum size for the second dimension, which gets really messy?
> 
>> 11p pt inline links *not* surrounded by other adjacent links above or
>> below would usually pose no problem for touch activation - and as the
>> link text is usually be longer than one or a few characters, the
>> requirement for 50px width would usually be met. (Of course there are
>> edge cases like linked footnote numbers and the like.)
> 
> They don't? I find that I often have to hit the screen multiple times to hit the exact standard hit target area for a small link that's inline...and I don't have any particular issues such as tremors or similar.
> 
>> I agree wit Alastair that the overlap of the link padding of same
>> colour would be problematic as it ia not clear which link is on top
>> and separation is not easy. There may even be cases where adjacent
>> links in two lines might be construed as one, etc. etc.
> 
> And again, my example was not meant to be a cure-all. Only a demonstration of how activation target area can be increased even for inline links/controls.
> 
> 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 Monday, 14 November 2016 18:58:32 UTC