5 ms·

For control surfaces, padding prevents misclicks. It's actually very important part of perceived interface quality when dealing with a handheld touchscreen devi

For control surfaces, padding prevents misclicks. It's actually very important part of perceived interface quality when dealing with a handheld touchscreen device.

robocat 1y ago
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).
- crazygringo 1y ago
  You could, but you don't want it to. Buttons are e.g. often floating above content, or adjacent to other buttons. It's just as bad to click a button you don't want to, when you're merely trying to scroll, or highlight text, or click another button. Making a button's clickable area larger than the button itself can be desirable in limited circumstances, but it's not a general-purpose solution.
  - robocat 1y ago
    > You could, but you don't want it to. 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. Try it yourself on an iPhone (ideally use something that can do smaller taps than a finger, with zoom and without zoom): https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... I recall that similar features are more obvious on Android because you can make taps visible. Virtual keyboards also have interesting responses to close taps on key buttons.
  - gf000 1y ago
    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!
    - robocat 1y ago
      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.
- gherkinnn 1y ago
  What's wrong with increasing the size of the button? You can set a (pseudo) element as an invisible enlargement of that button but then you will get accidental taps.
- downsplat 1y ago
  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. Ex: a.fn-link { padding:10px 18px; margin:-10px -18px; }
jay_kyburz 1y ago
Yeah, but the icons and labels could use more of that padding and be larger so old folks like me can see them.
- tkzed49 1y ago
  There's literally a setting for this. There are separate sliders for "display size" and "font size", the latter of which just makes the font larger
  - jay_kyburz 1y ago
    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.
    - andrewshadura 1y ago
      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.
- xinayder 1y ago
  The trend nowadays is to remove icons, because UX designers think it makes the control too bloated and users don't perceive icons anyways (joke).

For control surfaces, padding prevents misclicks. It's actually very important part of perceived interface quality when dealing with a handheld touchscreen device.

robocat 1y ago

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).

crazygringo 1y ago
You could, but you don't want it to. Buttons are e.g. often floating above content, or adjacent to other buttons. It's just as bad to click a button you don't want to, when you're merely trying to scroll, or highlight text, or click another button. Making a button's clickable area larger than the button itself can be desirable in limited circumstances, but it's not a general-purpose solution.
- robocat 1y ago
  > You could, but you don't want it to. 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. Try it yourself on an iPhone (ideally use something that can do smaller taps than a finger, with zoom and without zoom): https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... I recall that similar features are more obvious on Android because you can make taps visible. Virtual keyboards also have interesting responses to close taps on key buttons.
- gf000 1y ago
  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!
  - robocat 1y ago
    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.
gherkinnn 1y ago
What's wrong with increasing the size of the button? You can set a (pseudo) element as an invisible enlargement of that button but then you will get accidental taps.
downsplat 1y ago
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. Ex: a.fn-link { padding:10px 18px; margin:-10px -18px; }

jay_kyburz 1y ago

Yeah, but the icons and labels could use more of that padding and be larger so old folks like me can see them.

tkzed49 1y ago
There's literally a setting for this. There are separate sliders for "display size" and "font size", the latter of which just makes the font larger
- jay_kyburz 1y ago
  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.
  - andrewshadura 1y ago
    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.
xinayder 1y ago
The trend nowadays is to remove icons, because UX designers think it makes the control too bloated and users don't perceive icons anyways (joke).