Sol Dikey Navigasyon: Ne Zaman Doğru Seçim, Ne Zaman Değil
Sol dikey menü, yatay menünün çözemediği bir işi çözer: onlarca kategoriyi tek bakışta taranabilir bir liste halinde ekranda tutar. Bu avantajın bir tavanı var ve tavan çoğu kişinin sandığından alçak, çünkü listeyi sınırlayan şey kategori sayınız değil ekran yüksekliğiniz.
Dikey liste neden hızlı taranıyor
Yatay menüde bir alt kategoriye ulaşmak üç ayrı iş gerektirir: doğru üst başlığın üzerine gelmek, açılır panelin gelmesini beklemek, sonra imleci panelden kaçırmadan hedefe nişan almak. Sidebar'da bu işlerin hiçbiri yok. Başlıklar soldan hizalı olduğu için göz tek bir eksende aşağı iner ve hedef zaten ekranda durur.
Fark, kategori adları birbirine benzediğinde büyüyor. "Kurumsal Çözümler" ile "Kurumsal Hizmetler" arasında seçim yapan biri ikisini yan yana görmek ister, sırayla hover ederek hatırlamak istemez.
Peki sınır nerede? Bir hesap yapalım
Menü satırı tipik olarak 36-44 piksel yüksekliğinde. 900 piksellik bir tarayıcı penceresinde logo ve arama alanına 120 piksel gittikten sonra elinizde 780 piksel kalıyor: yaklaşık 18-20 satır. Yirmi birinci kategoriden sonra menü katlanıyor, yani kaydırma gerektiriyor.
Kaydırma gerektiren bir sidebar öğesi, bir tık arkasındaki öğeden daha bulunabilir değil. "Uzun menülerde önemsiz öğeleri alta koyun" tavsiyesi tam olarak bunu itiraf ediyor: sıralamayı önem sırasına göre yapmak zorunda kaldıysanız, "her şey tek bakışta görünür" avantajı çoktan bitmiştir.
Sidebar örneği olarak sürekli anılan Slack ve Gmail'e bu gözle bakın. İkisinin de kenar çubuğunda on beş civarı öğe var, altmış kategori değil. Altmış kategorili bir e-ticaret sitesinde doğru cevap düz bir sidebar değil, iki kademeli bir yapı: solda yedi sekiz üst kategori, seçilen kategorinin altında açılan alt liste.
Sidebar'ın kirası: yatay alan
Dikey menü bedava değil, genişliğiyle ödeme yapıyor. 240 piksellik bir sidebar 1366 piksel genişliğinde bir ekranın yüzde on sekizini kalıcı olarak alıyor, 1024 piksellik bir tablette bu oran yüzde yirmi üçe çıkıyor. Bu alan içerikten kesiliyor.
Sidebar'ı sabitlemek için içerik kolonunu 700 pikselin altına düşürmem. Geniş tablosu, kod bloğu ya da yan yana karşılaştırması olan bir sayfada bu takas net kayıptır: menü kazanır, okunan şey kaybeder. Böyle sayfalarda menüyü daraltılabilir yapmak, kaydırıldığında gizlemekten daha iyi çalışıyor.
Etiketler ve ikon meselesi
İki şey gerçekten fark yaratıyor. Birincisi, ayırt edici kelimeyi başa almak: "Aylık Raporlar" ile "Yıllık Raporlar" arasında göz ilk kelimeyi okuyup karar verebilir, "Raporlar (Aylık)" ile "Raporlar (Yıllık)" arasında ikinci kelimeye kadar okumak zorunda kalır.
İkincisi, sadece ikondan oluşan ince bir rail kurmamak. İkonun anlamı tooltip ile açıklanıyorsa menü hover'a bağımlı hale gelir, dokunmatik ekranda hover diye bir şey yok. Kullanıcı ikona basmadan ne olduğunu öğrenemiyorsa menü keşfedilebilir değil, tahmin oyunudur.
Mobilde ne oluyor
Dikey menü mobile doğrudan taşınmıyor, dönüştürülüyor. Yirmi öğeli bir sidebar alt sabit bara sığmaz; alt barda dört, en fazla beş hedef vardır ve hangilerinin oraya gireceğine analytics bakarak karar verilir, menü sırasına bakarak değil.
Geri kalanı hamburger menünün altına girer ve bu bir kayıptır, ama kabul edilebilir bir kayıp. Peki ya en çok tıklanan üç sayfa oradaysa? O zaman sorun menü tipinde değil, bilgi mimarisinde: o üç sayfa kategori değil, ana eylemdir ve ekranda kendi yerini hak eder.
SEO tarafındaki abartı
Sidebar'ı SEO yatırımı olarak satmam. Sitenin her sayfasında birebir aynı olan bir link bloğu, arama motoruna hiçbir sayfa hakkında ayırt edici bir sinyal vermez; şablon parçası olarak görülür ve öyle değerlendirilir.
Sidebar'ın gerçek katkısı daha mütevazı ve yine de değerli: derin kategorilere tarayıcının ulaşabileceği bir yol açar, böylece hiçbir sayfa yalnızca site haritasına bağlı kalmaz. Sıralama etkisi buradan gelmiyor. Menü içine anahtar kelime doldurmak da işe yaramıyor, sadece etiketleri uzatıp tarama hızını düşürüyor.
Karar
Kategori sayınız yirminin altındaysa ve bunlar birbirine benzer isimler taşıyorsa sol dikey menü açık ara en iyi seçim. Yirminin üstüne çıktığınızda kararınız artık "sidebar mı, yatay mı" değil, "bu yirmi başlığı hangi kademeye indireceğim". Bu soruyu atlayıp listeyi uzatmak, menüyü kaydırılan bir dizine çeviriyor ve dikey navigasyonun tek gerçek avantajını harcıyor.