You-Are-Here Navigasyon: Konum Göstergelerini Doğru Kurmak
Ziyaretçilerin çoğu sitenize ana sayfadan girmez. Arama sonucundan, paylaşılmış bir bağlantıdan ya da bültenden doğrudan bir iç sayfaya düşer. O sayfa tek başına "buradasınız" diyemiyorsa kullanıcı bilgi mimarisinin neresinde olduğunu bilmez. You-are-here navigasyon tam olarak budur: her sayfanın konumunu kendi başına anlatması, ve bunu breadcrumb, menü vurgusu, başlık ve URL üzerinden yapması.
Hangi gösterge gerçekten güvenilir
Breadcrumb'ı menü vurgusundan daha güvenilir bulurum. Sebep tasarım değil, göstergenin nereden üretildiği. Breadcrumb içeriğin kendi hiyerarşisinden gelir: kayıt hangi kategorinin altındaysa zincir odur, sayfa doğru render olduysa breadcrumb da doğrudur. Menü vurgusu ise şablonda elle eşleştirilir ve orada sessizce bozulur.
En sık gördüğüm kırılma, aktif menü maddesinin URL öneki karşılaştırmasıyla bulunması. /blog ile başlayan her adresi işaretleyen bir kontrol, /blog-arsivi sayfasında da o maddeyi yakar; iki menü maddesi aynı anda aktif görünür. Ters yönü de var: üç seviye derindeki bir yazıda eşleşme tutmaz ve menüde hiçbir şey vurgulanmaz. Kullanıcı bunu hata olarak okumaz, "demek buraya ait değilim" diye okur. Segment bazlı karşılaştırma yap, önek karşılaştırması yapma.
Breadcrumb çok ebeveynli içerikte kırılır
Bir ürün hem "Mutfak" hem "Hediyelik" kategorisinde olabilir. Bu durumda breadcrumb'ı kullanıcının geldiği yola göre üretmek cazip gelir, kullanıcı Mutfak'tan geldiyse zincir Mutfak olsun denir. Bunu yapmayın. Aynı URL her ziyarette farklı bir zincirle render olur, önbellek katmanı hangisini saklayacağını bilemez ve sayfaya gömdüğünüz BreadcrumbList yapısal verisi kanonik hiyerarşiyle çelişir.
Doğrusu, her kayda tek bir kanonik ebeveyn atamak ve breadcrumb'ı yalnızca ondan üretmektir. Kullanıcının geldiği yolu göstermek istiyorsanız bunu ayrı bir öğeyle yapın, mesela listenin üstündeki "Mutfak listesine dön" bağlantısıyla. Konum göstergesiyle geçmiş göstergesi aynı şey değil, ikisini tek bileşene yükleyince ikisi de güvenilmez hale gelir.
Renk tek başına konum bildirmez
Aktif menü maddesini yalnızca renkle işaretleyen tasarımlar yaygın, ama renk ayrımı zayıf olan kullanıcıda, yüksek kontrast modunda ya da bastırılmış sayfada bu işaret tamamen kaybolur. WCAG bunu ayrı bir başlık altında ele alıyor: bilgi tek başına renkle aktarılmamalı. Renge kalınlık, alt çizgi ya da sol kenar çizgisi gibi ikinci bir sinyal ekleyin.
Ekran okuyucu tarafını da unutmayın: aktif bağlantıya aria-current="page" koymadığınızda görsel vurgu ne kadar güçlü olursa olsun sesli okumada hiçbir karşılığı yok. Tek bir öznitelik, ve çoğu şablonda hiç yazılmamış.
Göstergeleri test etmenin en kısa yolu
Kullanıcıyı ana sayfaya değil, rastgele bir iç sayfaya bırakın ve üç şey sorun: şu an bu sitenin neresindesiniz, bunu nereden anladınız, bir üst seviyeye nasıl çıkarsınız. İlk soruya yanlış cevap geliyorsa göstergeniz vardır ama görünmüyordur. İkinci soruya cevap veremiyorsa gösterge fark ediliyor ama okunmuyordur.
Site sahipleri bu testte genelde kendi sitelerini fazla iyimser değerlendirir, çünkü yapıyı zaten ezbere bilirler ve en soluk ipucunu bile yeterli sanırlar. Sizin için bariz olan gri ince yazı, ilk kez gelen ziyaretçi için sayfa gürültüsüdür.
Arama sonuçlarına yansıyan kısım
Breadcrumb'ın bir de görünür karşılığı var: yapısal veriyle işaretlenmiş kırıntı yolu, Google sonuç sayfasında ham URL yerine hiyerarşi olarak gösterilebiliyor. Aynı işaretleme kullanıcıya sayfada, arama sonucunda ise tıklamadan önce konum bilgisi veriyor. Okunabilir URL yapısı da bu işin parçası, çünkü kullanıcı adres çubuğundaki yolu da bir gösterge olarak okur.
Konum göstergesini estetik bir detay olarak değil, sayfanın verisinden türeyen bir çıktı olarak kurun. Elle bakımı gereken her gösterge, ilk şablon değişikliğinde yalan söylemeye başlar.