-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Buttons in controls bar should be 44px squares #7481
Comments
(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.) |
@danxuliu 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. |
@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 :) |
@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. |
I need to see before having an opinion. Blank statement won't really help us I think here :) |
Most likely nothing for 14 -> moving to 15. |
Ref #10617 |
Moving to 16 |
what's the state here? |
For Files at least, the only 2 buttons left not having at least 44*44px are:
@marcoambrosini @nimishavijay what do you think? |
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 |
Sounds good @marcoambrosini – cc @skjnldsv probably also something for the Vue rewrite? |
Done with 28 |
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.
The text was updated successfully, but these errors were encountered: