Navigasyon Menüsünde Hizalama: Dikey Liste ile Yatay Menü Aynı Sorun Değil

Menü hizalaması tartışması çoğu zaman tek soruya iniyor: sola mı, sağa mı? Oysa yan menüdeki dikey liste ile üstteki yatay çubuk farklı iki problem ve cevapları da aynı değil. Dikey listede satır başlarının aynı noktada durması tarama hızını doğrudan belirler; yatay menüde mesele blokun sayfadaki yeri, metnin hizası değil.

Dikey listede satır başı sabit kalır

Yan menü, açılır liste ve mobil çekmece dikey listedir. Göz her satırda aynı x koordinatına döner, oradan sağa birkaç kelime okur, bir sonrakine geçer. Sağa hizaladığınızda satır başları öğe uzunlukları kadar dağılır: "Blog" ile "Kurumsal İletişim ve Basın" aynı listede alt alta geldiğinde başlangıç noktaları arasında yüz pikselden fazla fark oluşur ve göz her satırda metnin nerede başladığını yeniden arar.

Bazı sağa hizalı menülerin sorunsuz görünmesinin sebebi de bu. Öğe adları birbirine yakın uzunluktaysa dağılma küçük kalır. Menüye üç kelimelik bir başlık eklendiği gün ortaya çıkar. Hizalamayı bugünkü öğe adlarının uzunluğuna göre seçmek, yarın değişecek bir veriye bahse girmek demek.

Menü yazılarında sık anılan F deseni ise metin yoğun içerik sayfalarına ait bir bulgu (NN/g'nin göz izleme çalışmaları). Altı öğelik bir menü F çizecek kadar uzun değil. Burada işleyen mekanizma daha basit: sabit başlangıç noktası ve kısa göz sıçramaları.

Yatay menüde soru hizalama değil, konum

Üstteki çubukta öğeler yan yana durur ve her biri kendi içeriği kadar yer kaplar. Böyle bir yapıda li üzerine text-align: right yazmanın görünür etkisi olmaz, çünkü kutu zaten metnin genişliğinde. Çubuğu sağa yaslamam gerektiğinde bunu kapsayıcıda justify-content: flex-end ile çözerim, öğelerin metin hizasına hiç dokunmadan. İki ayrı problem aynı isimle anıldığı için karışıyor.

Yatay menüde asıl karar öğe sayısı. Sekiz başlıktan sonra çubuk dar ekranda taşar ve tasarımcı genelde yazıyı küçülterek ya da harf aralığını kısarak yer açar. İkisi de okunabilirliği menünün hizasından çok daha fazla düşürür.

Okunabilirliği asıl düşürenler

• Tamamı büyük harf başlıklar. Kelimenin iniş çıkış yapan harfleri kaybolur, hepsi aynı yükseklikte bir dikdörtgene döner, göz kelimeyi siluetinden tanıyamaz.
• Aynı kelimeyle başlayan öğeler. "Ürün Yönetimi", "Ürün Destek", "Ürün Fiyatlandırma" alt alta geldiğinde sabit başlangıç noktasının kazandırdığı ne varsa geri verilir; ayırt edici kelime üçüncü sıraya düşer.
• Yalnızca durağan hal için ölçülmüş kontrast. Menü metni eşiği geçerken :hover ve :focus renklerinin geçmediği tasarım çok yaygın. Klavyeyle gezen kullanıcı tam da o durumu görür.

Açılır menü ve dokunmatik

Tek seviye açılır menüde kalın. İkinci seviyeden sonrası hover zinciri gerektirir, dokunmatik ekranda hover diye bir şey olmadığı için o zincir ilk dokunuşta kopar. Derin yapıya gerçekten ihtiyaç varsa menüye değil, ayrı bir kategori sayfasına taşıyın.

Mobil çekmecede tıklanabilir alan metin değil satırın tamamı olsun; 44 pikselik dokunma hedefi satır yüksekliğinden gelir. Hizalama da masaüstüyle aynı kalsın. Masaüstünde sola hizalı olup mobilde ortalanan menü, kullanıcıya iki farklı ürün gibi görünür.