Konu Başlıkları
Yükleniyor...

Mobil Tasarımda Ekran Bütçesi, Menü ve Form Kararları

Mobil Arayüz: Dokunma Hedefi Ölçüleri ve Form Sadeleştirme

Mobil ekranda tasarımın büyük kısmı yer paylaştırmadır. Dokunulabilir bir öğeye 48dp taban koyduğun anda, ortalama bir telefon ekranına kaç satır sığacağı da sabitlenir. Sadeleştirme tavsiyesi bu yüzden estetik bir tercih değil, kalan yerin bölüşülmesi.

Ekran bütçesi bir aritmetik meselesi

Material Design dokunma hedefi için 48dp, Apple'ın arayüz kılavuzu 44pt taban veriyor. Ortalama bir telefonda içeriğe kalan yükseklik 640dp civarında. Satır aralarına 8dp boşluk koyarsan bir ekrana kaydırmadan 11 dokunulabilir satır sığar. Menünde on beş madde varsa dördü zaten görünmüyor.

Bu sayıya bakarak konuşmak, "en çok kullanılan işlevi üste al" cümlesini tavsiye olmaktan çıkarıp karar haline getirir. Görünmeyen dört maddeyi kaydırılabilir yapmak yerine silmek daha iyi sonuç verir.

Navigasyon

Hamburger menüyü ana gezinmenin tek taşıyıcısı yapmam. İkonun arkasına giren her bağlantı bir dokunuş daha uzaklaşır ve keşfedilme oranı düşer. Sık kullanılan üç dört hedefi alt çubukta açıkta bırakıp geri kalanı menüye toplamak, tek bir simgeye her şeyi yıkmaktan iyi çalışır.

Simgelerin yanına metin etiketi koy. Üç çizgili menü işareti artık öğrenilmiş sayılabilir, ama profil, filtre, sepet ikonlarında aynı şey geçerli değil; kullanıcı tahmin etmek zorunda kalıyor.

Form alanları

Yaygın tavsiye şu: mobilde az alan iste, kalanını masaüstünde topla. Bu sürtünmeyi silmez, taşır. Kullanıcı aynı kişi ve ikinci oturuma yayılan her form, tek oturumdakinden daha düşük tamamlanma oranı verir. Alan gerçekten gerekli değilse tamamen kaldırılır; gerekliyse orada sorulur ve kolaylaştırılır.

Kolaylaştırmanın pratik karşılığı kod tarafında duruyor: alana uygun klavyeyi açan inputmode değeri ve tarayıcının kayıtlı bilgisini doldurabilmesi için doğru autocomplete öznitelikleri. İkisi de birkaç satır, ikisi de çoğu formda unutuluyor.

Ağırlık ve bağlantı

Performansı ofis bağlantısında ölçmek hiçbir şey söylemez. Tarayıcının ağ kısıtlama profilini yavaş 4G'ye alıp sayfayı öyle aç, ilk ekranın ne zaman kullanılabilir hale geldiğine bak. Görsellerde srcset ve gerçekten ihtiyaç duyulan boyutu servis etmek, çoğu sayfada geri kalan bütün optimizasyonların toplamından fazla kazandırır.

Bildirimler

Bildirimi türüne göre ayır. İşlem bildirimi anında gider; pazarlama bildirimi kullanıcı ayrıca izin verdiyse gider. İkisi aynı kanaldan gittiğinde kullanıcı ikisini birden kapatır ve sipariş durumunu da haber veremez hale gelirsin.

Süreklilik

Masaüstünde başlayan iş mobilde kaldığı yerden devam etmeli. Bunun görsel tutarlılıkla ilgisi az, oturum ve durum yönetimiyle ilgisi çok. Sepetin, taslağın, yarım kalan formun sunucu tarafında saklanıp saklanmadığı; arayüzün aynı renklerde olup olmadığından daha belirleyici.