Breadcrumb Tasarımı: Hiyerarşi, İşaretleme ve Mobil Ölçüler
Breadcrumb, bir sayfanın site içindeki adresini tek satırda söyler. Görünüşte üç bağlantı ve iki ayırıcıdan ibaret olduğu için çoğu yerde el yordamıyla kuruluyor, sonra da aynı hatalar tekrarlanıyor: ayırıcı metin olarak yazılıyor, bulunulan sayfa link bırakılıyor, mobilde satır ikiye taşıyor.
Aşağıda breadcrumb'ın ne göstermesi gerektiğini, hangi işaretlemeyle yazıldığını ve mobilde hangi ölçülere oturduğunu sırayla kuruyorum.
Breadcrumb hiyerarşiyi gösterir, geçmişi değil
Ayrım burada başlıyor, çünkü sonraki her karar buna bağlı. Breadcrumb'ın gösterdiği şey, bulunulan sayfanın site ağacındaki atalarıdır: ana sayfa, kategori, alt kategori, sayfa. Kullanıcının o sayfaya hangi yoldan geldiğiyle ilgisi yoktur.
Literatürde ikinci bir tür daha geçer: kullanıcının gezinme geçmişini yansıtan yol bazlı breadcrumb. Bunu kurmayın (tarayıcının geri düğmesinin zaten yaptığı işi, ekranın üstünde ikinci kez yapmaktan başka bir şey değil). Teknik tarafı da tatsız: aynı URL her ziyaretçiye farklı HTML döndürür, sayfayı kenarda cache'leyemezsiniz ve Google'ın gördüğü breadcrumb ile kullanıcının gördüğü ayrışır.
Üçüncü tür, özellik bazlı breadcrumb, e-ticarette filtre kombinasyonlarını gösterir (Ana Sayfa > Ayakkabı > Koşu > 42 Numara). Bu aslında breadcrumb değil, aktif filtre listesidir. Ayrı bir bileşen olarak, kaldırılabilir etiketlerle tasarlanması daha doğru; hiyerarşi izinin yerine geçirilirse kullanıcı bir üst kategoriye çıkmak istediğinde nereye tıklayacağını bilemez.
Çoklu ebeveyn: tek kanonik yol seçin
Bir ürün hem "Koşu Ayakkabısı" hem "İndirimdekiler" altında yaşayabilir. Bu durumda iki yolu birden göstermek ya da kullanıcının geldiği kategoriye göre yolu değiştirmek cazip gelir. İkisi de sorun üretir: ilki satırı şişirir, ikincisi yukarıdaki cache ve tutarlılık sorununu geri getirir.
Doğru çözüm, her sayfa için bir kanonik ebeveyn belirlemek ve breadcrumb'ı her zaman ondan üretmek. Kanonik ebeveyn veritabanında sayfanın kendi alanıdır, istekle birlikte gelen bir şey değil. Bu alan boş kalırsa breadcrumb'ı hiç basmayın; yarım hiyerarşi, hiyerarşi yokluğundan daha kafa karıştırıcıdır.
İşaretleme: nav, sıralı liste, aria-current
Breadcrumb sıralı bir listedir, bu yüzden ol ile yazılır. Bulunulan sayfa bağlantı değildir; ona aria-current="page" verilir:
<nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li><a href="/">Ana Sayfa</a></li> <li><a href="/ayakkabi">Ayakkabı</a></li> <li><span aria-current="page">Koşu Ayakkabısı</span></li> </ol> </nav>Ayırıcıyı HTML'e metin olarak koymayın. > karakterini metin düğümü olarak yazarsanız ekran okuyucu her adım arasında onu seslendirir, üç adımlık bir izde kullanıcı üç fazladan kelime dinler. Ayırıcının yeri CSS:
.breadcrumb li + li::before { content: "›"; padding: 0 .5rem; }Bulunulan sayfayı görsel olarak da ayırın: renk farkı tek başına yetmez, çünkü linkleri zaten renkle ayırt ediyorsunuz. Altı çizili olmaması ve imlecin değişmemesi asıl sinyaldir.
Mobilde ölçü meselesi
Breadcrumb yazısı genelde gövde metninden küçüktür, 12-13 piksel civarı. Dokunma hedefi de o kadar kalırsa parmakla isabet ettirmek zorlaşır. WCAG 2.2'nin 2.5.8 ölçütü AA seviyesinde en az 24x24 CSS pikseli, 2.5.5 ise AAA seviyesinde 44x44 CSS pikselini şart koşar. Pratikte yapılacak şey, a etiketine dikey padding vermek ve satır yüksekliğini buna göre kurmak; yazı boyutunu büyütmeye gerek yok.
İkinci konu uzunluk. Dört kademeli bir iz mobilde iki satıra taşar ve içeriği aşağı iter. Burada tam izi kısaltmak yerine ortadan budayın: ilk adım, üç nokta, son iki adım. Kullanıcının mobilde breadcrumb'a tıklama nedeni neredeyse her zaman bir üst kategoriye çıkmaktır, dolayısıyla korunması gereken adım o.
Yatay kaydırmalı tek satır da işe yarar ama kaydırılabildiğine dair görsel bir ipucu (sağ kenarda solma) yoksa kullanıcı gizlenen adımları hiç fark etmez.
Arama sonucunda görünmesi için
Google, arama sonuçlarında URL yerine breadcrumb izini gösterir, ama bunun için sayfada BreadcrumbList yapılandırılmış verisi bulunması gerekir. JSON-LD ile eklemek en temizi: itemListElement dizisinde her adım için position 1'den başlar ve son adımda item alanını vermek zorunlu değildir, çünkü o sayfanın kendisidir. Ayrıntılar Google'ın breadcrumb dokümanında duruyor.
Önemli olan, yapılandırılmış verinin ekrandaki izle birebir aynı olması. Mobilde izi budadıysanız schema'yı budamayın; schema sayfanın gerçek hiyerarşisini anlatır, görsel kısaltma yalnızca sunum katmanıdır. Tersi de geçerli: schema'ya ekranda olmayan sahte kademeler eklemek işaretleme ihlali sayılır.
Ana sayfa adımı: karar verin, ikisini birden yapmayın
Yaygın tavsiye iki cümlede kendini yalanlıyor: "breadcrumb her zaman ana sayfayla başlamalı" deniyor, hemen ardından "logo zaten ana sayfaya götürüyor, tekrar olmasın" ekleniyor. İkisi aynı anda doğru olamaz.
Ayrım şurada: logo tıklanabilir bir ana sayfa bağlantısıysa ve her sayfada aynı yerde duruyorsa, breadcrumb'daki ana sayfa adımı gerçekten fazlalıktır ve mobilde yer yiyen ilk şeydir. Logonun ana sayfaya gittiğini bilmek öğrenilmiş bir davranıştır ama evrensel değildir; hedef kitleniz teknolojiyle az haşır neşirse ya da site içinde alt markalar varsa (logo alt markaya gidiyorsa) ana sayfa adımını yazıyla koyun.
Breadcrumb koymamanız gereken yerler
Site iki kademeliyse breadcrumb sadece görsel gürültüdür: "Ana Sayfa > Hakkımızda" satırı kullanıcıya bilmediği bir şey söylemez. Aynı şekilde ödeme akışı, form sihirbazı gibi doğrusal süreçlerde breadcrumb yerine adım göstergesi kullanılır; ikisi benzer görünür ama biri konumu, diğeri ilerlemeyi anlatır.
Menüde başlık olarak duran ama kendi sayfası olmayan kademeleri de ize koymayın. Tıklanamayan bir ara adım, kullanıcının izin geri kalanına da güvenmemesine yol açar. Böyle bir kademe hiyerarşide gerçekten gerekliyse, ona bir liste sayfası açmak breadcrumb'ı düzeltmekten daha kalıcı bir çözümdür.