Buttons in controls bar should be 44px squares

[pixelipo]

Currently, there is a lot of inconsistency in the buttons places on the #controls bar - most of them are 40px wide and 36px, but some apps (e.g. Deck uses 38x36px).

Design guidelines require a minimum (and optimal?) size for anything clickable to be 44px both width and height, so we should update these buttons.

It will also require the entire bar to become larger - currently it's 44px hight, but buttons need some margin so it should become 50px high.

[jancborchardt]

(Untagging it from good first / starter issue though cause changing the height of the controls bar etc has wider-reaching implications and needs to be well-tested.)

[skjnldsv]

@danxuliu did you fixed it in the latest gallery?

[danxuliu]

@skjnldsv

did you fixed it in the latest gallery?

Not yet, but I intended to fix some issues with the buttons in the controls bar of the gallery and this was one of them ;-)

However, based on my initial tests, in my opinion making those buttons 44x44px is visually too much. An alternative would be to keep them at 36x36px, but provide an invisible clickable area around them of 44x44px. But the problem with that approach is that, although in a touchable interface it would work nicely, when using the mouse it would be surprising to click outside the visual borders of the button and still trigger a click on the button.

So... any idea to have nicely sized buttons that work fine with both a touchable screen and a mouse? :-) This should be taken into account too in other areas, for example in the details view of the Files app, which currently does not seem to be very touch friendly.

[skjnldsv]

@danxuliu I'm fine with 44px imho. Especially sine screens tend to be bigger and bigger, the pixel size keeps getting smaller with the density increase. I'm not sure 44px is still considered as "big" nowadays :)

[danxuliu]

@skjnldsv I do not know what is considered "big" nowadays; what I know is that in a 1920x1200 24" screen they look too bulky for my taste ;-) (although it may be just due to being used to the previous size)

In any case it is just a matter of personal preference, so given that it improves the accessibility and it does not cause any surprising behaviour depending on the pointing device I am fine with changing them to 44px.

[skjnldsv]

I need to see before having an opinion. Blank statement won't really help us I think here :) Maybe you're right and we should reduce it a bit :)

[MorrisJobke]

Most likely nothing for 14 -> moving to 15.

[MorrisJobke]

Ref #10617

[MorrisJobke]

Moving to 16

[blizzz]

what's the state here?

[jancborchardt]

For Files at least, the only 2 buttons left not having at least 44*44px are:

• the "+" new button, at 36*36px. Just making the button larger would look a bit strange, without margin to the top bar then. Possibilities:
  • Move the button to the top of the left navigation
  • Make it icon-only (would the become a bit invisible though)
  • Somehow display it at 3636px so it looks like a smaller button, but add padding to the clickable element so it’s 4444px – is that possible with the component?
• the share button at 16*44px too little width. Can be solved by adding extra padding to the sides and negative margin, to keep the visuals the same.

@marcoambrosini @nimishavijay what do you think?

[marcoambrosini]

For the 1st option, I'd go with either tertiary or secondary buttons:

About the size concerns, the whole files top-bar can grow to 60px, so that there are adequate margins around the elements. By making the topbar 16px taller, even if the buttons increase in size it wouldn't feel so forced.

If we make it icon only (tertiary), we can keep the height of the topbar at 44px, it'll be less visible but the svg could increase in size (from 16px to 20px) and that would compensate a bit.

For the share I'd keep the tertiary. Here too the icon should be 20px, not 16px

[jancborchardt]

Sounds good @marcoambrosini – cc @skjnldsv probably also something for the Vue rewrite?

[skjnldsv]

Done with 28