Hamburger Menüye Alternatifler: Hangi Navigasyon Nerede İşe Yarar

Hamburger menü ekran alanı kazandırır, karşılığında navigasyonu görünmez yapar. Bu takas bazı arayüzlerde makul, çoğunda değil. Aşağıda menü yapılarını tek tek ele alıp hangisinin hangi koşulda çalıştığını maliyetleriyle birlikte ayırıyoruz.

Hamburgerin asıl maliyeti fazladan tıklama değil

Üç çizgili simgenin arkasına menüyü koyduğunuzda ziyaretçi bir tıklama fazla yapar. Sorun burada bitse katlanılır bir bedeldi.

Gerçek kayıp başka yerde: menü kapalıyken sitenin neler içerdiği hiç görünmez. Ziyaretçi nereye gidebileceğine dair bir harita kuramaz, dolayısıyla aradığı şeyin bu sitede bulunup bulunmadığını da tahmin edemez. Nielsen Norman Group'un mobil navigasyon testleri gizli menünün içerik keşfini düşürdüğünü yıllar önce ortaya koydu; o günden bu yana bulgunun yönü değişmedi. Masaüstünde durum daha da zayıftır, çünkü orada yatay alan bol: menüyü saklamanın teknik bir gerekçesi yoktur, sadece mobil düzenin kopyalanması vardır.

Hamburgerin savunulabildiği yer de var. Dar ekranda gerçekten derin bir yapıyı taşıyorsanız, ya da birincil eylemler alt sekme çubuğunda durup çekmece yalnızca ikincil sayfaları (ayarlar, yardım, hesap) topluyorsa menüyü saklamak doğru karardır. Ölçüt şudur: çekmeceye koyduğunuz kalemler ziyaretçinin ilk ziyarette görmesi gereken kalemler mi?

Açılır menü ve tek seviye kuralı

Açılır menünün üstünlüğü basit bir sebepten gelir: üst seviye etiketler ekranda kalır. Ziyaretçi menüyü açmadan sitenin kaç ana bölümü olduğunu görür, açılır kısım yalnızca o bölümün içini gösterir.

Bu yapıyı bozan iki şey var. Birincisi derinlik: ikinci seviyenin altına üçüncü bir seviye astığınızda, kullanıcı imlecini dar bir koridorda tutmak zorunda kalır ve menü en ufak sapmada kapanır. Üst seviyeyi genişletmek, derinleştirmekten neredeyse her zaman iyidir. İkincisi dokunmatik: hover ile açılan bir menü telefonda ilk dokunuşta hem açılmak hem bağlantıya gitmek ister, ikisi birden olmaz. Çözüm, ilk dokunuşu açma, ikinciyi gitme olarak ayırmaktır; bunu CSS ile değil, dokunmatik olayını yakalayan birkaç satırla kurarsınız.

Kapanma gecikmesi de kendi başına bir ayrıntı. İmleç menüden bir piksel çıktığı anda kapanan açılır menü kullanılmaz hale gelir, 200 ile 300 milisaniyelik bir tolerans işi çözer (bu gecikmeyi sıfırlayan arayüzleri ayar değil hata sayıyorum).

Pie menü neden demo olarak kalıyor

Dairesel menü fikri eski ve ölçülmüş bir fikir: 1988'de yapılan karşılaştırmada sekiz öğeli bir pie menü, aynı öğeleri taşıyan doğrusal menüden hızlı çıktı. Avantajın kaynağı net. Her kalem merkeze eşit uzaklıktadır ve her kalemin yönü sabittir, yani kullanıcı birkaç kullanımdan sonra okumadan, sadece yönü hatırlayarak seçim yapar.

Bu avantajın taşınabileceği yeri belirleyen de aynı geometridir. n kalem için dilim açısı 360/n derecedir: sekiz kalemde 45 derece rahat, on iki kalemde 30 dereceye iner, yirmi kalemde 18 derece kalır ve yön hafızası çöker. Etiketler de aynı duvara çarpar, çünkü dairenin çevresine yazı sığdırmak dikdörtgen bir listeye yazı sığdırmaktan zordur; Türkçe gibi uzun kelimeli bir dilde fark büyür. Üstüne klavye ile gezinme ve ekran okuyucu sırası için dairesel düzenin doğal bir karşılığı yoktur, onu ayrıca kurmanız gerekir.

Yani 1988 bulgusunu site menüsüne gerekçe yapmak kategori hatasıdır: ölçüm sabit ve küçük bir kalem kümesiyle yapıldı, site menüsü ise büyüyen bir küme. Pie menünün gerçekten işe yaradığı yer bellidir, tuval üzerinde çalışan araçlar: modelleme yazılımları, oyun arayüzleri, çizim uygulamaları. Orada el imleci zaten nesnenin üstündedir ve menüyü imlecin altında açmak mesafeyi sıfırlar.

Bant ve karusel menüler

Dönen bant mantığıyla kurulan menüler seçenekleri sırayla önünüze getirir. Bunun anlamı, kalemlerin bir kısmının her an ekran dışında olmasıdır: ziyaretçi aradığı bağlantıyı görmek için beklemek ya da kaydırmak zorunda kalır. Gizli menüde mekâna sakladığımız bilgiyi burada zamana saklıyoruz, kazanç aynı sebeple ortadan kalkıyor.

Bu yapıyı menü olarak değil, vitrin olarak düşünmek daha doğru. Öne çıkarmak istediğiniz üç kampanyayı döndürebilirsiniz; ana navigasyonu döndüremezsiniz.

Karar eşikleri

Menü bileşenini seçmeden önce üst seviye kalem sayısını sayın. Karar büyük ölçüde o sayıdan çıkar:

• Beş ya da daha az kalem: her ekran genişliğinde görünür yatay menü. Saklamaya gerek yok, dar ekranda etiketleri kısaltmak ya da ikonla desteklemek yeter.
• Altı ile sekiz arası: masaüstünde görünür menü, gerekiyorsa tek seviye açılır. Mobilde alt sekme çubuğu, çünkü başparmak orada.
• Sekizden fazla: burada sorun menü bileşeni değil, bilgi mimarisi. Bileşeni değiştirerek çözülmez; kalemleri gruplayıp üst seviyeyi kısaltmak gerekir.

Son durumda arama alanı da zorunlu hale gelir, ama aramayı menünün yerine koymayın. Arama, ne aradığını bilen ziyaretçiye hizmet eder; menü ise sitenin ne sunduğunu henüz bilmeyen ziyaretçiye. Bu ikisi birbirinin yedeği değil.