Mobil ekranda parmak, fare imlecinin yerini tutamaz. Küçük bir bağlantıya basmaya çalışırken yanındakine dokunmak, kullanıcıyı sinirlendiren ve sayfadan çıkarmaya yeten bir sorundur. Arama motorları da mobil uyumluluğu değerlendirirken dokunmatik öğelerin kullanılabilirliğine dikkat eder. Bu yüzden buton, menü ve bağlantı ölçülerini bilinçli belirlemek hem deneyim hem görünürlük açısından önemlidir.
Önerilen asgari boyutlar
Yaygın kabul gören ölçü, dokunulabilir alanın en az 48 x 48 CSS pikseli olmasıdır. Bu yaklaşık 9 milimetreye denk gelir ve ortalama bir parmak ucuyla uyumludur. Erişilebilirlik yönergeleri bazı durumlarda 24 piksellik alt sınırı kabul eder, ancak bu değer asgari eşik olarak görülmeli, hedef olarak değil. Önemli işlemler olan sepete ekle, form gönder ve menü aç gibi düğmelerde 48 pikselin altına inmemek daha güvenlidir.
Görsel boyut ile dokunma alanı aynı olmak zorunda değildir. Küçük bir simge 24 piksel görünse bile çevresine iç boşluk verilerek dokunma alanı büyütülebilir. Böylece tasarım sade kalır, kullanım rahatlar.
Öğeler arasındaki boşluk
Boyut kadar komşu öğeler arasındaki mesafe de önemlidir. Birbirine bitişik iki düğme, yeterince büyük olsa bile yanlış dokunuşa yol açar. Dokunma alanları arasında en az 8 piksel boşluk bırakmak iyi bir başlangıçtır. Alt alta dizilen menü bağlantılarında satır yüksekliğini artırmak, metin bağlantılarından oluşan listelerde ise her satıra dikey iç boşluk eklemek işe yarar.
Paragraf içindeki satır içi bağlantılar çoğu zaman sorunludur. Aynı cümlede iki bağlantı yan yana duruyorsa birini cümleden ayırmak ya da ayrı bir butona dönüştürmek yanlış tıklamaları azaltır. Alt bilgi alanındaki dar aralıklı bağlantı sütunları da sık karşılaşılan bir hata kaynağıdır.
Yerleşim ve parmak erişimi
Telefon çoğunlukla tek elle kullanılır ve başparmak ekranın alt yarısına daha rahat ulaşır. Sık kullanılan eylemleri, örneğin ara, sepete git veya teklif iste düğmesini, ekranın alt bölümüne yerleştirmek tıklama oranını artırabilir. Buna karşılık yanlışlıkla basılması zararlı olan silme veya vazgeçme gibi düğmeleri köşelerden ve ana eylemin hemen yanından uzak tutmak gerekir.
Sabit çubuklar ekranın büyük kısmını kaplamamalıdır. Yapışkan bir alt banner içerikteki bağlantıların üstüne bindiğinde dokunmayı engelleyebilir. Çerez bildirimi ve sohbet balonu gibi öğelerin de ana düğmelerle çakışmadığını kontrol edin.
Test etme ve düzeltme
Mobil uyumluluk denetimlerinde ve tarayıcı geliştirici araçlarında dokunma hedeflerine dair uyarılar görebilirsiniz. Ancak en güvenilir yöntem gerçek cihazla denemektir. Küçük ekranlı bir telefonda sayfayı gezip her düğmeye tek elle basmayı deneyin. Form alanları, menü ve filtreler öncelikli kontrol noktalarınız olsun. Sorunlu öğeleri CSS ile iç boşluk, minimum yükseklik ve genişlik tanımlayarak düzeltebilirsiniz.
Küçük ayarlar büyük fark yaratır: yeterli boyut, düzgün aralık ve akılcı yerleşim, ziyaretçinin hedefe sorunsuz ulaşmasını sağlar. Bu düzenlemeleri tasarım sürecinin başında planlamak, sonradan yapılacak onarımlardan çok daha az emek ister.