target spacing comments

Kathy: let's talk about the problems – shared spacing incentivized to make smaller, toolbars and vertical lists would not pass – better dealt with in personalization rather than reducing information density for everyone
... options they were thinking is have a minimum size that's smaller no spacing, fix spacing so not incentivized to do smaller
... but a talk about icon sizes – we have to be careful not to tap research on that because that's a different thing. Microsoft size right now is 24 pixels by 16 pixels.
... they're saying that the width is the first one minimum of 24, height is minimum of 16. They also recommend tile padding – tile plus spacing tile needs to be 66% of the width and 50% of the height. The size of the icon can be smaller but the padding that you have around it becomes the 24 x 16. So the tile padding plus the icon is that. They recommend 16% of height and with to be the margin between icon. So they are looking at a[CUT]
... two things – default plating, icon 16 pixel on a 24 pixel plate.

Jake: we have discussed all issues which have been brought up before. During the conversations I've watched it seems like going in the direction of providing a AA target size which is smaller.
... my understanding for the past year is not that we want to solve the problem of 16 pixel targets but also those 26 pixel targets which are too close to each other when they don't have target spacing. That was the intent of this criteria. If that is so I think that should still be our goal and not defining another target size criteria. We may, but that's not what we were trying to solve with this one. The 8 pixel spacing morphed in[CUT]
... so would be good to start out with what is the intent. Is that for smaller targets to have spacing? Do we also want a minimum target size besides the AA?
... is that correct, do you agree?

Kathy: what the Microsoft boiled down to was having a 24 x 24 pixel with 16% margin. If we came out and said that no target can be less than 24 x 24 with the margin plus the plating and no less than 16%, in between is 3.8
... we could say 24 x 24 with 16% margin – or spacing

Sukriti: need to define – target area would be the padding in the icon in the middle, and then the margin would be just pure spacing

Jake: my first suggestion would be target spacing of at least four pixels. It seems strange that if you size up your target your spacing also needs to be sized up because the problem gets smaller instead of bigger so why would you need more spacing

Kathy: it's the target touch area – the whole idea with the spacing is to avoid touching two targets at the same time.

Jake: that would mean if you have a 42 pixel like the W3C has on their site you need to have almost 8 pixel target spacing at 42 at 44 you don't need it anymore. Same gray area where the target gets bigger. we started out with eight pixels that's fine with 44 minus eight, but all those targets in between suffer because they get even bigger than 44.

Kathy: so Microsoft, just for clarity's saying that you take the 16% of the smallest dimension either the height or the width. so if 12 x 24 you're taking 16% of the 12.

Sukriti: it will incentivize smaller target sizes if we go by percentages or the flip site is annoying people who are already using larger icons

Jake: height is 42 pixels. 16% they must become 50. That is six pixels more than 44 x 44. They can make them bigger to 42 or they can make them smaller to fit the design exactly.
... we morphed the wording into a text where we can still fit into 44 x 44 size. If we step away from that and do the 16% we get that again

Kathy: what if we say target areas are at least 24 x 24 pixels and if the targets are less than 44 x 44 you have to have 16% of the height or the width spacing around the target area

Jake: the 16% between 36 and 43 pixels

Kathy: we put a clause in there – if you're target area and spacing is 44 x 44 pixelsyou are fine. If you have a smaller target you need to have 16% spacing. So you can have a smaller target with less.
... if your target is 16 x 16 you need to take 16% of 16, 3.8, so then your margins are 22 x 22, but if you have a larger target the max spacing plus target area is 44 x 44.

Jake: if I look back at all the previous discussions – if you say the target spacing is at least four or eight or something between four and eight but if your target is above 34 pixels than the total should be – if the total is 44 or bigger your fine. Else statement makes it way easier and we're almost back to the way we started
... we might go back to the old proposals and probably one of those will fit pretty easily and then we do not have the minimum of 24 with 16% calculation. We might end up with a way simpler one from a calculation and automated tool perspective. Does that make sense?

Sukriti: 44 by 44 – is there another sticking point?

Kathy: the margins can overlap
... replaying what I think Jake said – minimum target area is 24 x 24 pixels. If the minimum target area is less than 36 x 36 then we need to have 16% spacing otherwise that's not needed.

Jake: no

Kathy: is there a minimum target size you are discussing

Jake: we discussed it, but that's not what we are trying to solve. We had research also Microsoft

Kathy: they just updated their recommendations

Jake: we just started out if your target is not 44 x 44 we need spacing it was as simple as that. And then pretty soon we discussed okay that seems fine when you have 34 x 34 icon or less, but when it's 35 suddenly become bigger than 44 x 44. So he tried to solve that. When you are between 35 and 44 another rule applies.

