Mobil Kullanıcı Deneyiminde En Sık Yapılan Hatalar

Mobil tasarım hakkındaki en pahalı varsayım, onun masaüstü tasarımının dar hâli olduğudur.

Bu varsayım genellikle açıkça dile getirilmez. Sadece süreçte kendini gösterir: tasarım geniş ekranda yapılır, sonunda "mobile de bakalım" denir ve düzen sıkıştırılır. Ortaya çıkan şey teknik olarak responsive'dir; ama mobil için tasarlanmış değildir.

Aşağıdakiler, mobil deneyimde en sık karşılaştığımız hatalar ve bunların çoğunun neden yayına kadar fark edilmediği üzerine.

Daraltmak, önceliklendirmek değildir

Masaüstünde yan yana duran üç sütun, mobilde alt alta gelir. Teknik olarak sorun yoktur. Ancak bu, sayfanın anlamını sessizce değiştirir.

Geniş ekranda aynı anda görünen üç şey, artık bir sıraya girmiştir. Sağdaki sütunda duran ve masaüstünde hemen görünen ana eylem, mobilde iki ekran aşağıda kalabilir. Kimse bu kararı vermemiştir; düzen onu kendisi vermiştir.

Mobil tasarımın gerçek işi burada başlar: neyin önce geleceğine karar vermek. Bu karar verilmediğinde, sıralamayı CSS'in kaynak sırası belirler.

İçerik önceliği aynı zamanda bir sadeleştirme fırsatıdır. Bir bölüm mobilde gerçekten gerekli değilse, sorulacak soru "nereye koyalım?" değil, "masaüstünde de gerekli mi?" olabilir.

Dokunma hedefleri düşünüldüğünden küçük

Fareyle bir piksel hassasiyetinde tıklanabilir. Parmakla tıklanamaz.

Küçük dokunma hedefleri genellikle görsel bir tercihin yan etkisidir: ince bir ikon, kompakt bir liste, sıkı bir menü. Ekranda zarif görünür, elde ise ıskalanır.

WCAG 2.2 asgari hedef boyutu için bir ölçüt tanımlar ve platform yönergeleri genellikle daha rahat bir alan önerir. Ancak sayıdan önce gelen şey şudur: dokunulabilir alan, görünen alandan büyük olabilir. Bir ikon küçük çizilip etrafındaki boşlukla birlikte rahat bir hedefe dönüştürülebilir. Tasarımı büyütmeden hedefi büyütmek çoğu durumda mümkündür.

Hedeflerin birbirine yakınlığı da ayrı bir sorundur. Yan yana duran iki küçük buton, tek başına küçük bir butondan daha risklidir: yanlış olana basmak, hiçbir şeye basamamaktan kötüdür.

Ekranı kaplayan katmanlar

Mobil ekranda dikey alan kıttır. Sabit bir başlık, sabit bir çerez bandı ve bir de kampanya şeridi aynı anda duruyorsa, geriye içerik için çok az yer kalır.

Bu katmanlar tek tek makul görünür. Sorun toplamlarındadır ve genellikle kimse toplamı görmez, çünkü her biri farklı zamanlarda eklenmiştir.

Aynı şekilde, kapatma düğmesi küçük ya da erişilemez olan katmanlar mobilde çok daha can sıkıcıdır. Masaüstünde bir köşedeki küçük çarpı sorun değildir; telefonda başparmakla ulaşılamayan bir çarpı, kullanıcının sayfayı terk etmesinin en hızlı yoludur.

Klavye açıldığında ne oluyor?

Formlar mobilde masaüstünden farklı davranır ve bu davranış genellikle test edilmez.

Klavye açıldığında görünür alan küçülür. Doldurulan alan klavyenin altında kalabilir; gönder butonu görünmez hâle gelebilir; sabit bir başlık varsa kalan alan daha da daralır. Kullanıcı ne yazdığını görmeden yazmaya çalışır.

Bunun yanında klavye türü de bir tasarım kararıdır. E-posta alanı için harf klavyesi, telefon alanı için tam klavye açılması küçük bir detay gibi görünür; ancak her yanlış klavye, kullanıcıya fazladan iş çıkarır.

Bir formu mobilde test etmenin en dürüst yolu, onu gerçekten doldurmaktır — bakmak değil.

Yatay taşma

Yatay kaydırma, mobilde neredeyse her zaman bir kazadır. Sayfa hafifçe yana kayar, düzen bozulmuş gibi görünür ve kullanıcı nedenini anlamaz.

Sebebi genellikle küçüktür: sabit genişlikli bir öğe, taşan uzun bir kelime, ekran dışına yerleştirilmiş dekoratif bir görsel ya da negatif margin. Sorun küçük olduğu için de gözden kaçar.

Buradaki tehlike, overflow-x: hidden ile örtmenin kolay olmasıdır. Bu, sebebi ortadan kaldırmaz; yalnızca belirtiyi gizler ve bazen kaydırma davranışında yeni sorunlar üretir. Taşan öğeyi bulmak biraz daha uzun sürer ama kalıcı çözümdür.

Ağırlık mobilde daha çok acıtır

Aynı sayfa, mobil bir bağlantıda ve daha zayıf bir cihazda çok farklı bir deneyimdir.

Masaüstünde fark edilmeyen büyük bir görsel, telefonda gözle görülür bir bekleme üretir. Masaüstünde akıcı çalışan bir animasyon, düşük güçlü bir cihazda takılabilir. Süslü bir geçiş, kullanıcının hedefine ulaşmasını geciktiriyorsa mobilde bunun bedeli daha yüksektir.

Bu, mobilde hareketin yasak olduğu anlamına gelmez. Yalnızca bütçenin daha dar olduğunu söyler.

Gerçek cihazda denemenin yeri doldurulamaz

Tarayıcı geliştirici araçlarındaki cihaz simülasyonu yararlıdır ama sınırlıdır. Ekran boyutunu taklit eder; parmağı, klavyeyi, bağlantıyı, işlemciyi ve güneş altındaki ekranı taklit etmez.

Gerçek bir telefonda birkaç dakika, saatlerce süren tahminden daha çok şey öğretir. Özellikle şu üçünü: hedefler yeterince büyük mü, form doldurulabiliyor mu, sayfa gerçekten hızlı hissettiriyor mu.

Bu koşulları web çalışmalarımızda tasarım aşamasında ele almayı tercih ediyoruz; sonda düzeltilen bir mobil sürüm genellikle daha pahalıya mal olur.

Mobil yayın öncesi

Mobil deneyimdeki hataların çoğu bilgi eksikliğinden değil, sıralamadan kaynaklanır: mobil en sonda ele alındığında, geriye yalnızca sığdırmak kalır.

Karar sırası tersine çevrildiğinde iş kolaylaşır. Önce dar ekranda neyin gerçekten gerekli olduğuna karar verilirse, geniş ekran bir sadeleştirme değil, bir genişleme olur.