Küçük ikon, küçük tıklama alanı demek değildir

Mobilde yan yana duran iki küçük simgeden yanlış olana basmak kolaydır. Görsel olarak hafif bir arayüz tasarlamak, dokunulacak alanı da küçültmek zorunda olduğun anlamına gelmez. İkonun etrafındaki görünmez boşluk işlevsel bir tasarım alanıdır.

Benim için küçük bir ikonun zarif görünmesi, dokunmasının da zor olması gerektiği anlamına gelmez. Görünen şekille etkileşim alanını ayrı düşünmek tasarıma alan açıyor. Bana kalırsa kullanıcı düğmeyi kaçırınca bunu dikkatsizlik gibi görmek yanlış bir refleks. Özellikle telefonda arayüzü ideal koşullarda değil, tek elle ve hareket halindeyken de düşünmek isterim.

Temel fikir

WCAG 2.2’nin minimum hedef boyutu ölçütü, belirli istisnalarla 24×24 CSS piksel alanı veya uygun aralık koşullarını ele alır. Bu ölçüyü her bağlam için ideal rahatlık boyutu sanmamak gerekir. Kullanıcı, cihaz ve komşu hedefler sonucu etkiler.

Bir örnek üzerinden

Bir kartın köşesindeki 16 piksel oku düşün. Çevresine yeterli tıklama alanı tanımlamak, oku büyütmeden kullanım kolaylığı sağlayabilir. Kartın tamamı bağlantıysa aynı alana başka bağımsız düğmeler koyarken çakışmayı önle. Görünmez hedeflerin birbirine taşması yeni hatalar yaratır.

Nereden başlamalı?

Telefonu tek elle kullanarak test et. Özellikle kapat, sil ve geri gibi yakın kontrolleri dene. Sadece piksel ölçmek değil, yanlış dokunuşun sonucunu düşünmek de tasarımın parçasıdır.

Benim yaklaşımım

Bir blog filtre çubuğu tasarlasam yalnızca etiket metnine değil, çevresindeki tıklanabilir boşluğa da dikkat ederdim. Yan yana iki kategoriye yanlışlıkla dokunmak kolay mı diye kontrol ederdim. Görünümü büyütmek gerekmiyorsa alanı görünmez biçimde genişletebilirdim. Benim için rahat etkileşim, arayüzün bütün öğelerini devleştirmekten çok doğru boşlukları bırakmakla ilgili.