Global Navigasyon: Her Sayfada Duran Menüyü Doğru Kurmak
Global navigasyon, sitenin her sayfasında aynı yerde duran ve ana bölümlere çıkan menüdür. Teknik tarafı birkaç satır HTML olduğu için kolay görünür; asıl zor olan hangi başlığın menüye gireceğine karar vermektir. Menüdeki başlık sayısı, etiketlerin netliği ve menünün dokunmatik ekranda nasıl davrandığı, sitenin geri kalanına harcanan emeğin çoğundan daha fazla iş görür.
Menü iki iş yapar, çoğu site birini atlar
Birincisi nereye gidilebileceğini göstermek. İkincisi kullanıcının şu an nerede olduğunu söylemek. Birinci işi hemen herkes yapıyor, ikincisi çoğu sitede eksik ya da yarım. Oysa bir sayfaya arama sonucundan giren ziyaretçi ana sayfayı hiç görmemiştir; menüdeki hangi başlığın altında olduğunu ona söylemezseniz, siteyi gezmeye baştan başlar.
Başlık sayısı için sihirli bir sayı yok
"En fazla on iki başlık" gibi tavsiyeler yaygın ama sayının kendisi hiçbir şey ölçmez. Sınırı belirleyen iki şey var: başlıkların tek satıra sığması ve kullanıcının aradığı şeyi hangi başlığın altında bulacağını duraksamadan seçebilmesi. Beş bulanık etiket, on iki net etiketten daha çok yorar.
Sayı sınırını koyarken şunu da hesaba katın. Üst seviyeyi on iki başlıkla, açılır menüyü de tek seviyeyle sınırlarsanız, her başlığın altına sekiz bağlantı sığdırsanız bile menüden doğrudan ulaşılabilen sayfa sayısı yüz civarında kalır. Beş yüz sayfalık bir sitede bu, içeriğin beşte biri demektir. Geri kalanı arama, kategori sayfaları ve metin içi bağlantılarla bulunur. Bu kötü bir durum değil, ama farkında olunarak verilmiş bir karar olmalı: menü bir dizin değildir, sitenin en çok kullanılan yollarının kısayoludur.
Açılır menüler dokunmatikte ikinci bir davranış ister
Fare imleci telefonda yok. Bir başlık hem bağlantıysa hem de üzerine gelince alt menüyü açıyorsa, dokunmatik ekranda ilk dokunuş çoğu zaman doğrudan sayfayı açar ve kullanıcı alt başlıkları hiç görmez. İki çözüm var. Ana başlığı bağlantı olmaktan çıkarıp sadece açıcı düğme yapabilirsiniz, ya da başlık bağlantı kalır ve açılır menünün ilk maddesine "Hizmetlere genel bakış" gibi ayrı bir giriş koyarsınız.
İkincisi daha iyi çalışıyor. Çünkü masaüstünde alışkanlık haline gelmiş "başlığa tıkla, bölüme git" davranışını bozmaz, telefonda da alt başlıkları erişilebilir bırakır. Tek maliyeti, listede bir satır fazladan yer kaplaması.
Aktif başlığı yalnızca renkle işaretlemeyin
Seçili menü öğesini vurgulamanın en yaygın yolu rengini değiştirmek. Tek başına yeterli değil. WCAG'nin renk kullanımı ölçütü, bir bilginin sadece renkle aktarılmamasını ister; renk körlüğü olan kullanıcı için o vurgu yok hükmündedir. Kalın yazı, alt çizgi ya da başlığın altına ince bir çubuk eklemek sorunu kapatır.
Ekran okuyucu tarafında karşılığı da var: aktif bağlantıya aria-current="page" ekleyin. Tek özniteliklik bir iş, en sık atlananlardan biri.
Etiketler şirketin değil, kullanıcının diliyle yazılır
"Çözümler", "Keşfet", "Ekosistem" gibi başlıklar toplantı odasında iyi durur, menüde hiçbir şey söylemez. Kullanıcı ne arıyorsa onun kelimesini kullanın: fiyat sayfasının adı "Fiyatlar" olsun.
Bunun bir de yan faydası var. Menü bağlantı metinleri sitenin her sayfasında tekrarlandığı için, sitedeki en çok tekrar eden iç bağlantı metni onlardır. Arama motoru bir sayfanın ne hakkında olduğunu tahmin ederken bu metne bakar. Yani menü etiketlerini netleştirmek, ayrıca SEO işi yapmayı gerektirmeden aynı sonucu verir.
Küçük ama pazarlıksız olanlar
- Logo ana sayfaya bağlanır. Kullanıcılar bunu deneyerek öğrenmiş durumda, bağlantı yoksa kayboluyorlar.
- Menü her sayfada aynı noktada durur. Bir bölümde sola, diğerinde ortaya kayan menü, kullanıcıyı her sayfada yeniden aramaya zorlar.
- İki başlık aynı işi görüyorsa birleştirin. "Destek" ve "Yardım" ayrı ayrı durduğunda kullanıcı hangisine gireceğini tahmin etmek zorunda kalır, yanlış tahmin ederse geri döner.
Bir menüyü test etmenin en ucuz yolu, siteyi hiç görmemiş birine bir görev vermek: "iade koşullarını bul". Nereye tıkladığına ve nerede durakladığına bakın. Beş kişide üç kez aynı yerde durduluyorsa sorun etikette, sizin hafızanızda değil.