Hamburger Menü: Tanınırlık, Menünün Bulunduğu Anlamına Gelmez

Hamburger menü artık kimseye açıklanması gereken bir simge değil. Yine de tartışma bitmedi ve bitmemesinin nedeni çoğu yazıda birbirine karıştırılan iki şey: simgenin tanınır olması ile arkasındaki menünün bulunur olması aynı ölçüm değil. Tanınırlık sorunu büyük ölçüde çözüldü, gizlemenin maliyeti ise yerinde duruyor.

Tanınırlık çözüldü, gizleme çözülmedi

Hamburger menüye yönelik ilk itirazlar iki ayrı şeyi aynı torbaya koyuyordu: kullanıcı üç çizginin ne olduğunu bilmiyor, ve kullanıcı çizgilerin arkasında ne olduğunu göremiyor. Birincisi zamanla kendi kendine çözüldü. Büyük uygulamaların aynı simgeyi aynı köşede yıllarca kullanması "kategoriler burada" eşlemesini öğretti; bugün bir kullanıcı testinde simgenin ne işe yaradığını soran katılımcıya neredeyse rastlanmıyor.

İkincisi çözülmedi, çünkü çözülecek bir algı sorunu değil. Gizlenmiş bir bağlantıya ulaşmak, simge ne kadar tanıdık olursa olsun, en az bir etkileşim daha istiyor. Daha ağırı şu: var olduğunu bilmediğiniz bir sayfayı aramazsınız. Menüyü açma oranı yüzde yüz olsa bile bu maliyet yerinde durur, ki değil.

Biçim ayrıntısı sanıldığı kadar belirleyici değil

Tasarım tartışmalarının epey bir kısmı çizgi sayısına, kenarlığa, köşe yuvarlamasına gidiyor. Bu ayrıntıların tek başına kullanıcıyı yanılttığına dair ikna edici bir şey görmedim; iki çizgili ya da kutu içine alınmış bir simge de, beklenen yerde durduğu sürece menü olarak okunuyor.

Gerçek karışıklık simgelerin komşuluğundan çıkıyor. Liste, filtre ve sıralama ikonları da yatay çizgilerden oluşur. Üst barın aynı köşesinde iki tanesi yan yana durduğunda kullanıcı hangisinin menü olduğunu tahmin etmek zorunda kalır, ve genelde yanlış tahmin eder. Konumu sol üstten taşımak da benzer biçimde maliyetli, ama tek simge varsa sağ üst köşe pratikte sorun çıkarmıyor.

Düğmenin kodda karşılığı

Etiket önerisi, yani simgenin altına ya da yanına "Menü" yazmak, genelde yeni kullanıcı gerekçesiyle savunuluyor. Asıl faydası başka yerde: ekran okuyucuya bir ad veriyor ve komşu ikonlardan ayırıyor.

Erişilebilirlik tarafı birkaç satırla hallolur, buna rağmen en sık atlanan yer burası. Bir projede açılır menü tıklanabilir bir div üzerine kurulmuştu ve durumu bildiren hiçbir şey yoktu; ekran okuyucuyla gezen biri için menü hep kapalı görünüyordu.

• button elementi kullan, tıklanabilir div değil: klavye odağı ve Enter/Space davranışı hazır gelir.
• aria-expanded değerini açılıp kapandıkça güncelle, aria-controls ile menü kapsayıcısını işaret et.
• Görünür metin yoksa aria-label ver.
• Dokunma alanını simgenin çizim boyutuyla karıştırma: 24 piksellik bir ikon, dolgu eklenmediğinde WCAG 2.2'nin 24x24 CSS piksel alt sınırına yapışır ve platform kılavuzlarının istediği 44 pt ya da 48 dp'ye hiç yaklaşmaz.

Gizlemenin bedelini kim ödüyor

Hamburger menü için verilen standart tavsiye listesi hemen her yerde aynı maddeyle biter: menü öğelerine alternatif yollar sunun, sayfa içi bağlantılar koyun, arama kutusu ekleyin, altta tekrarlayın. Bu madde listenin geri kalanını çürütüyor. Gezinmeyi üç ayrı yerde yeniden kurmanız gerekiyorsa, hamburgerin kazandırdığı alanı faiziyle geri ödemişsiniz, üstelik bakım yükü de üçe katlanıyor.

Ayrımı basit tutmakta fayda var. Üst seviye öğeler yatay bir barda sığıyorsa gizlemeyin; masaüstünde beş altı başlık için hamburger kullanmak estetik bir tercihtir ve faturası kullanıcıya çıkar. Sığmıyorsa ilk iş öğe sayısını azaltmak olmalı, çünkü menü mimarisi sorununu simgenin arkasına süpürmek onu çözmüyor, sadece görünmez kılıyor. Mobilde gerçekten yer kalmadığında hamburger makul bir seçim, yeter ki en çok kullanılan iki üç işlev dışarıda kalsın.