My main complaint with Material Expressive is that every other button seems to be 85% padding and 15% actual content. What happened to reasonable information density?
For control surfaces, padding prevents misclicks. It's actually very important part of perceived interface quality when dealing with a handheld touchscreen device.
haha yes, I tried to use my kids phone the other day and I had forgotten how much larger I had set the fonts on my own phone. It was impossible to read anything.
It's actually a credit to google that you can scale the fonts up so much and then forget you had done it. In the old days, the UI would be broken in various places.
It is still often broken, especially when a non-English locale is set. A family member uses larger fonts in Android, and most labels are barely readable (barel… readab…), UI widgets often don't fit on the screen etc.
Different topic: CSS doesn't have a good way to manage nearby clicks? A tap just a few px outside a button should click the button? <Input>s can steal focus from nearby taps on Mobile Safari (which can also be a fuckup). I hate iPhone taps that slip a little and scrollable areas having queer interactions (causing usability/accessibility issues).
As a proof.. well just use HN on your phone. It absolutely sucks, so those UI puritanists - please learn a lesson and at least make touch targets reasonably sized!
Exactly: we need an easy way to increase the tappable area of the vote buttons. You can't just add a invisible tappable wide border because the tap zones must not overlap. It is hard to design to be contained within a component. I had to use customised elements/CSS because the tappable area depends upon where a control/component is placed next to another control/component.
I also recall an obscure fix necessary for Mobile Safari. If you wanted something clickable near an <input> you needed to take care how you designed it because otherwise the <input> would steal the click. You could add an onclick handler (Mobile Safari has a bunch of heuristic hacks where onclick= will cause differences to touch behaviours when a touch is on an element that has a click handler. You could also use a button which might or might not be more accessible depending on needs and design. I recall I needed a lot of fiddling depending on each control.
Argue with Apple because Mobile Safari makes a tap close to a button click the button (and it causes exactly the problems you've predicted, and workarounds are difficult). Do you do a lot of close testing?? Because the feature is quite noticeable.
Some positive padding, offset by the same negative margin, will do just that, i.e capture clicks near the link or button. It has some problems, but I've seen it used to make footnote links easier to click on mobile.
Buttons are whatever for me, but the padding on things like notifications and other information text is getting ridiculous. The notifications are taking up 1/4 of the screen and managing to only show 3 words of an email or text on my phone.
