Mobil tasarımda en sık yapılan 5 hata
Ziyaretçilerin çoğu telefondan geliyor ama tasarım hâlâ büyük ekranda yapılıyor. Bu farktan doğan beş hatayı ve çözümlerini anlatıyorum.
Tasarım 27 inçlik bir ekranda fareyle yapılıyor, site ise 6 inçlik bir ekranda başparmakla kullanılıyor. Bu fark genelde aynı beş hataya yol açıyor.
1. Çok küçük dokunma hedefleri
Fare imleci tek bir pikseli bile tutturabiliyor, başparmak tutturamıyor. Bir yetişkinin parmak ucu ekranda yaklaşık 9 milimetrelik bir alana değiyor.
Dokunulabilen her öğe en az 44 × 44 piksel olsun. Görünüşte daha küçük olabilir ama dokunma alanı bu boyutta olmalı.
İki hedef arasında da en az 8 piksel boşluk bırakın. Yanlış dokunmaların en sık sebebi, birbirine sıkışmış menü bağlantıları.
2. Yatay kaydırma
Sayfa sağa sola kayıyorsa bir şey ekrandan taşıyor demektir. Sebep genelde sabit genişlik verilmiş bir tablo, bölünmeyen uzun bir bağlantı metni ya da negatif kenar boşluğu oluyor.
Bulmak için tarayıcıda F12'ye basın ve konsola document.documentElement.scrollWidth yazın. Çıkan sayı ekran genişliğinden büyükse bir şey taşıyor.
Tablolar için tabloyu yatay kaydırılabilen bir kutuya alın ya da mobilde kartlar hâlinde alt alta dizin.
3. 16 pikselden küçük yazı
Küçük yazının iki sorunu var. Birincisi zor okunuyor. İkincisi daha az bilinen bir sorun: iOS'ta 16 pikselden küçük yazılı bir form alanına dokunduğunuzda tarayıcı sayfayı kendiliğinden yakınlaştırıyor ve düzen bozuluyor.
Gövde metnini en az 16 piksel yapın. Form alanlarında bu kuralın istisnası yok.
4. Önemli içeriği menünün arkasına saklamak
Hamburger menü yer kazandırıyor ama içine koyduğunuz her şeyin görülme ihtimali belirgin biçimde düşüyor.
En önemli eyleminizi menüye koymayın, başlıkta görünen bir düğme olarak bırakın. Telefon numarası, WhatsApp ya da "Teklif Al" düğmesi menünün içinde kaybolmamalı.
5. Ekranı yiyen yapışkan öğeler
Üstte yapışkan başlık, altta çerez bandı, köşede canlı destek balonu, ortada bülten penceresi. Telefonda ekranın yarısı kapanıyor.
Yapışkan öğelerin toplam yüksekliği ekranın %20'sini geçmesin.
Mobilde başlığı aşağı kaydırırken gizleyin, yukarı kaydırınca geri getirin. Çerez bandını bir kez gösterin, kapatıldıktan sonra bir daha çıkarmayın.
Test etmenin en kolay yolu
Tarayıcıdaki mobil simülatör işe yarıyor ama yetmiyor, çünkü fareyle tıklamak parmakla dokunmaya benzemiyor.
Sitenizi kendi telefonunuzda açın ve yürürken tek elle kullanmayı deneyin. Zorlandığınız her yeri not alın ve düzeltin.