Mobil Arayüzde Ekran Bütçesi, Bölünen Oturum ve Bağlantı

Mobil tasarımı ayıran şey küçük ekran değil, ekranın sabit bir bütçe olması. Masaüstünde yeni bir bileşen eklediğinizde sayfa uzar; mobilde eklediğiniz her şey başka bir şeyi aşağı iter ya da görünürlükten çıkarır. Bunun üstüne her an bölünebilen oturumlar ve güvenilmez bir bağlantı gelir. Üç kısıt da tasarım kararını daraltır, o yüzden önce onları netleştirmek gerekir.

Ekran bir bütçedir, liste değil

Görünür alanı iki parçaya ayırın: içerik ve chrome. Chrome, içeriği göstermeyen her şey demek; başlık, arama kutusu, sabit menü, çerez bandı, uygulama indirme şeridi. Bunların toplamı bir sayfa açıldığında kullanıcının gördüğü ilk ekranın yarısına yaklaşıyorsa tasarım değil, pazarlama kararı almışsınız demektir.

Sayı vermek bu tartışmayı kısaltır. Tarayıcı çubukları küçüldükten sonra tipik bir telefonda kalan görünür alan 700 piksel civarında olur. 56 piksellik bir üst başlık ve 56 piksellik bir alt sabit menü, bu alanın yüzde on altısını kalıcı olarak alır. Sabit menü savunulabilir bir tercihtir, ama bedava değildir: sık kullanılan üç dört işlemi barındırmıyorsa o yüzde on altıyı içeriğe geri verin.

Oturum her an bölünür

Mobil oturum kısa değil, kesintili. Kullanıcı sekiz saniye sonra gelen bir çağrıyla arayüzden çıkar, üç dakika sonra geri döner. Tasarımın bu dönüşü sorunsuz karşılaması gerekir.

Pratikte bunun bir tek karşılığı var: durumu istemci tarafında saklayın. Form alanlarını değişiklik anında, sepeti ve filtreleri gezinme anında yazın. Bir e-ticaret projesinde form alanlarını her değişiklikte yerel depoya yazdıktan sonra "formu doldurmuştum, geri döndüğümde boştu" şikâyeti destek kuyruğundan tamamen düştü. Bu iş birkaç satırlık bir olay dinleyicisi, üçüncü parti bir durum kütüphanesine gerek yok.

Aynı mantık kaydırma konumu için de geçerli. Listeden bir ürüne girip geri dönen kullanıcıyı sayfanın başına atmak, oturumu kesen bir hatadır.

Dokunma hedefi tartışmaya açık değil

Parmak ucu imleç değildir. Apple'ın insan arayüz kılavuzu 44 punto, Google'ın Material kılavuzu 48 dp alt sınır koyar. Görsel öğe daha küçük olabilir, dokunulabilir alanın olmaması gerekir; ikisini ayırmak için dolgu yeterli.

İkinci kural, yanlış dokunmanın ucuz olması. Sanal klavyede yazım hatası kaçınılmaz, hedefi ıskalamak da öyle. Yıkıcı işlemleri onay penceresiyle korumak yerine geri alınabilir yapın: silme işlemini beş saniyelik bir "geri al" bandıyla vermek, hem daha az tıklama hem daha az pişmanlık üretir. Onay penceresi kullanıcıyı yavaşlatır ama yanlış dokunmayı engellemez, çünkü refleks haline gelir.

Bağlantı, ortalamayla değil kötü senaryoyla ölçülür

Sayfa hızını kendi ofis ağınızda ölçmek işe yaramaz. Asansörde, metroda, sinyalin bir çubuğa düştüğü yerde ne olduğu belirleyicidir. Tarayıcı geliştirici araçlarındaki ağ kısıtlama ayarı bu testi ücretsiz yapar ve çoğu ekip kullanmaz.

Bir bütçe belirleyip ona uyun. İlk ekranın toplam yükü, görseller dahil, birkaç yüz kilobaytı aşmamalı. Görselleri boyutlandırmadan yüklemek, tek bir yazı tipi için dört ayrı ağırlık indirmek ve her etkileşimde sunucuya gidip beklemek, mobilde en sık görülen üç yavaşlatıcıdır.

"Kendi kendine yeterlilik" ile donanım erişimi çelişir

Mobil tasarım tavsiyeleri genelde iki şeyi yan yana söyler: arayüz kendi kendine yetsin, kullanıcıyı başka uygulamaya göndermesin; bir yandan da kamerayı, konumu, ses girişini kullansın. Bu ikisi aynı anda tam olarak sağlanamaz, çünkü kameraya ya da konuma erişmek zaten sistem katmanına devretmek demektir.

Doğru okuma şu: sorun devretmek değil, devrettikten sonra dönüşü karşılayamamak. Kamera açılıp fotoğraf çekildiğinde kullanıcı geri geldiğinde formun geri kalanı yerinde duruyorsa devir başarılıdır. Konum izni reddedildiğinde arayüz kilitlenip kalıyorsa başarısızdır. Donanım özelliklerini kullanın, ama her birini reddedilebilir bir istek olarak tasarlayın: izin yoksa manuel giriş yolu açık kalmalı.

Bu üç kısıt birbirini besler. Ekran bütçesine saygı gösteren arayüz daha az bileşen yükler, daha az bileşen yükleyen sayfa kötü bağlantıda ayakta kalır, hızlı açılan sayfa bölünen oturumdan daha az zarar görür. Sıralamayı da bu belirler: önce ekranda ne durduğuna karar verin, hız ve durum yönetimi arkasından gelir.