Affordance Hover-Only: Kenapa Tombol Tak Terlihat di Layar Sentuh

Beberapa hari lalu saya buka portal yang sedang saya bangun pakai ponsel, dari kategori statistik saya menekan salah satu baris isian. Berhasil masuk. Tapi pas saya perhatikan lagi di desktop, baris itu diam-diam saja: tidak ada panah, tidak ada tulisan "Lihat", apalagi instruksi. Panah emerald kecilnya baru muncul kalau kursor melayang di atas baris. Di ponsel, kursor itu tidak pernah ada.

Hover bukan gesture yang dijamin ada

Dugaan saya pertama: toh di desktop jalan, berarti tidak masalah. Salah besar. CSS punya media feature hover yang fungsinya persis menguji apakah perangkat input utama bisa hover atau tidak; nilai none menjelaskan bahwa banyak perangkat mobile hanya bisa "mengemulasi" hover lewat long-press yang tidak nyaman [1]. Jadi hover bukan sesuatu yang bisa saya paksa ada di semua perangkat. NN/g merumuskannya tegas: hover adalah gesture yang tidak tersedia di touchscreen, dan desainer wajib mengakomodasi asimetri ini saat UI direplikasi lintas perangkat [3].

Sisi yang sering terlewat: ini bukan cuma soal ponsel. Di desktop pun, baris yang baru "hidup" saat di-hover punya masalah yang sama di keadaan diam. NN/g menulis bahwa label ikon harus terlihat setiap saat tanpa interaksi apa pun dari user, dan jangan mengandalkan hover untuk menampilkan label karena interaction cost-nya naik [4]. Diterjemahkan ke kasus saya: kalau satu-satunya penanda bisa-diklik cuma muncul setelah pointer melayang, user yang sedang diam tidak akan pernah tahu baris itu bisa ditekan. NN/g juga mengingatkan, fakta bahwa sebagian audiens tak bisa memakai sebuah fitur bukan berarti fitur itu layak dibuang untuk semua orang; yang dituntut graceful degradation, bukan penghapusan [5].

Perbaikannya: pil "Lihat" yang selalu tampak

Saya ganti panah opacity-0 group-hover:opacity-100 dengan pil emerald kecil bertuliskan "Lihat" yang selalu dirender: rounded-full bg-emerald-600/10 px-2.5 py-1 text-[11px] font-bold ring-1 ring-emerald-600/15. Isi hover-nya tetap ada, tapi sekarang cuma sebagai pelengkap: group-hover:bg-emerald-600 group-hover:text-white, plus panah yang bergeser tipis via group-hover:translate-x-0.5. Link barisnya saya lekatkan aria-label="Lihat kategori {name}" supaya screen reader mendapat nama aksi yang jelas, bukan sekadar rangkaian teks kategori.

Kalau mau mempertahankan efek murni hover-only, jalan teknisnya bukan menghapus efeknya, tapi membatasi efek itu ke perangkat yang benar-benar mendukung: @media (hover: hover) { ... }. MDN mencatat pola ini sebagai pendekatan baku, dan fitur ini sudah Baseline Widely Available sejak Desember 2018 [1]. Tailwind menyediakan varian hover: untuk semua utility dan varian itu bisa ditumpuk dengan breakpoint atau dark mode bila memang perlu [2]. Saya pilih pil selalu-tampak karena lebih sederhana dan menutup kasus terburuknya langsung: tidak ada lagi aksi yang cuma kelihatan setelah user menebak-nebak.

Yang saya bawa pulang

Affordance itu janji yang harus terlihat saat diam. Hover boleh memperkaya, misalnya lewat tooltip atau pergeseran halus, tapi tidak boleh jadi satu-satunya jalan menuju aksi. Uji cepatnya murah: buka halaman di ponsel, dan hitung berapa aksi yang menghilang begitu kursor tidak ada.

Sumber

• [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
• [2] https://tailwindcss.com/docs/hover-focus-and-other-states
• [3] https://www.nngroup.com/articles/split-buttons-navigation
• [4] https://www.nngroup.com/articles/icon-usability
• [5] https://www.nngroup.com/articles/ia-questions-navigation-menus