Sayıların ardındaki mantık
Fare imleci birkaç pikselliktir; parmak ucu ise geniş bir alana temas eder. Masaüstü için tasarlanmış küçük hedefler mobilde ıskalanır.
Iskalamanın maliyeti sadece bir tıklama değildir. Yanlış öğeye basan kullanıcı istemediği sayfaya gider, geri döner ve güvenini kaybeder.
Dikkat edilmesi gereken şey, dokunulabilir alanın görünen alandan daha büyük olabileceğidir. Simge küçük kalabilir ama etrafındaki tıklanabilir bölge genişletilebilir.
Nerede sorun çıkar?
| Öğe | Tipik sorun |
|---|---|
| Kapatma çarpısı | Çok küçük |
| Adet artır/azalt | Yan yana ve dar |
| Metin içi bağlantı | Satır yüksekliği yetersiz |
| Onay kutusu | Yalnızca kutu tıklanabilir |
| Alt gezinme simgeleri | Birbirine yakın |
Dördüncü satır kolay bir kazanç. Onay kutusunun yanındaki etiketin de tıklanabilir olması hedefi birkaç kat büyütüyor ve hiçbir görsel değişiklik gerektirmiyor.
Nasıl kurulur?
- Yeterli alan bırakın. Parmak ucu kadar bir bölge.
- Aralık koyun. Bitişik hedefler yanlış basma üretir.
- Etiketi de tıklanabilir yapın. Kutuyla sınırlı kalmasın.
- Görünenden büyük tutun. Alan simgeden geniş olabilir.
- Gerçek cihazda test edin. Tarayıcı simülasyonu yetmez.
Uygulamada ne oluyor?
En sık gördüğüm sorun, masaüstü tasarımının olduğu gibi küçültülmesi. Ekran daralıyor ama öğe boyutları orantılı küçülüyor; sonuçta hiçbiri rahat basılamıyor.
İkinci gözlem, hedeflerin birbirine çok yakın olması. Adet artır ve azalt düğmeleri bitişik olduğunda kullanıcı yanlış olana basıyor ve sepetinde istemediği adet oluşuyor.
Üçüncüsü, kapatma düğmelerinin küçük bırakılması. Katmanı kapatamayan kullanıcı sıkışmış hissediyor ve bazen siteden çıkıyor.
Dördüncüsü, testin masaüstü tarayıcıda yapılması. Ekran boyutu küçültülerek yapılan kontrol parmak boyutunu hesaba katmıyor; gerçek cihaz denemesi şart.
Beşincisi, etiketlerin tıklanamaz bırakılması. Onay kutuları ve radyo düğmelerinde etiketin de aktif olması bedava bir iyileştirme.
Altıncısı, metin içi bağlantıların sıkışması. Satır aralığı dar bir paragrafta bağlantıya basmak zorlaşıyor ve komşu satır tetikleniyor.
Yedincisi, ekranın kenarına yerleştirilen öğeler. Cihaz kenarındaki hedefler bazı telefonlarda sistem hareketleriyle çakışıyor.
Sekizincisi, dokunma geri bildiriminin olmaması. Basıldığında hiçbir görsel tepki vermeyen öğe, kullanıcıya çalışmadığını düşündürüyor.
Dokuzuncusu, kaydırılan alanlarda yanlış tetiklenme. Kullanıcı sayfayı kaydırmak isterken bir öğeye basmış oluyor; bu, dikkatli bir eşik ayarı gerektiriyor.
Onuncusu, erişilebilirlik ihtiyaçlarının atlanması. Hareket kısıtı olan ya da titremesi bulunan kullanıcılar için küçük hedefler tamamen kullanılamaz hale geliyor; bu grup için hedef boyutu bir konfor meselesi değil, kullanabilme şartı.
On birincisi, sorunun hiç ölçülmemesi. Yanlış basmalar oturum kayıtlarında ani geri dönüşler olarak net biçimde görünüyor ama kimse o kayıtlara bakmıyor.
On ikincisi, tek elle kullanımın hesaba katılmaması. İnsanlar telefonu çoğunlukla tek elle tutuyor ve başparmakla kullanıyor; iki elle rahat basılan bir hedef, tek elle ulaşılamaz olabiliyor. Boyut kadar konum da belirleyici.
Neyi çözmez?
Büyük hedefler, kötü yerleşimi düzeltmez. Düğme rahat basılıyor ama ulaşılması zor bir konumdaysa sorun devam eder.
Sıkça sorulan sorular
Ne kadar büyük olmalı?
Parmak ucunun rahat bastığı kadar. Görünen simge küçük kalabilir, tıklanabilir alan geniş olmalı.
Tarayıcıda test edebilir miyim?
Kısmen. Ekran boyutunu görürsünüz ama parmak boyutunu göremezsiniz; gerçek cihaz gerekir.
En kolay iyileştirme hangisi?
Onay kutusu etiketlerini tıklanabilir yapmak. Görsel değişiklik gerektirmez, hedefi kat kat büyütür.
Bu kavramın bütün resim içindeki yerini Ürün Sayfası Optimizasyonu Rehberi içinde ayrıntılı anlattım.
E-ticaret için ürün görseli, açıklama, güven alanı, beden/kargo/iade, yorumlar ve sepete ekleme oranı optimizasyonu.