Kathy: if you have a minimum target of 24 x 24 but if your target area is 34 x 34, or 36, then you need to have margins that get us up to – don't have to be bigger than 34 x 34 but smaller icons can also be smaller, which will take care of the issue with vertical list and toolbars but the spacing in between needs to be 16% of the height or the width
... because that way were minimizing the fact that you can't have really really tiny target areas. And we are setting a minimum of what they have to get up to because if you are at 33 you only have to get up to 34
... if you have a smaller target that is 24 x 24 –
... between 31 and 34 pixels
... could say the target area is a minimum of 24 x 24 and the total target area plus spacing needs to be 31 x 31

Jake: if I simplify this one and the intent is still the same and the problem for users clicking on the wrong one is still the same, if I see a couple of links and they are 24 pixels high and now they only need to have a target spacing of four pixels – 32 pixels while we aimed at 44. The same problem we were trying to solve will not be solved.
... if that doesn't solve the intent of clicking the wrong link that doesn't match right now. Still the 16% doesn't match if the target gets bigger, than the target spacing also becomes bigger. Not a lot, but that feels like okay, I make the target 50% bigger and the spacing also needs to become 50% bigger.
... how to solve – maybe we don't say 44 now but 32, that must be a deliberate decision, now try to solve the 32 question
... we still end up with a gap between 32 and 44 pixels
... we deliberately didn't mention it a minimum target size

Kathy: the feedback that we are getting is that we are incentivizing the small icons and that we get something that is smaller and it's also going to break when we have toolbars.
... we could simplify it – minimum target size of 24 x 24 pixels with at least four pixel margins unless the size is > 34 x 34

Sukriti: it can also be solved by saying the inactive space cannot overlap. That solves the incentivizing smaller touch targets

Jake: the boundary of the area targeted?

Sukriti: right now some of the feedback reads when there are two torch targets close to each other can the area between them overlap the answer was yes – if we say no than that solves the problem of incentivizing smaller icons

Kathy: Sukriti can you take a stab of writing what you are thinking into the irc

Sukriti: I'll also draw to demonstrate with the commenters were trying to say
... the first example is where there is no overlap – if you don't allow them to overlap and there's no incentive for developers to overlap and make icons smaller

Jake: I think there are two possibilities – spacing is between active target areas – active spacing is where the calculation is. It becomes more difficult when there not on the same horizontal line, calculation difficult
... if they are close to each other you have a lot of space on one side to click the proper target you don't have to click exactly on the middle line so that was not an issue. I think we define clearly that the target should not overlap. If clickable area is on one border you have enough room on the empty space where you can still click

Sukriti: here is where it gets tricky – where there are three buttons. The middle one

Kathy: for each target there is an area with a width and height of at least 44 pixels that doesn't include any other targets
... we didn't specify there needs to be a minimum size, just clickable 44 CSS pixels area and it doesn't include other targets. So that area 44 CSS pixels doesn't include any other target. So we already have that

Sukriti: looking at Detlev comment from the issue: the intention was that inactive spaces should not overlap

Kathy: why don't we try to say no inactive targets in another way

Sukriti: I was recommending originally the not overlapping of inactive spaces and that would make the whole thing clearer but also very painful for people to change their designs and introduce extra spacing where it's not needed because we are specifying not having any other touch targets in that area
... I think that's good enough. Specifying minimum targets gets tricky especially for native apps – Google recommendation

Jake: almost all Google products pass, just recommendation

<Kathy> For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets where the inactive space cannot overlap, except when:

Jake: I think that's another issue – we wanted to fix the gap with the target size ending up AAA
... current wording but a clearing on the overlap, but personally I like at least some target spacing where we fix that gap of targets becoming larger– if we say 44 is enough

<Kathy> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum margin of 4px.

Kathy: I have two suggestions and we can present both of them and we can come up with more – pasted above.

<Sukriti> present_

<Kathy> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing of 4px.

Jake: there is a gap between 32 and 44

Kathy: I'd rather get something in the nothing at all. I do think that some spacing is needed between targets. At the minimum that Microsoft has right now and their smallest target is four pixels around both the height and the width.

Jake: so instead of eight we are now back at four and instead of not mentioning a minimum target size we set the bar at 24 pixels

Kathy: so the area has to be at least 24 CSS pixels with a minimum spacing on the height and width of four pixels

<Kathy> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4px where the spacing cannot overlap.

Sukriti: so between two adjoining targets it would be at least eight pixels

Kathy: do you see that as a problem?

Sukriti: no, I think that works really well

Jake: that feels like the eight pixels target spacing we started out with

Kathy: yes, but we said eight pixels around it, now we are saying for pixels around it

Jake: and we didn't do the overlap before

Sukriti: this clarifies, takes each element on his own

