Mobil Uyumluluk: Küçültmek Yeterli Değil

Mobil öncelik neden gerekli?

Çoğu kurumsal sitede trafiğin büyük bölümü telefondan gelir. Arama motorları da mobil sürümü esas alarak değerlendirir.

Buna rağmen tasarımlar hâlâ masaüstünde başlar ve mobil sonradan uyarlanır. Sonuç, telefonda sıkışmış bir masaüstü deneyimidir.

İçeriği yeniden önceliklendirin

Küçük ekranda her şey görünemez. Hangi bilginin önce geleceğine karar vermek gerekir.

Masaüstünde yan yana duran üç bloğun mobilde hangi sırayla dizileceği bir tasarım kararıdır, otomatik bir sonuç değildir.

En kritik eylem çağrısı ilk ekranda erişilebilir olmalıdır.

Dokunma hedefleri

Düğme ve bağlantılar parmakla rahat basılacak büyüklükte olmalıdır. Küçük hedefler yanlış tıklama üretir.

Yan yana duran küçük bağlantılar arasında yeterli boşluk bırakın.

Fare ile çalışan üzerine gelme etkileşimleri dokunmatik ekranda yoktur; kritik bilgiyi bu etkileşimin arkasına koymayın.

Yatay taşma

En sık görülen mobil hatası, sayfanın yatay kaymasıdır. Genellikle sabit genişlikli bir öğe ya da taşan bir tablo yüzünden olur.

Her sayfayı dar ekranda açıp yatay kaydırma olup olmadığını kontrol edin. Bu basit test çok sayıda hatayı yakalar.

Sabit ve üst üste gelen öğeler

Sabitlenmiş başlıklar, çerez bildirimleri, sohbet baloncukları ve yukarı çık düğmeleri küçük ekranda çakışır.

Yeni bir sabit öğe eklerken diğerleriyle çakışmadığını mutlaka kontrol edin.

Cihazların güvenli alan boşluklarını hesaba katın; içerik çentik veya alt çubuk altında kalmamalıdır.

Performans

Mobil bağlantı ve işlemci gücü değişkendir. Masaüstünde hızlı görünen sayfa telefonda yavaş olabilir.

Görselleri ekran boyutuna göre sunun. Masaüstü için hazırlanmış büyük görselleri telefona göndermek en yaygın israftır.

Üçüncü taraf betikleri mobilde daha ağır hisssettirir; gerekliliğini sorgulayın.

Formlar ve klavye

Doğru klavye türü, otomatik doldurma ve yeterli alan yüksekliği mobil form deneyimini belirler.

Klavye açıldığında gönder düğmesinin görünür kalması önemlidir.

Test yöntemi

Tarayıcı geliştirici araçları iyi bir başlangıçtır ancak gerçek cihaz testinin yerini tutmaz.

En az bir düşük donanımlı Android cihazda test edin; en yavaş deneyim orada ortaya çıkar.

Mobilde içerik önceliklendirme örneği

Masaüstünde yan yana duran üç sütunun mobilde hangi sırayla dizileceğine siz karar vermelisiniz.

Genellikle doğru sıra, kullanıcının sorusuna en hızlı cevap veren bloktan başlamaktır.

Uzun içerikleri mobilde katlanabilir bölümlere ayırmak okunabilirliği artırır; ancak kritik bilgiyi katlanan alanın içine koymayın.

Tabloları mobilde yatay kaydırılabilir yapın veya kart görünümüne dönüştürün; sıkıştırılmış tablolar okunmaz.

Gerçek cihazda test

Tarayıcı geliştirici araçları düzeni gösterir ama performansı ve dokunma davranışını göstermez.

En az bir düşük donanımlı Android cihazda test edin; en yavaş deneyim orada ortaya çıkar.

iOS ve Android arasındaki kaydırma, klavye ve güvenli alan farkları yalnız gerçek cihazda görünür.

Test cihazı yoksa, tarayıcının ağ ve işlemci kısıtlama seçenekleriyle yavaş koşulları taklit edin; bu en azından kaba bir fikir verir.