Dokunma Hedefi Boyutları: 24 ve 44 Piksel Arasındaki Fark
Dokunma hedefi tartışması çoğu zaman tek bir sayıya iniyor: 44 mü, 48 mi. Oysa asıl belirleyici, o kutunun ekranda gördüğünüz ikonla aynı boyutta olmak zorunda olmaması ve komşusuyla arasındaki boşluk. Bir de web tarafında pek konuşulmayan bir ayrıntı var: CSS'teki cm birimi gerçek santimetre değil.
44, 48, 24: hangisi taban, hangisi hedef?
Apple'ın kılavuzu 44x44 pt, Material 48x48 dp diyor. WCAG 2.2 ise iki ayrı ölçüt tutuyor: 2.5.8 asgari hedef boyutunu 24x24 CSS pikseli (AA), 2.5.5 ise 44x44 CSS pikseli (AAA) olarak tanımlıyor. Aradaki uçurum tasarımcıyı yanıltıyor, çünkü 24 bir hedef değil, altına inildiğinde ihlal sayılan taban. Tasarımı 24'e göre kurup uyumluluk kutusunu işaretlemek, kullanıcıya 24 piksellik butonlar bırakmak demektir.
Peki neden 44 civarı? Yetişkin bir parmak ucunun ekrana temas alanı kabaca 1 cm çapında bir daire ve dokunma noktası, kullanıcının baktığı yerin biraz altına düşüyor. Hedef parmaktan küçükse kişi hedefe değil, hedefin bulunduğu bölgeye basıyor; isabet artık tasarımın değil şansın işi.
CSS'te santimetre yazmak neden çözüm değil
Fiziksel ölçüye göre tasarlayın tavsiyesinin sezgisi doğru, uygulaması web'de olduğu gibi yürümüyor. CSS'te mutlak birimler piksele sabitlenmiştir: 1cm tam olarak 96/2.54, yani 37,8 px demek ve bu oran cihazın gerçek nokta yoğunluğuna bakmaz. width: 1cm yazdığınızda cetvelle ölçülen bir santimetre değil, 37,8 CSS pikseli elde ediyorsunuz.
İşin iyi tarafı, viewport meta etiketi doğru kurulduğunda CSS pikseli cihazlar arasında yaklaşık aynı görünür büyüklüğe denk geliyor, dolayısıyla piksel cinsinden yazmak yeterli. Kötü tarafı, hiçbir birimin fiziksel ölçüyü garanti etmemesi. Son kontrol gerçek cihazda, gerçek parmakla yapılır.
Dokunma alanı ikondan büyük olabilir
Tasarım 16 piksellik bir kapatma ikonu istiyorsa ikonu şişirmek zorunda değilsiniz. Bunu genelde şeffaf bir sözde öğeyle çözerim, görünüş aynı kalır hedef büyür:
.kapat { position: relative; } .kapat::after { content: ""; position: absolute; inset: -14px; }16 piksellik ikonun dört yanına 14'er piksel eklenince hedef 44'e çıkıyor, ekranda değişen hiçbir şey yok. Aynı işi padding ile de yapabilirsiniz ama o zaman öğenin akıştaki yeri değişir ve komşularını iter; inset ile büyüyen katman yerleşimin dışında durur. Dikkat edilecek tek nokta, üstüne binen başka bir öğenin bu alanı kapatmaması.
Boşluk, boyutun yerine geçer mi?
Kısmen. WCAG'ın asgari ölçütü, hedef 24 pikselden küçük olsa bile merkezine oturan 24 piksellik daireler komşularınınkiyle kesişmiyorsa ihlal saymıyor. Sıkışık bir araç çubuğunda ikonları büyütemiyorsanız aralarını açmak sizi uyumlu tarafta tutabilir.
Kullanılabilirlik tarafında ise boşluk boyutun yerini tutmuyor. Fitts yasasında hareket süresi hedefin genişliğine ve hedefe olan uzaklığa bağlı, kabaca log2(2D/W) ile büyüyor. Boşluğu artırdığınızda W sabit kalırken D büyüyor: yanlış dokunma azalıyor ama hedefe varış süresi uzuyor. İki maliyeti birden ödememek için sıralama net, önce genişlik düzelir, aralık ikinci adımdır.
Peki ya parmağın ulaşamadığı yerler?
Boyut doğru olduğunda bile konum ayrı bir sorun. Büyük bir telefonu tek elle tutan kullanıcı için ekranın üst köşeleri başparmağın dönme yarıçapı dışında kalıyor; oraya koyduğunuz 44 piksellik buton, ölçüsü yeterli olduğu halde iki elle kullanılmayı şart koşuyor. Geri alınamayan eylemleri yan yana koymamak da aynı sınıftan bir karar: yanlış dokunmanın bedeli büyüdükçe hedefin de büyümesi, hatta ayrı bir köşeye taşınması gerekiyor.
Kullanıcı yürürken mi dokunuyor, eldivenle mi, ekran ıslak mı? Bu soruların cevabını biliyorsanız asgari değerlerle yetinmenin bir anlamı kalmıyor.
Nasıl kontrol edilir
Tarayıcının cihaz emülasyonu boyutu gösterir, isabeti göstermez. Otomatik tarafta Lighthouse'un mobil denetimleri küçük ve birbirine fazla yakın hedefleri işaretliyor, hızlı bir ilk süzgeç olarak iş görüyor. Elle bakarken de kural basit: ikona değil kutusuna bakın. Geliştirici araçlarında öğeyi seçtiğinizde vurgulanan alan kullanıcının dokunabildiği alandır, ikon o alanın içinde duran bir görüntüden ibarettir.
Kaynak