Jake: we still have that weird in between sizes

Kathy: spacing cannot overlap unless the total area of the target plus the spacing is greater than 44 x 44 CSS pixels

Sukriti: or how about if the icon is greater than 40 pixels

Jake: 36, because on all sides

<Sukriti> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4px where the spacing cannot overlap. If the target is greater than 36 px and less than 44 px, the spacing can overlap.

Jake: we don't need the area anymore – we came to the conclusion before that almost all elements are not less than– we talked about those sizes. What I want to mention here is we introduced the area to cover the gray area
... easier if there is no target spacing

Sukriti: one thing that might come up is what if this is not square
... in that gray area the 36 and the other dimension is smaller than 36 do we allow the spacing to overlap in both dimensions or just one

<Sukriti> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4px where the spacing cannot overlap. If the target width or height is greater than 36 pixels and less than 44 pixels, the spacing can overlap.

Kathy: there's also a lot of talk about being able to go to 200% and then what's the target size. If we look at that and say okay, if were looking at the minimum going up to 200% what would then at 16 would be 32, if we say 22 it's at 44. So we might want to consider something like that where if it's two times we are looking at 22 pixels so that at least one of the height or width is 44

Sukriti: 24 gives it even more of a margin of error in that case
... we can point to the Microsoft document for 24

Kathy: if the height or width is greater than 22 pixels spacing is not required

Jake: zoom does not change CSS pixels

Kathy: I understand, Microsoft Apple have both said – noted that at 200% the target area becomes double what it is so that's where they are getting their minimum spacing for their tile icons. I was bringing up that
... so I'm saying if were looking for a target where one dimension is bigger if you are at two times you can get up to 44, so if we use 22
... we said earlier if the target is big enough we don't really need the spacing because we've got the adequate area for somebody to touch
... so it goes with the 44 that we have in AAA, but were counting on in AA that people can go up to 200%

Jake: zooming is rejected for other reasons – where you are, zoom in and out to have the overview back – not sure zoom should play a factor

Kathy: point taken – so let's go back to what Sukriti had

<Sukriti> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4px where the spacing cannot overlap. If the target width or height is greater than 36 pixels and less than 44 pixels, the spacing can overlap such that there is no more than one target in a 44X44 area

Sukriti: I added the still no more than one target part

Kathy: what's the reasoning for less than 44 pixels

Jake: if all those scenarios for the text I think we have a pretty good

Sukriti: 44 already meets the requirement – I think the arguments will come from 24 plus eight all the way to 44. Second cause of the statement we still need only one target per 44 x 44 area solves that

Kathy: based on Jake's comments is there something we should change

Sukriti: to make it even clearer – the overall area in which the target exists is 44 x 44 – adding that to the spacing as well

Kathy: for each target there is an area including the spacing with a width and height of at least 44 CSS pixels

Sukriti: yes – for the second clause. We still keep the 24 and the first clause. We can point to the Microsoft research, not arbitrary

Kathy: three point eight if you take 16%, we are just rounding it up to four
... we need to say CSX pixels

<Sukriti> For each target, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap. If the target width or height is greater than 36 CSS pixels and less than 44 CSS pixels, the spacing can overlap such that there is an area with a width and height of at least 44 CSS pixels with no other targets.

<Sukriti> Each target should have a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap. If the target width or height is greater than 36 CSS pixels and less than 44 CSS pixels, the spacing can overlap such that there is an area with a width and height of at least 44 CSS pixels with no other targets.

<Sukriti> Each target should have a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap. If the target width or height is greater than 36 CSS pixels and less than 44 CSS pixels, the spacing can overlap as long as there is an area with a width and height of at least 44 CSS pixels with no other targets.

<Kathy> For each target where the width or height less than 36 CSS pixels, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap.

<Kathy> For each target where the width or height less than 44 CSS pixels, there is an area with a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap.

<Kathy> For each target that has a width or height less than 44 CSS pixels, the target area has a width and height of at least 24 CSS pixels with a minimum spacing on the height and width of 4 CSS pixels where the spacing cannot overlap.

This is scribe.perl Revision of Date 
Check for newer version at http://dev.w3.org/cvsweb/~checkout~/2002/scribe/

Guessing input format: Irssi_ISO8601_Log_Text_Format (score 1.00)

Default Present: JakeAbma, Kathy, Sukriti, Kim_patch
Present: JakeAbma Kathy Sukriti Kim_patch
No ScribeNick specified.  Guessing ScribeNick: Kim_patch
Inferring Scribes: Kim_patch
Found Date: 10 Sep 2020
People with action items: 

WARNING: IRC log location not specified!  (You can ignore this 
warning if you do not want the generated minutes to contain 
a link to the original IRC log.)