Digital Transformation
Tap Target Size (Ukuran Area Sentuh)
TL;DR: Tap Target Size adalah ukuran area yang bisa disentuh oleh jari saat menekan tombol atau link di antarmuka mobile. Google merekomendasikan minimum 48x48 piksel CSS dengan jarak 8 piksel antar elemen, dan WCAG 2.5.5 menetapkan minimum 24x24 untuk Level AA. Tombol yang terlalu kecil menaikkan rage click, menurunkan konversi, dan termasuk pelanggaran accessibility dasar.
Apa itu Tap Target Size?
Tap Target Size mengukur seberapa besar area yang dianggap "tersentuh" saat pengguna menekan elemen interaktif di layar sentuh. Ukuran ini termasuk padding di sekeliling konten visual, bukan hanya teks atau ikon yang terlihat. Standar industri yang diadopsi Google Lighthouse adalah 48x48 piksel CSS, mengacu pada Material Design dan riset ergonomi jari rata-rata orang dewasa.
Bayangkan tombol kecil 20x20 piksel berdekatan dengan tombol lain. Pengguna sering salah pencet, merasa frustrasi, dan menutup halaman. Sinyal frustrasi seperti ini mengarah ke perilaku rage click yang langsung terdeteksi di tools session replay.
Cara Kerja & Cara Audit
| Standar | Ukuran Minimum | Spasi Minimum |
|---|---|---|
| Google Lighthouse | 48x48 px CSS | 8 px |
| WCAG 2.5.5 (Level AAA) | 44x44 px CSS | tidak overlap |
| WCAG 2.5.8 (Level AA) | 24x24 px CSS | bisa lebih kecil dengan toleransi |
| Apple HIG | 44x44 pt | 8 pt |
Cara cepat audit:
- Buka Lighthouse di Chrome DevTools, jalankan Mobile audit.
- Lihat metric Accessibility, cari issue "Tap targets are not sized appropriately".
- Periksa elemen yang ditandai, tambah padding sampai memenuhi 48x48.
- Re-audit untuk konfirmasi.
Kenapa Penting bagi Pebisnis Indonesia?
Mayoritas trafik website bisnis Indonesia datang dari mobile (>75% berdasarkan data industri 2024-2025). Tombol kecil bukan masalah estetika, ia langsung memotong konversi. Pemilik UMKM yang ingin meningkatkan [konversi landing page](/artikel/cognitive-load-landing-page-umkm-indonesia-konversi-2026) wajib audit ukuran tombol terutama di CTA utama, form submit, dan tombol checkout. Ini juga jadi fondasi penilaian Core Web Vitals di sisi pengalaman, meskipun tap target tidak masuk metric inti CWV.
Pertanyaan Umum
Apakah area di luar konten visual juga dihitung?
Ya. Padding di sekeliling teks atau ikon termasuk dalam tap target. Anda bisa membuat ikon kecil 24x24 piksel selama membungkusnya dengan tombol berukuran minimal 48x48 piksel. Lighthouse menghitung total area yang menerima event tap.
Bagaimana jika desain mobile saya padat dan tidak muat tombol besar?
Pertimbangkan ulang hierarki konten. Banyak tombol dalam ruang sempit biasanya menandakan masalah arsitektur informasi, bukan masalah ukuran. Sederhanakan dulu, baru perbesar tap target. Pendekatan progressive disclosure sering jadi solusi.
Istilah Terkait