- Butonları/bağlantıları/kartları tıklamayı/dokunmayı/tap etmeyi daha kolay ve yanlışlıkla basılması daha zor olacak boyutlarda tasarlamak
- "Hedef boyutu" için kullanılan adlar farklılık gösteriyor: Apple
hit target, Google Material Touch target, WAI target size, Google Lighthouse Tap Target, tasarım topluluğu ise Clickable Area diyor
- WCAG ölçütlerine göre hedef boyutu en az 44 x 44 CSS piksel olmalı (Android'de 48x48)
- Bunun altına düşüldüğünde dokunma daireleri üst üste binebilir ve yanlış tıklamalar oluşabilir
- Google Design for Driving'de minimum 76dp x 76dp öneriliyor
- Görsel hedef geri bildirimi vermek iyi olur (öğeye kenarlık ya da ters çevrilmiş arka plan gibi)
- 24x24'ten küçük hedeflerde yeterli boşluk bırakmak gerekir (
line-height: 1.4, padding: 1rem gibi)
- ProgressBar için de
height değerini artırarak yeterli dokunma alanı sağlamak iyi olur
- Aynı eylemi veren nesneler arasında Dead Target Area'yı kaldırmak
:before ve :after gibi pseudo elementleri kullanarak hedef boyutunu büyütmeklabel için mutlaka for kullanarak hedef boyutunu genişletmek- Checkbox'larda
padding-block kullanarak hedef boyutunu büyütmek
- Butonlara/metin bağlantılarına da
padding eklemek
- Liste öğelerinde
padding ve display:flex ile tüm öğe boyutuna yaymak
- Hedef boyutu test yöntemleri: DevTools kullanmak, CSS
outline uygulamak, Polypane tarayıcısını kullanmak
1 yorum
İçerik o kadar harika ki yazara bakınca Ahmad Shadeed olduğunu gördüm. Bu kişinin yazılarına bakınca gerçekten hayran kalmamak elde değil.