Mobil arayüzlerde dokunma hedefi (touch target) boyutu neden önemli?

Bir mobil arayüzde küçük, birbirine yakın butonlar görsel olarak minimalist ve zarif görünebilir — ama gerçek bir parmakla dokunulduğunda kullanıcı yanlış butona basar, hayal kırıklığına uğrar ve genellikle uygulamayı/siteyi terk eder.

WCAG'in dokunma hedefi kriteri

W3C'nin WCAG 2.5.8 kriteri (Target Size — Minimum), dokunma hedeflerinin en az 24×24 CSS pikseli olmasını şart koşar; bu şart karşılanamıyorsa alternatif olarak hedefler arasında yeterli boşluk bırakılabilir. Kriterin arkasındaki mantık basit: bir insan parmağının ortalama teması, hassas fare imlecinden çok daha geniştir; bir buton bu gerçek fiziksel boyuta göre tasarlanmazsa, motor becerisi sınırlı kullanıcılar için (ama aslında herkes için) kullanılamaz hale gelir.

Sadece motor engelli kullanıcılar için mi önemli?

Hayır — küçük dokunma hedefleri herkesi etkiler: yürürken telefon kullanan, bir elinde çocuğunu tutan, titreyen ellerle yaşlı bir kullanıcı veya yalnızca kalın parmaklı biri, aynı sorunu yaşar. Erişilebilirlik standardı gibi görünen bu kriter, aslında genel kullanılabilirliğin bir parçasıdır.

24×24px'in altında, bitişik butonlar

WCAG uyumlu boyut ve boşluk

Pratik uygulama kuralları

• Butonlar ve dokunulabilir alanlar için yeterli minimum boyutu koruyun (WCAG'in Target Size kriterine bakın)
• Birbirine yakın iki dokunma hedefi arasında yeterli boşluk bırakın — boyut yeterli olsa da bitişik butonlar yanlış dokunmaya yol açar
• Küçük bir ikonun etrafındaki tıklanabilir/dokunulabilir alanı, ikonun görsel boyutundan daha büyük tutun (padding ile genişletin)
• Form alanlarında etiketleri de dokunulabilir alanın bir parçası yapın (checkbox/radio için)

Yaygın hatalar

• Yalnızca masaüstünde test edip mobil dokunma deneyimini hiç denememek
• Görsel olarak küçük bir ikonun dokunma alanını da aynı küçüklükte bırakmak
• Alt alta sıralanmış linkler/butonlar arasında yeterli boşluk bırakmamak

Sonuç

Dokunma hedefi boyutu, görsel tercih değil ölçülebilir bir kullanılabilirlik gereksinimidir. Bu kriteri tasarım sürecinin başında düşünmek, sonradan 'neden kullanıcılar yanlış butona basıyor' sorusuna cevap aramaktan çok daha ucuza gelir.