the silliest UI mistake

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.

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
how-to-ensure-your-cloud-migration-effort-is-aligned-with-the-rest-of-your-business

How to Ensure Your Cloud Migration Effort is Aligned with the Rest of Your Business

Next Post
project-intake-process:-prioritizing-project-requests-&-proposals

Project Intake Process: Prioritizing Project Requests & Proposals

Related Posts
postgresql-on-openbsd:-14-から-15-へのアップグレード-–-pg-upgrade-使用

PostgreSQL on OpenBSD: 14 から 15 へのアップグレード – pg_upgrade 使用

はじめに OpenBSD はすばらしいドキュメンテーションをプロジェクトの一環として提供してくれています。 (例えば man ページ (英語) は丁寧に維持されています。) これは OS だけで無く主要なサービス・パッケージにもあてはまります。PostgreSQL についても同様です。 さて PostgreSQL の pkg-readme (/usr/local/share/doc/pkg-readmes/postgresql-server) によると、データベースをアップグレードするのには…
Read More