Hamburger Menü: Ne Zaman Yer Kazandırır, Ne Zaman Yolu Uzatır
Hamburger menü, üç yatay çizginin arkasına navigasyonun tamamını saklama fikridir. Küçük ekranda yer kazandırdığı doğru. Asıl soru, o yerin neyin karşılığında kazanıldığı ve takasın her sayfada aynı şekilde işleyip işlemediği.
Simge nereden geliyor
Üç çizgili ikonu 1981'de Norm Cox, Xerox Star arayüzü için çizdi. Anlamı basitti: burada bir liste var. Simge yıllarca unutuldu, ekranlar avuç içine sığacak kadar küçülünce geri döndü. Bugün kullanıcıların büyük kısmı ikonun bir menü açtığını tanıyor, tanımayanlar için de yanına konan kısa bir "Menü" etiketi meseleyi kapatıyor. İkonu yalnız bırakıp kullanıcının tanımasını ummak, kazanılan birkaç pikselin karşılığı olmuyor.
Gizlemenin bedeli
Bir bağlantıyı menünün içine koyduğunuzda kullanıcı ona ulaşmak için önce menüyü açmak zorunda kalır. İki dokunuş, arada da panelin açılmasını bekleme. Ekranda duran bir tab bar'da aynı bağlantı tek dokunuş. Tek seferde fark edilmeyen bu fark, günde defalarca tekrarlanan bir yolda toplanır.
Ama asıl kayıp dokunuş sayısı değil. Menüyü hiç açmayan kullanıcı içeride ne olduğunu bilmez, onun için "sitede yok" ile "menüde gizli" aynı şeydir. Navigasyonu değerlendirirken sorulacak soru kaç tıkla ulaşıldığı değil, ulaşılacağının bilinip bilinmediğidir.
Sık tekrarlanan bir çelişki
Hamburger menü çoğu yerde "çok kategorili siteler için ideal" diye anlatılır, aynı yazının birkaç satır aşağısında "arkasında çok fazla seçenek olması kullanıcıyı bunaltır" yazar. İkisi birden doğru olamaz. Doğrusu şu: hamburger, kategori sayısını azaltmaz, yalnızca görünmez yapar. Otuz kategoriyle çalışıyorsanız menü açıldığında karşınızda yine otuz kategori var, üstelik bu kez ekranın tamamını kaplayan bir panelin içinde. Kalabalık bir menü, gizlendiği için sadeleşmiş sayılmaz.
Nerede kalsın
İkincil bağlantılar için hamburger iyi bir yer: hesap ayarları, kurumsal sayfalar, yardım, dil seçimi. Bunlar kullanıcının seyrek gittiği, gideceği zaman da aramaya razı olduğu yerler. Blog ve haber gibi kategori derinliği olan sitelerde de mobilde makul bir çözüm, çünkü orada ana eylem okumaktır, gezinmek değil.
Nerede kalmasın
Kullanıcının sık ve hızlı yaptığı işler menünün içine girmemeli. Bir e-ticaret projesinde sepet, arama ve hesabım üçünü de hamburger'in içinde bulmuştum; ilk iş onları dışarı çıkarmak oldu. Aynı şey bildirim, mesaj, yeni kayıt oluşturma gibi eylemler için de geçerli. Toplam üç dört bağlantısı olan bir site içinse hamburger baştan gereksiz, bağlantılar zaten üst çubuğa sığar.
Alternatifler
Tab bar
Ekranın altında sabit duran, üç ila beş ana bölümü doğrudan gösteren yatay şerit. En sık gidilen yerler için en ucuz çözüm. Sınırı da belli: beşten fazla sekme koyduğunuzda dokunma hedefleri parmağa dar gelmeye başlar.
Mega menü
Masaüstünde kategorileri ve alt başlıkları tek açılışta gösteren geniş panel. Derin hiyerarşiyi tek bakışta görünür kılar, dar ekranda karşılığı yoktur.
Aşamalı kapanan menü
Ekran daraldıkça bağlantılar sırayla "daha fazla" düğmesinin altına kayar, öncelikliler görünür kalır. Uygulaması hamburgerden zahmetli, sonucu daha dürüst: kullanıcı en azından menünün bir kısmını görür.
Uygulama tarafı
Hamburger menü göründüğü kadar ucuz bir bileşen değil. Açılan panel klavye odağını içeride tutmalı, Esc ile kapanmalı, düğmedeki aria-expanded durumu doğru güncellenmeli, panel kapalıyken içindeki bağlantılar sekme sırasına girmemeli, açıkken arka plan kaydırması durmalı. Tab bar'da bunların hiçbiri yok, düz bir bağlantı listesi ve biraz CSS. Bir menü bileşeni için üçüncü parti kütüphaneye uzanmadan önce ihtiyacınızın gerçekten açılır panel mi yoksa görünür liste mi olduğunu netleştirin, çoğu sitede cevap ikincisi çıkıyor.
Menü yerleşimini birkaç kullanıcıyla denemek de pahalı bir iş değil. Telefonu elinize alıp "iletişim sayfasını bul" demeniz yeter; kullanıcının nereye baktığı, ikonu görüp görmediği ilk on saniyede belli olur.