Mobil Arayüz Optimizasyonu: Neyi Sadeleştirip Neyi Bırakmalı
Mobil arayüz tavsiyelerinin çoğu birbiriyle çelişir: sadeleştir ama bilgi yoğunluğunu artır, başlığı kırpmadan göster ama ilgi çekici öğeyi ekranın üstünde tut. Sınırlı olan ekran genişliği değil, ilk ekranda kalan dikey alan. Çelişkinin hangi tarafında durulacağı da içeriğin türüne göre değişiyor.
Dokunma hedefi: tahmin değil ölçü
"Butonları büyüt" tavsiyesi bir ölçü vermediği için işe yaramaz. Platform kılavuzları veriyor: iOS için 44x44pt, Android için 48x48dp, iki hedef arasında en az 8dp boşluk. Bunlar alt sınır, hedef değil. Liste satırlarında 56dp'ye çıkmak yanlış dokunmayı gözle görülür azaltıyor, üstelik kaydırma sırasında parmağın kaymasına da tolerans bırakıyor.
Başparmak bölgesi haritalarına ise mesafeli yaklaşıyorum. İnsanlar telefonu tek elle tutup iki elle yazıyor, yatay çevirdiğinde kavrayışı tamamen değişiyor; ekranın alt üçte birini kutsallaştıran şemalar bu davranışı yok sayıyor. Bir haber listesinde başlığı değil kartın tamamını bağlantı yaptım, yanlış dokunma şikâyetleri neredeyse tümden bitti.
Sadeleştirme ile yoğunluk çelişir, biri seçilecek
Yaygın tavsiye listesi aynı anda iki şey istiyor: her kartta özet göster, bir yandan da seçenekleri ilk ekranda tut. Hesap bu ikisini bir arada tutmuyor.
Kabaca ölçelim. Telefon tarayıcısında kullanılabilir yükseklik 640 piksel civarında. Üç satırlık başlık (3x24), iki satırlık özet (2x22), bir satır üstveri ve kart içi boşluklar toplandığında kart 160 piksele oturuyor, ilk ekrana dört kart sığıyor. Özeti attığınızda kart 116 piksele düşüyor, sığan kart sayısı beşe çıkıyor. Kart sayısını altıya çıkarmak istiyorsanız başlığı iki satıra kırpmanız gerekiyor, yani "başlığı tam göster" tavsiyesinden vazgeçmeniz.
Listede özeti atıp başlığa yatırım yapmayı tercih ederim. Özet zaten çoğu yerde ilk iki cümlenin otomatik kırpılmasıyla üretiliyor ve başlığın söylediğini tekrar ediyor; okuyucuya yeni bilgi vermeyen bir satıra iki kart feda etmek kötü bir takas.
Sabit menünün kirası
Alt sabit menü 56 piksellik bir şeridi kalıcı olarak kiralar, 640 pikselde her ekranın yüzde dokuzu. Navigasyonun tekrar tekrar kullanıldığı yapılarda, kategori arasında gezilen bir haber sitesinde ya da sepete giden bir mağazada, bu kirayı hak ediyor. Tek akışlı okuma sitesinde etmiyor; ziyaretçi menüye bir kez dokunup çıkacakken şerit sayfanın sonuna kadar orada bekliyor.
Uygularken atlanan nokta çentikli telefonların alt güvenli alanı. padding-bottom: env(safe-area-inset-bottom) yazılmadığında menü sistem çubuğunun altında kalıyor ve en sağdaki dokunmalar iOS'ta yutuluyor. Masaüstü tarayıcıyı küçültüp test ederseniz bu hatayı hiç görmezsiniz.
Arama az kullanılıyor, ama gizlenmemeli
Aynı öneri listesi hem aramanın nadiren kullanıldığını hem de kolay erişilebilir olması gerektiğini söylüyor. Bu ikisi çelişmiyor, farklı sitelerden konuşuyorlar. Arşivi binlerce yazıya ulaşan bir sitede arama, kategori menüsünden sonra en çok kullanılan yol; yirmi sayfalık bir kurumsal sitede süstür ve menüyü kalabalıklaştırmaktan başka iş görmez. Hangi taraftaysanız kendi arama kayıtlarınıza bakıp karar verin.
Tarih ve kategori: silmeden önce kime yarıyor diye bakın
Her kartın altında tekrarlayan kategori etiketi gerçekten yer israfı, çünkü kullanıcı o kategorinin listesinde zaten duruyor. Tarih öyle değil. Üç yıllık bir yazıyı güncel sanıp uygulayan okuyucuda kaybedilen şey yer değil, güven. Tarihi üstveri satırında küçük puntoyla, kontrast alt sınırını bozmadan tutmak, tamamen kaldırmaktan her zaman iyidir.