the silliest UI mistake

what is it?

a "false click button" is an element that looks like a button, but has a "dead area" that triggers nothing when clicked.

sometimes, clicking said area even triggers typical click animations (such as translate and scale changes), which further aggravates the user experience.

why does it happen?

this happens when the event is mispositioned on a child element/container instead of the wrapper element.

where does it happen?

i thought this happened only in products that don't care about ui/ux, but i saw it recently in two products that are industry references in design: duolingo and airbnb.

i can't upload gifs here for some reason, so check out my twitter/x posts of it happening: in the duolingo website and the airbnb website

why is it a problem?

a "false click button" can lead a user to click multiple times in frustration, to interpret that there is an error with their internet, or ultimately, to give up and leave your site.

how to fix it

place the event on the wrapper element, instead of inside a child element/container. also ensure that animations/pointer cursor only happen in the same level where the event happens (again, the wrapper element).

important

ideally, this wrapper element will be a button, for accessibility reasons. if you must use another element for this, be mindful of role=button attribute and other a11y implications.

conclusion

this is an easy bug to fix with significant UX wins. it is definitely worth fixing. i'm a website bug collector, so follow me on x if you want to see more.