Mobil Menü Tasarımının 7 Altın Kuralı

Mobil menü tasarımı, masaüstü menü tasarımının küçültülmüş hali değildir. Telefonun küçük ekranı, çoğu kez yavaş veri bağlantısı ve tek elle kullanım gibi farklı kısıtlar getirir. Bu yazıda mobil menü tasarımının 7 altın kuralını — restoranın sipariş başına ortalama tutarını ve müşteri memnuniyetini doğrudan etkileyen kuralları — somut detaylarla anlatıyoruz.

1. Font 16 piksel altına düşmesin

Telefon ekranında okunaklı minimum font boyutu 16 piksel — ya da CSS biriminde 1 rem. Daha küçük font, kullanıcının "zoom" yapmasına yol açar; bu da kategori başlıklarının kayması, yanlış ürüne dokunma gibi sorunları doğurur. Vücut metni 16-18 px, ürün adı 18-22 px, kategori başlığı 22-28 px iyi bir hiyerarşi sunar.

İkincil bilgi (alerjen, kalori) için 14 px kabul edilebilir ama bu durumda kontrastı yüksek tutun. Açık gri üstüne biraz daha açık gri tasarım hatası — açık zeminde koyu gri tercih edin.

2. Dokunma hedefi minimum 44 × 44 piksel

Apple'ın HIG'i ve Google Material Design'ın ikisi de minimum 44 × 44 piksel dokunma hedefi önerir. Bu sadece düğmeler için değil; ürün kartları, kategori sekmeleri, fiyat etiketleri için de geçerli. Daha küçük hedefler "yanlış dokunma" oranını %15-23 artırır.

Kategori sekmeleri yatay scroll'da olduğunda iki sekme arasına en az 8 piksel boşluk koyun. Bitişik sekmeler birinin yerine diğerine dokunmaya yol açar.

3. Görsel hiyerarşiyi z-pattern değil F-pattern üzerinden kur

Mobil okuma yatay değil dikeydir; kullanıcı yukarıdan aşağıya tarar. Önerilen ürünleri en üste koyun, kategori menüsünü sticky yapın (ekranı kaydırırken üstte kalsın). Müşteri 5 saniye içinde menü mantığını çözmezse büyük olasılıkla geri çıkar.

Ürün listesini "uçtan uca" göstermeyin. Önce 6-8 ürün gösterin, "Daha fazla göster" butonu ekleyin. Sayfa uzunluğu psikolojik olarak boğucu olabilir.

4. Görseller WebP/AVIF ve lazy load

Fotoğraflar menünün en güçlü pazarlama aracıdır ama yanlış kurulduğunda en büyük performans sorunudur. WebP formatı PNG'ye göre %30, JPG'ye göre %25-35 küçüktür; AVIF ise WebP'den de %15-20 küçüktür. Yüksek modern tarayıcılar bu iki formatı destekler.

Lazy load şart: kullanıcı kategoriyi açana kadar oradaki görseller indirilmemeli. "Background image" değil "img loading=lazy" kullanın — tarayıcı native desteğine bırakın.

5. 3 saniye kuralı: ilk yüklenme

Mobil menünün ilk faydalı yükleme (LCP - Largest Contentful Paint) 3 saniyenin altında olmalı. 3-5 sn arası kabul edilebilir, 5+ sn kullanıcı kaybı demektir. Bunun için: ana sayfa görsellerini WebP/AVIF kullanın, font yüklemesini async yapın, JavaScript bundle'ını 150 KB altına çekin.

Kafe ortamlarındaki Wi-Fi her zaman güvenilir değildir. 3G hız emülasyonunda test edin — kullanıcının deneyimi orada belirlenir.

6. Renk paleti maksimum 4-5 renk

Çok renk = bilişsel yük. Markanın ana rengi + 1 ikincil + 1 vurgu + 2 nötr (siyah, beyaz) yeterli. Yüksek hijyen hissi için açık zemin tercih edilir; karanlık tema isteyenler için de OLED ekranda mat siyah arka plan göz yormaz.

Allerjen ikonları renkle değil hem renk hem ikonla işaretlensin — renk körü kullanıcılar için (yaklaşık her 12 erkekten 1'i).

7. Tek el ile kullanılabilirlik testi

Telefonu sol ve sağ elinizle, başparmakla kullanarak menüyü gezin. Sepet butonu üst köşede mi? Başparmağa uzak. Önemli aksiyonları alt yarıya koyun — ekranın "thumb zone" kuralıdır.

thMenu gibi mobil-öncelikli platformlar bu kuralları varsayılan ayar yapar; ancak tema/özel CSS yazıyorsanız bizzat doğrulayın. Doğru kurulmuş mobil menü siparişi %12-18 artırabilir; yanlış kurulan menü, müşteriyi garsona yönlendirir ve dijitalden beklenen verim kaybolur.

Faydalı buldunuz mu? Paylaşın.