Mega Menü Kullanılabilirliği: Menüyü Bozan Dört Karar

Bir mega menü işe yaramadığında suç genelde "çok fazla seçenek"e kesilir. Oysa aynı yetmiş bağlantı, doğru gruplanmış ve klavyeyle gezilebilen bir menüde sorunsuz çalışır. Menüyü bozan şey sayı değil, açılma, gruplama, odak ve ölçüm kararları; dördünden biri yanlışsa menü tek başına çalışmaz hale geliyor.

Kaç bağlantı gerçekten taranabilir?

Altı sütun, her sütunda on iki satır: menü açıldığı anda ekranda yetmiş iki etiket var. Kullanıcı hangi sütuna bakacağını biliyorsa bu bir sorun değil, gözü doğrudan oraya gider. Bilmiyorsa hepsini okumak zorunda, çünkü tarama paralel değil sıralı çalışıyor.

Mega menü anlatılarının çoğunda birbirini yiyen iki tavsiye yan yana durur: "tek menüde çok seçenek göster" ve "menüyü sade tut". Aynı cümlede durabilirler, aynı tasarımda duramazlar. Sınırı tahminle değil kendi tıklama verinle koyarsın: menüdeki bağlantıların büyük kısmı hiç tıklanmıyorsa, orada durmalarının tek ölçülebilir etkisi tıklananları bulmayı yavaşlatmaktır.

Bir de görünmeyen tarafı var. Mega menünün işaretlemesi her sayfada, her istekte gönderilir; ekran okuyucu kullanıcısı da ana içeriğe geçmek için o yetmiş iki bağlantının üstünden atlamak ister. "İçeriğe geç" bağlantısının neden bu kadar sık mega menülü sitelerde karşımıza çıktığı buradan anlaşılıyor.

Menü ne zaman açılır, ne zaman kapanır

Gecikmesiz hover ile açılan menü, imleç sadece üzerinden geçerken de açılır. Kullanıcı sağ üstteki sepete giderken yolu boyunca üç panel birden açılıp kapanır, sayfa titrer.

Daha sinir bozucu olan kapanma tarafı. Kullanıcı üst menüdeki başlıktan panelin alt sıralarındaki bir bağlantıya köşegen bir çizgi üzerinde gider; o çizgi tetikleyici öğenin kutusundan çıkar, mouseleave tetiklenir ve panel kullanıcı hedefe varmadan kapanır. Suçlu kullanıcı değil, imlecin hiç düz gitmediğini varsaymayan bir geometri.

Açılmaya 150-300 ms civarı bir eşik, kapanmaya benzer bir tolerans koymak bu iki sorunu birlikte çözüyor. Tetikleyici ile panel arasında geçişi tolere eden bir alan bırakmak da aynı işi görür.

Bu işi yalnızca CSS :hover'a bağlamam. Gecikmeyi ayarlayamazsın, dokunmatikte ilk dokunuş menüyü açarken bağlantıyı da tetikler, klavye odağı hiç devreye girmez.

Alt başlıklar gerçek kategori mi?

Panel içindeki başlıklar iki işten birini yapar: ya kullanıcının zihnindeki ayrımı karşılar, ya da sütunları eşitlemek için uydurulmuştur. "Popüler", "Diğer", "Öne Çıkanlar" genelde ikincisidir. Bir başlığın altındaki bağlantıları kapatıp sadece başlığı gösterdiğinde kullanıcı ne bulacağını tahmin edemiyorsa, o başlık yer kaplamaktan başka bir şey yapmıyor.

Sıralamada alfabetik düzen tek bir durumda doğru: kullanıcı aradığı etiketin tam adını zaten biliyorsa. İl listesi, marka listesi, ülke listesi böyledir. Gerisinde alfabetik sıra, sık kullanılan üç bağlantıyı listenin ortasına dağıtmaktan başka bir şey yapmaz; orada sıklık ya da iş akışı sırası kazanır.

Klavyede bu bir menü mü, açılır bölüm mü?

Burası en sık yanlış kurulan yer. Bağlantılardan oluşan bir site gezinimine role="menu" ve role="menuitem" verildiğinde ekran okuyucu bunu uygulama menüsü olarak duyurur ve kullanıcı ok tuşlarıyla gezmeyi, Tab ile menüden çıkmayı bekler. Çoğu mega menü bu beklentiyi karşılamaz, çünkü aslında bir menü değil, açılıp kapanan bir gezinim bölümüdür.

Doğru kurulum daha sade: tetikleyici bir button olur, aria-expanded ile durumunu söyler, Esc paneli kapatıp odağı tetikleyiciye geri verir, panel odakla da açılır, yalnızca hover'la değil. W3C'nin disclosure deseni bu yapıyı örnekleriyle veriyor ve mega menü için menubar deseninden daha uygun bir temel.

Menünün çalıştığını nasıl görürsün

Tıklama sayısı tek başına yanıltıcı, çünkü menü açılmasını saymak menünün işe yaradığını göstermiyor. Daha anlamlı iki sinyal var: panel açılıp hiçbir bağlantıya tıklanmadan kapanma oranı, ve menüyü açtıktan sonra aramaya dönen kullanıcıların payı. İkincisi yükseliyorsa menü kullanıcıya aradığını gösteremiyor ve gruplama sorunu var.

Peki sıralamayı A/B testine sokmak? Mantıklı, ama sırası var. Kapanma hatası duran bir menüde ölçtüğün şey sıralama değil, kullanıcının panele yetişip yetişemediği olur. Geometriyi düzelt, sonra sırayı tartış.