Mega Menü: Ne Zaman İşe Yarar, Nerede Kırılır

Mega menü tek bir panelde onlarca bağlantıyı aynı anda gösterir. Bunu yaparken hafızadaki yükü göze aktarır: kullanıcı artık bir önceki seviyeyi hatırlamak yerine geniş bir alanı taramak zorundadır. Farkı yaratan şey panelin görselliği değil, açılma davranışı ve klavyeyle çalışıp çalışmadığıdır.

Takas: hafıza yükü yerine tarama maliyeti

Klasik açılır menüde kullanıcı her seviyede seçtiğini aklında tutar. Mega menüde tutacak bir şey yoktur, çünkü hepsi ekrandadır. Bu iyi bir takas ama bedava değil. Panelde kırk sekiz bağlantı varsa ve bunlar gruplanmamışsa, kullanıcı ortalama olarak yarısını okur; gruplandığında önce grup başlıklarını, sonra tek bir grubun içini okur.

Kabaca hesabı şu: n bağlantıyı k gruba bölersen tarama maliyeti k + n/k civarında kalır ve bu ifade k, n’in kareköküne yaklaştığında en küçük değerini alır. Kırk sekiz bağlantı için yedi civarı grup, on dört okuma demektir. Üç dev sütuna bölmek ise on dokuz, on beş gruba parçalamak yirmi civarı okumaya çıkar. Yani grup sayısında hem az hem çok yanlıştır ve doğru yer ortadadır.

Bu hesabın gerçek işlevi, panelin büyüklüğüne bakıp “nasılsa hepsi görünüyor” demeyi engellemek. Görünmek ile bulunmak aynı şey değil.

Hover’ın maliyeti: köşegen sorunu

Fare üst seviyedeki bir başlıktan panele doğru köşegen giderken yoldaki komşu başlıkların üzerinden geçer. Naif bir uygulama bunu niyet sanır, açık paneli kapatır ve yenisini açar. Kullanıcı hedefe varamadan menü değişmiştir.

Çözüm gecikmeyi büyütmek değil, yönü okumaktır: imleç ile panelin yakın köşeleri arasında bir üçgen kur, hareket bu üçgenin içinde kaldığı sürece açık paneli koru. Amazon’un menüsüyle yaygınlaşan yaklaşım budur ve otuz satırlık bir olay dinleyicisiyle yazılır. Açılma gecikmesi de işe yarar, ama asıl önemli olan kapanma gecikmesidir; yanlışlıkla açılan menü rahatsız eder, elde patlayan menü işi bitirtmez.

Hover’la açılan menüyü tıklamayla açılandan daha kırılgan bulurum. Tıklama tek bir niyet üretir, dokunmatik ekranda da aynı kodla çalışır, klavye tarafında zaten fazladan bir şey gerekmez. Hover’ı ancak masaüstü trafiği baskın ve menü sığ ise savunurum.

Gruplama ve etiketler

Grup başlıkları kategori değil, kullanıcının aradığı şeyin adı olmalı. Bilgiyi taşıyan kelime başa gelir: “Fiyatlandırma” iyi, “Bizimle Çalışın” kötü. Aynı bağlantıyı iki grupta tekrarlamak taramayı bozar, çünkü kullanıcı ikinci karşılaşmada farklı bir sayfa sanır.

Panelin içine arama kutusu koyma. Arama sayfanın sabit bir yerinde durur; menünün içine girdiğinde hem klavye odağını karıştırır hem de kullanıcıyı menüyü açık tutmaya mahkûm eder.

Klavye ve ekran okuyucu

Üst seviye öğe hem bağlantı hem tetikleyici olmalı. Yani “Ürünler” başlığı kendi başına gidilebilir bir sayfaya işaret etsin; panel açılamadığında da site gezilebilir kalır. Bu tek karar, erişilebilirlik tarafındaki sorunların çoğunu baştan kapatır.

• Tetikleyicide aria-expanded durumu güncellensin, panel açıldığında odak sırası panele geçsin.
• Esc paneli kapatsın ve odağı tetikleyiciye geri versin.
• Panel içinde odak hapsi kurma; kullanıcı Tab ile menüden çıkabilmeli.
• Grup sınırları düşük kontrastlı ince çizgiye bırakılmasın, panelin kendi sınırı arka plandan net ayrılsın.

Bunlar test edilebilir maddeler. Klavyeyi eline al, fareye dokunmadan menüdeki her bağlantıya git ve geri dön. Bu yolculuk tamamlanmıyorsa menü tasarımı bitmemiştir.

Mobilde mega menü yoktur

Küçük ekranda geniş panel diye bir şey kurulamaz. Mega menüyü mobilde sıkıştırmaya çalışmak, dokunma hedeflerini küçültür ve iki katmanlı akordeona döner. Mobilde ayrı bir gezinme kurgusu yapılır: sık kullanılan az sayıda bağlantı sabit bir çubukta, geri kalanı tam ekran açılan basit bir listede. Aynı bilgi mimarisi, farklı arayüz.