HN Explorer

Ask HN: Button UI behaviour

1 points by FiatLuxDave ↗ HN
I have observed a certain behaviour with on-screen buttons in a number of different environments (Android, PC, Browser) which perplexes me, and I'm hoping someone on here can explain it to me. I'm not a UI developer, but I did try googling before asking with no luck.

The behaviour is that when clicking on a button quickly, the button visually registers the click (by depressing or changing shading) but the action intended to be initiated by the button does not occur. This occurs intermittently - most of the time the button works normally. I suspect that it is occurring because of a debouncing algorithm which checks that the button is depressed for longer than a certain amount of time before counting it as "pressed". However, if that is the case, then why does the button appear to be depressed when it has not been clicked long enough to activate?

I'm sure I can't be the only person who has seen this phenomenon. Can any of the UI experts on here shed any light?

4 comments

[ 2.6 ms ] story [ 18.7 ms ] thread
pedalpete
Can you post a link or a video, some images? I'm not sure I'm understanding the behavior you are describing
FiatLuxDave
It is very intermittent, and I don't usually record all my clicks, but I will try to catch it somehow.
Nadya
Check the css for `:active` as the button is being styled for `:active` which doesn't care if the Javascript functionality takes place or not. If you debounce the Javascript to prevent the action from firing multiple times that doesn't stop you from clicking the button and setting it to the `:active` state causing the styles to occur.

Codepen example: https://codepen.io/anon/pen/bvGrKY

Click the button as much as you like - after 200 milliseconds you'll get a single alert but the `:active` style always applies on click.

daffodil-11
I was puzzled by this recently and found it was due to slight mouse movement between the click and release. I can't remember the exact context but it was related to items that were drag-and-drop enabled. The press-to-select, move to drag, release-to-drop interaction was taking precedence over the press-release to click the button, even when the movement/drag was tiny, only a couple pixels.

I can't think of an instance where I would dragging-and-dropping a button, maybe it was an anchor element or something else clickable, but perhaps it's an avenue to investigate.