- Membuat tombol/tautan/kartu dengan ukuran yang lebih mudah untuk diklik/disentuh/ditap, serta mengurangi salah tekan
- Istilah untuk "ukuran target" berbeda-beda: Apple menyebutnya hit target, Google Material menyebutnya Touch target, WAI menyebutnya target size, Google Lighthouse menyebutnya Tap Target, dan di komunitas desain disebut Clickable Area
- Menurut standar WCAG, ukuran target setidaknya harus 44 x 44 piksel CSS (di Android 48 x 48)
- Jika lebih kecil dari itu, lingkaran sentuh bisa saling tumpang tindih dan menyebabkan klik yang keliru
- Di Google Design for Driving, ukuran minimumnya adalah 76dp x 76dp
- Sebaiknya berikan umpan balik target yang visual (border pada elemen atau pembalikan latar belakang)
- Untuk target yang lebih kecil dari 24 x 24, perlu diberi jarak yang cukup (Line Height: 1.4, Padding: 1rem, dll.)
- ProgressBar juga sebaiknya diperbesar tingginya agar menyediakan area sentuh yang memadai
- Hilangkan Dead Target Area di antara objek yang memiliki aksi yang sama
- Gunakan pseudo-element seperti
:before dan :after untuk memperbesar ukuran target
- Pada
label, pastikan menambahkan for agar ukuran target meluas
- Untuk checkbox, perbesar ukuran target dengan menggunakan
padding-block
- Tambahkan padding juga pada tombol/tautan teks
- Pada item daftar, gunakan padding dan
display:flex agar meluas ke ukuran seluruh item
- Cara menguji ukuran target: gunakan DevTools, terapkan CSS Outline, atau gunakan browser Polypane
1 komentar
Karena isinya luar biasa, saya melihat penulisnya ternyata Ahmad Shadeed. Kalau melihat tulisan-tulisan yang dia buat, rasanya saya tidak bisa tidak dibuat kagum.