Mobil Tasarımda Görev Odaklılık: Küçük Ekranda Ne Kalmalı
Mobil tasarımı masaüstünün küçültülmüş hali sanmak, dar ekranı tek problem olarak görmek demek. Asıl fark bağlamda: kullanıcı ayakta, çoğu zaman tek elle, kopuk bir bağlantıyla ve yarım dakikalık bir boşlukta bir işi bitirmeye çalışıyor. Görev odaklılık bu yüzden estetik bir tercih değil, neyin ekranda kalacağına karar verme yöntemi.
Görev odaklılık aslında bir eleme kuralı
Bir ekranı açtığınızda şunu sorun: kullanıcı buraya hangi tek iş için geldi? Cevap birden fazlaysa ekran zaten bölünmüş demektir. Peki ya iki iş de gerçekten sık yapılıyorsa? O zaman ikisini eşit ağırlıkta göstermek yerine hangisinin daha sık tekrarlandığına bakıp diğerini bir dokunuş uzağa taşımak daha iyi çalışıyor. Sıklık verisi yoksa tahmin yürütmek yerine iki hafta log toplamak, tasarım tartışmasını bitiren en ucuz yöntem.
Başparmak bölgesi ile alt sekme çubuğu aynı yeri istiyor
"Önemli işlemleri alta koyun" tavsiyesi ile "alt sekme çubuğu kullanın" tavsiyesi çoğu yazıda yan yana durur, ama ikisi de ekranın aynı dar şeridini talep eder. Birini seçmek zorundasınız: ya birincil eylem alta sabitlenir ve gezinme yukarı çıkar, ya da sekmeler altta kalır ve birincil eylem içerik akışının içine yerleşir. İkisini üst üste bindirdiğinizde kullanıcı sekmeye basmak isterken kaydet düğmesine değiyor.
Ölçüler tartışmaya açık değil: Apple 44x44 pt, Android tarafında Material 48x48 dp asgari dokunma hedefi öneriyor. WCAG 2.2'nin 2.5.8 ölçütü ise AA seviyesinde 24x24 CSS pikseli şart koşuyor, yani platform kılavuzları erişilebilirlik tabanının bir hayli üstünde duruyor. Bir de jest çubuğu var: ekranın en alt kenarına yapıştırılmış bir düğme, sistemin ana ekrana dönüş jestiyle çakışır. Güvenli alan dolgusunu bırakmadan alta hiçbir şey sabitlemeyin.
Sekme sayısı bir sınıflandırma testidir
Beşten fazla alt sekmeye ihtiyaç duyuyorsanız problem gezinmede değil, içerik sınıflandırmasında. Sekme eklemek o hatayı görünmez yapar, çözmez. Tek ekranda biten işler için menüye hiç girmeyin; hiyerarşik menü, gerçekten derinliği olan uygulamalarda anlamlı.
Formlar: klavye ve doğrulama
Mobilde en çok terk edilen yer form. Sayı alanlarını genelde inputmode="numeric" ile çözerim, type="number" tarayıcıya artırma oklarını ve kaydırma sırasında değer değiştirme davranışını getirdiği için kart numarası veya kod alanında sorun çıkarıyor. Tek kullanımlık SMS kodları için autocomplete="one-time-code" yazmak, kullanıcıyı uygulamalar arasında gidip gelmekten kurtarır.
Doğrulamayı kullanıcı alandan çıkmadan yapmayın; yazarken kırmızıya boyanan bir alan, henüz hata yapmamış birini uyarmaktan başka işe yaramaz. Alandan çıkışta doğrula, gönderimde tekrar doğrula.
Kesintiden dönüş
Mobil oturum her an bölünür: telefon çalar, bağlantı düşer, uygulama arka plana atılır. Yarıda kalan formun durumunu yerel olarak saklamak, arayüzde yapacağınız çoğu iyileştirmeden daha fazla tamamlanma kazandırır. Geri bildirim tarafında da abartıya kaçmaya gerek yok; işlemin başladığını, bittiğini ve başarısız olduysa nedenini söyleyen üç durum yeterli.
SVG her yerde doğru cevap değil
İkonlar, çizgi grafikler ve logolar için SVG net kazanç: ölçeklenir, metin olduğu için sıkışır. Ama binlerce yol içeren detaylı bir illüstrasyon, aynı görüntünün optimize edilmiş bir raster sürümünden hem daha büyük hem de çizim maliyeti yüzünden daha yavaş olabilir. Fotoğraf zaten SVG'nin işi değil. Kararı dosya türüne göre değil, görselin karmaşıklığına göre verin ve iki sürümün gerçek boyutunu ölçün.
İlk açılış
İlk kullanımda uygulamanın tamamını tanıtma isteği güçlüdür, ama tanıtım turu bir tasarım açıklaması değil, tasarımın kendini anlatamadığının itirafıdır. İlk ekranda kullanıcıyı tek bir işe götürün. Geri kalan özellikler, o iş tekrarlandıkça kendiliğinden keşfedilir.