Kurumsal Sitede Mobil Deneyim: Masaüstünün Küçüğü Değildir

Kurumsal sitelerin ziyaretçi verisine bakıldığında tablo çoğu sektörde aynıdır: trafiğin büyük bölümü mobil cihazlardan gelir. Buna karşılık tasarım onayları geniş ekranda verilir, kontroller masaüstünde yapılır ve mobil sürüm bir uyarlama olarak kalır.

Mobil, masaüstünün dar hâli değildir. Farklı bir giriş yöntemi, farklı bir dikkat süresi ve farklı bir ağ koşulu vardır.

Dokunma hedefleri

Fare imleci bir pikseli işaret eder; parmak bir alanı kaplar. Bu nedenle mobil arayüzde tıklanabilir her öğe belirli bir asgari alana sahip olmalıdır.

• Düğme ve bağlantılar için en az 44 piksel yükseklik hedeflenir.
• İki dokunma hedefi arasında yeterli boşluk bırakılır; yan yana duran iki bağlantı yanlış dokunma üretir.
• Metin içine gömülü bağlantılar mobilde ayrı bir düğmeye dönüştürülebilir.
• Telefon numarası ve e-posta adresi doğrudan aranabilir ve yazılabilir bağlantılar olmalıdır.

Menü kurgusu

Mobil menü, masaüstü menüsünün açılır kutusu değildir.

• Menü açıldığında sayfanın kaydırılması engellenir; aksi hâlde kullanıcı menüyle sayfa arasında kaybolur.
• Açık ve kapalı durum, ekran okuyucular için de bildirilir.
• Bulunulan sayfa menüde işaretlenir.
• Menü kapanışı hem kapatma düğmesiyle hem bir bağlantıya dokunularak çalışmalıdır.
• Çok katmanlı menüler mobilde düzleştirilir; üç seviye derinlik dokunmatik ekranda kullanılabilir değildir.

Formlar

Formlar mobilde en çok terk edilen alandır.

• Doğru klavye açılmalıdır. Telefon alanı için sayısal klavye, e-posta alanı için `@` içeren klavye.
• Otomatik doldurma açık olmalıdır. Ad, telefon ve e-posta alanları tarayıcının kayıtlı bilgilerini kullanabilmelidir.
• Alan sayısı azaltılır. Mobilde her ek alan, tamamlanma oranını düşürür.
• Hata mesajı alanın yanında görünür. Formun en üstünde toplanan hata listesi, mobilde ekran dışında kalır.
• Gönder düğmesi klavye açıkken erişilebilir olmalıdır.

Tipografi ve okunabilirlik

• Gövde metni için 16 piksel altına inilmez; daha küçük değerler bazı tarayıcılarda otomatik yakınlaştırma tetikler.
• Satır uzunluğu dar ekranda zaten sınırlıdır; yan boşlukların yeterli olması gerekir.
• Uzun başlıklar taşmamalı, kelime kırılması kontrollü olmalıdır.
• Kontrast oranı, açık havada okunacağı varsayılarak seçilir.

Tablolar ve geniş içerik

Teknik ürün tabloları kurumsal sitelerin vazgeçilmezidir ve mobilde en çok bozulan öğedir.

Üç yaklaşım kullanılır:

• Kendi içinde yatay kaydırma. Tablo, kendi kutusu içinde kaydırılır; sayfanın tamamı yana kaymaz.
• Kart görünümüne dönüştürme. Her satır, etiket-değer çiftlerinden oluşan bir karta dönüşür.
• Sütun önceliklendirme. Dar ekranda yalnızca en önemli sütunlar gösterilir, gerisi açılır.

Hangi yaklaşım seçilirse seçilsin, sayfanın gövdesi hiçbir genişlikte yatay kaymamalıdır.

Görseller

• Ekran genişliğine göre farklı boyutlarda görsel sunulur; masaüstü için hazırlanmış görselin mobilde küçültülerek gösterilmesi hem yavaştır hem gereksiz veri harcar.
• Görsel oranları önceden tanımlanır; yer ayrılmadığında içerik kayar.
• Ekranın üstünde kalmayan görseller geciktirilerek yüklenir.

Ölçüm: gerçek cihazda

Tarayıcının geliştirici araçlarındaki cihaz simülasyonu yerleşimi gösterir, davranışı göstermez. Dokunma hedefleri, klavye davranışı, kaydırma akıcılığı ve ağ koşulu ancak gerçek bir cihazda anlaşılır.

Teslim öncesinde şu kontroller gerçek bir telefonda yapılır:

• Menü açılıyor ve kapanıyor mu?
• Form gönderilebiliyor mu, doğrulama mesajları görünüyor mu?
• Telefon numarasına dokunulduğunda arama başlıyor mu?
• Ürün tablosu okunabiliyor mu?
• Sayfa hiçbir noktada yatay kaymıyor mu?
• Yavaş bağlantıda ilk ekran ne kadar sürede geliyor?