Mobil Arayüz Tasarımı: Dokunma Hedefi, Menü ve Okunabilirlik
Mobil arayüz tasarımı, masaüstü tasarımın küçültülmüş hali değil. Ekran daraldıkça kararlar birbirini sıkıştırır: menüyü parmağın rahat ulaştığı yere koyarsanız içerikten yer çalarsınız, dokunma hedefini büyütürseniz aynı ekranda daha az satır gösterirsiniz. İyi mobil tasarım bu takasları gizlemekten değil, bilerek seçmekten geçiyor.
Dokunma hedefi, tasarımın ölçülebilen parçası
Mobilde tartışmaya en kapalı kural burada başlıyor: parmak ucu fare imlecinden büyüktür ve titrer. Apple'ın insan arayüzü kılavuzu dokunulabilir alanlar için 44x44 pt, Google'ın Material rehberi 48x48 dp alt sınırını verir. İkisi de fiziksel olarak yaklaşık 9 milimetreye denk düşer, yani rakamlar farklı görünse de aynı yerden çıkıyor.
Yaygın yanlış anlama, dokunma alanının görünen boyutla aynı olması gerektiğini sanmak. Gerekmiyor. 24 piksellik bir ikonun çevresine 12 piksel iç boşluk verirsiniz, dokunulabilir alan 48'e çıkar, ikon aynı kalır. Tasarımı hiç bozmadan yanlış dokunmayı azaltmanın en ucuz yolu bu ve çoğu arayüz kütüphanesinde birkaç satırlık iş.
Aralık da en az boyut kadar belirleyici. Yan yana duran iki hedef 48 dp olsa bile aralarında boşluk yoksa kullanıcı hangisine bastığını bilemez. Listelerde silme ve düzenle ikonlarını yapıştırmak tam olarak bu yüzden sorun çıkarır.
Affordance ve signifier: neyin mümkün olduğu, nasıl belli olduğu
Affordance, bir nesnenin sunduğu eylem imkanıdır. Signifier ise o imkanın görünür işareti. Ayrım akademik duruyor ama mobilde doğrudan hata üretir, çünkü sık karşılaşılan durum şu: alan gerçekten dokunulabilir, dokunulabildiğini gösteren hiçbir işaret yok.
Düz tasarımın bıraktığı miras da bu. Gölge, çerçeve ve eğim kalkınca butonun buton olduğunu anlatma yükü tek başına renge ve konuma bindi. Kart içindeki gri zeminli metin bloğunun tıklanabilir olup olmadığını kullanıcı ancak deneyerek öğreniyor, denemenin bedeli de yanlış sayfa.
Tek parmak, tek göz
Mobil için pratik bir kabul testi var: kullanıcı telefonu tek eliyle tutup baş parmağıyla, ekrana yarım saniye bakarak işini bitirebiliyor mu? Baş parmağın rahat taradığı bölge ekranın alt yarısı ve telefonu tutan elin tarafı. En zor nokta çapraz üst köşe.
Hamburger menü tam oraya oturuyor. Ana eylemi hamburger menüsünün içine koymam; ikonun arkası nadiren ihtiyaç duyulan ikincil sayfalar için makul bir depo, günlük akış için değil. Menüye taşınan her birincil eylem, kullanıcıdan önce bir ikonu keşfetmesini, sonra listede aramasını ister.
Kalıplar ve ters teptikleri yer
Mobilde kalıp kullanmak iyidir, çünkü kullanıcı onları başka uygulamalardan öğrenmiş halde geliyor. Ama her kalıbın bir maliyeti var.
- Tab bar: alt kenarda üç ila beş bölüm. Parmağa yakın, her zaman görünür. Beşi geçtiğinde etiketler okunmaz hale gelir ve kullanıcı ikon tahmin etmeye başlar.
- Çekerek yenile: alışkanlık haline gelmiş, öğretilmesi gerekmeyen bir jest. Sayfa zaten otomatik güncelleniyorsa gereksiz.
- Sonsuz kaydırma: akış türü içerikte doğru. Yan etkisi çoğu zaman fark edilmiyor: alt bilgiye asla ulaşılamaz. İletişim, gizlilik ya da ayarlar bağlantılarını footer'a koyduysanız, sonsuz kaydırma onları erişilemez kılar. İkinci sorun geri dönüşte konumun kaybolması, uzun listede bu tek başına terk sebebi.
Bildirimler
Bildirim, kullanıcının size verdiği en kırılgan izin. Bir kez gereksiz yere kullanıldığında geri alınıyor ve genellikle tamamen kapatılarak alınıyor. Kategori bazında ayar sunmak, sıklığı düşürmekten daha işe yarar.
Formlar
Mobilde form doldurmak zahmetli, dolayısıyla en etkili iyileştirme alan sayısını azaltmak. Kalan alanlarda klavye tipini doğru vermek bedava kazanç: e-posta alanında type="email", telefon alanında inputmode="tel" yazmak kullanıcıya doğru klavyeyi getirir. autocomplete öznitelikleri de adres ve kart alanlarını tarayıcıya doldurtur.
Doğrulamayı gönder tuşuna saklamayın. Alan terk edildiği anda kontrol edin ve hatayı alanın yanında gösterin. Sayfanın tepesinde toplanan hata listesi masaüstünde işe yarıyordu, mobilde kullanıcı hatayı okuyup ilgili alana kaydırdığında metni unutmuş oluyor.
Okunabilirlik ve kontrast
16 piksel gövde metni mobilde alt sınır sayılıyor ve bunun tarayıcı tarafında da somut bir karşılığı var: iOS Safari, yazı boyutu 16 pikselin altında olan bir form alanına odaklanıldığında sayfayı otomatik yakınlaştırır. Küçük yazı yüzünden ekranın zıplaması genellikle tasarım hatası değil, bu davranışın ta kendisi.
Kontrastta WCAG 2.2 normal metin için 4.5:1, büyük metin için 3:1 oranını istiyor. Açık gri zemin üstüne açık gri metin, tasarım ekranında zarif görünüp güneş altındaki telefonda kaybolan klasik hata. Karanlık modda ise ters yönde bir tuzak var: saf siyah zemin üstüne saf beyaz metin, OLED ekranda parlama yapıp okumayı zorlaştırıyor, koyu gri daha rahat.
Kaynaklar