Mobil Menüde Metin Liste mi, Görsel Grid mi?

Mobil menü tasarımında soru genelde şöyle kurulur: kategoriler düz bir metin listesi olarak mı verilmeli, yoksa küçük görsellerden oluşan bir grid olarak mı? Zevk meselesi gibi durur, oysa ekranda görünen seçenek sayısı, indirilen bayt ve dokunma hedefinin boyutu ölçülebilir şeyler. Bu üçünü ayrı ayrı hesaplayınca hangi menünün nerede işe yaradığı kendiliğinden çıkıyor.

Önce ekran alanı: kaç seçenek görünüyor?

Bir menü satırının yüksekliği, dokunma hedefi için önerilen alt sınırla belirlenir: 44 ila 48 piksel. 390 piksel genişliğinde tipik bir telefonda, tarayıcı çubukları düştükten sonra menüye kalan dikey alan kabaca 600 piksel. Yani düz bir metin listesinde tek ekranda 12 civarı seçenek görünür.

Aynı alanı iki sütunlu bir gridle doldurun. Sütun genişliği 180 piksel, görsel kare, altında etiket ve aradaki boşluk: hücre yüksekliği 210 pikseli buluyor. 600 bölü 210, üç sıra bile etmiyor; ekranda 6 seçenek kalıyor. Grid, görünür seçenek sayısını yarıya indiriyor. Bunun bedeli kaydırmadır, ve kaydırma menüde kaybolmanın en sık nedeni.

Metin liste hızlı taranır

Kullanıcı bir kelime listesini okumaz, tarar. Aradığı sözcüğe benzeyen bir şey görünce durur; kalan seçeneklere bakmaz bile. Bu davranış listeyi verimli kılan şeydir, ama bir şartı var: sık kullanılan kategoriler üstte olmalı. Alfabetik sıralama insana düzenli görünür, kullanıcıya rastgele.

Alt kategoriler kısa ise akordeon iyi çalışır, çünkü hiyerarşinin ikinci katmanını ayrı bir sayfa açmadan gösterir. Derinlik üç katmanı geçiyorsa akordeon karışır, orada ayrı sayfa daha dürüst bir çözüm.

Grid, sözcüğün ayırt etmediği yerde

Görselin menüye katkısı tek bir soruya bağlı: resmi kaldırınca bilgi kayboluyor mu? Halı desenleri, renk varyantları, birbirine benzeyen ürün modelleri için cevap evet. "Hesabım", "Kargo Takip", "İletişim" gibi maddelerin yanına konan jenerik ikonlar için cevap hayır; o ikonlar bilgi taşımaz, yer ve bayt harcar.

Bayt tarafı çabuk büyüyor. 24 kategorilik bir grid menüde her küçük görsel WebP olarak 15 KB gelse, sırf menü için 360 KB indirilir. Görseller ekran dışındaysa tembel yükleme bunu erteler, ama ertelemek silmek değil; kullanıcı kaydırdığı anda fatura geri gelir.

Bir e-ticaret projesinde kategori gridinin hücrelerine sabit en boy oranı vermeyi atlamıştık, görseller tek tek indikçe menü aşağı kayıyor ve kullanıcı dokunmak istediğinden başka bir kategoriye basıyordu.

Dokunma alanı ve ekran okuyucu

Grid için sık tekrarlanan "geniş dokunma alanı sağlar" iddiası koşullu doğru. Hücre büyükse doğru, ama aynı ekrana daha çok seçenek sığdırmak için hücreler küçültüldüğünde grid metin listesinden daha kötü bir hedef hâline gelir. Küçülen ikon hem okunmaz hem ıskalanır.

İki pratik nokta:

• Metin listesinde bağlantı sadece kelimeyi değil satırın tamamını kaplamalı. Kelimeye sarılmış bir a etiketi, satırın sağ yarısına yapılan dokunuşu boşa çıkarır.
• Görselin altında etiket yoksa alt metni zorunludur. Boş bırakılan alt, ekran okuyucuda dosya adının harf harf okunmasına dönüşür.

Hangisi, nerede

Ana kategori düzeyinde metin liste kullanın. Burada seçenek sayısı fazladır, isimler birbirinden yeterince farklıdır ve amaç hızlı taramadır. Görsel gride alt kategori ve ürün listesi düzeyinde geçin, orada görsel gerçekten karar verdiren bilgiyi taşır.

Emin olamadığınız menüde şu testi uygulayın: görselleri kapatın ve seçenekleri sadece etiketlerle okuyun. Hâlâ doğru kategoriyi seçebiliyorsanız o görseller dekorasyondur, listeye geçin.