Breadcrumb: kullanıcıya "şu an neredesin" diyen küçük navigasyon izi
Breadcrumb'ın ne işe yaradığını, hangi türlerinin olduğunu ve tasarım ile arama motoru açısından nelere dikkat edileceğini öğrenirsiniz.
Bir bakışta
- Breadcrumb, sayfanın site hiyerarşisindeki yerini gösterir. Ana sayfadan başlayıp mevcut sayfaya inen bir bağlantı zinciridir.
- Derin sayfaya arama sonucundan gelen kullanıcıya yol gösterir. Üst kategoriye tek tıkla çıkmayı sağlar.
- Hiyerarşiyi gösterir, geçmişi değil. Kullanıcının gezdiği sayfaları değil, sayfanın konumunu yansıtır.
- Arama sonuçlarında da kullanılabilir. Google, doğru işaretlenmiş breadcrumb ile sayfanın kategorisini gösterebilir.
Breadcrumb nedir?
Breadcrumb (ekmek kırıntısı), bir web sayfasında genellikle üst bölgede yer alan, sayfanın site hiyerarşisindeki yerini gösteren bağlantı zinciridir. Zincir genellikle ana sayfadan başlar, ara kategorilerden geçer ve mevcut sayfada biter. Örneğin bir e-ticaret sitesinde "Ana sayfa > Ayakkabı > Spor ayakkabı > Ürün adı" biçiminde görünür.
Adını masaldaki Hansel ve Gretel'in yolu bulmak için bıraktığı kırıntılardan alır. Amaç aynıdır: kullanıcı kaybolduğunda geri dönebileceği izi görmelidir.
Breadcrumb, hiyerarşinin üstten alta izidir
Tipik e-ticaret yapısı
- Ana sayfa
- Kategori
- Alt kategori
- Ürün sayfası
Ne işe yarar?
Breadcrumb'ın başlıca işi yol bulmaya yardım etmektir. Nielsen Norman Group, özellikle arama sonucundan doğrudan derin bir sayfaya inen kullanıcılar için faydalı olduğunu belirtir. Kullanıcı, bulunduğu sayfanın hangi kategoriye ait olduğunu görür ve tek tıkla üst seviyeye çıkabilir.
Breadcrumb ana navigasyonun yerini almaz, onu tamamlar. Menüyü, aramayı ve sayfa içi bağlantıları ortadan kaldırmaz; ek bir yön bulma ipucu sunar.
Türleri
Konum tabanlı breadcrumb, sayfanın site hiyerarşisindeki yerini gösterir ve en yaygın türdür. Öznitelik tabanlı olanlar, ürünü tanımlayan özellikleri gösterir. Geçmiş tabanlı olanlar ise kullanıcının izlediği yolu gösterir, ancak bu tür artık tercih edilmez.
İyi pratikte konum tabanlı tür kullanılır. NN/g de breadcrumb'ın oturum geçmişini değil, sayfanın hiyerarşideki yerini yansıtması gerektiğini vurgular. Birden fazla yoldan ulaşılabilen sayfalarda tek ve tutarlı bir kanonik yol seçilir.
Tasarım ilkeleri
Mevcut sayfa son öğe olarak yer alır ve tıklanamaz görünür; hiçbir şey yapmayan bir bağlantı kullanıcıyı yanıltır. Bağlantılar yalnız gerçekten var olan sayfalara verilir. Ana sayfa genellikle ilk öğe olur. Çok katmanlı olmayan, düz ve doğrusal sitelerde breadcrumb'a ihtiyaç yoktur.
Mobilde zincirin çok satıra yayılması ekranı doldurur. Bu yüzden mobilde çoğu zaman yalnız bir üst seviyeye geri dönen kısa bağlantı gösterilir. Dokunma hedefleri de yeterince büyük tutulmalıdır.
SEO tarafı
Google, sayfanın BreadcrumbList yapılandırılmış verisiyle işaretlenmesi halinde, arama sonucunda sayfanın kategorisini gösterebilir. Google'ın belgesine göre her öğenin bir adı ve sırası bulunur; son öğe dışında bağlantı adresi gerekir. Google, breadcrumb'ın URL yapısını birebir yansıtmasını değil, kullanıcının tipik yolunu temsil etmesini önerir.
Yapılandırılmış veri sayfada görünen breadcrumb ile uyumlu olmalıdır. Sayfada görünmeyen bir yol işaretlemek hem kullanıcıya hem arama motoruna tutarsız sinyal verir.
Sık yapılan hatalar
- mevcut sayfayı tıklanabilir bağlantı yapmak
- breadcrumb'ı menünün yerine koymak
- kategori adı olarak var olmayan bir sayfaya bağlantı vermek
- mobilde zinciri iki satıra yaymak
- tıklama geçmişini göstermek
- yapılandırılmış veriyi ekrandaki zincirden farklı yazmak
Bu hataların çoğu, breadcrumb'ı bir süs olarak görmekten kaynaklanır. Oysa bu küçük zincir, bilgi mimarisinin kullanıcıya görünen yüzüdür.
UX ve e-ticaret programlarında yeri
Navigasyon tasarımı, bilgi mimarisi ve kullanılabilirlik, UX çalışmasının temelidir. UX/UI Bootcamp bilgi mimarisi ile kullanılabilirlik ve erişilebilirlik modüllerini içerir. E-Ticaret Uzmanlığı Sertifika Programı ise altyapı seçimi ve SEO ile organik büyüme konularını ele alır.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
Breadcrumb her sitede gerekli midir?
Hayır. Derin ve çok katmanlı yapıda, özellikle e-ticaret ve dokümantasyon sitelerinde işe yarar. Bir ya da iki seviyeli düz sitelerde ve doğrusal akışlarda (ödeme adımları gibi) kullanıcıya bir şey katmaz.
Breadcrumb sıralamayı yükseltir mi?
Doğrudan bir sıralama sözü vermek doğru olmaz. Google'ın belgesi, işaretlemenin arama sonucunda sayfa kategorisinin gösterilmesine yardım ettiğini söyler. Asıl fayda, kullanıcıya ve arama motoruna net bir site yapısı sunmaktır. Bu nedenle breadcrumb'ı sıralama hilesi değil, kullanıcı deneyimi ve netlik aracı olarak ele almak daha doğrudur.
Mobilde breadcrumb nasıl gösterilmeli?
Kısa ve tek satırda. Çoğu zaman yalnız bir üst kategoriye dönen bağlantı yeterlidir. Dokunma hedefleri küçültülmemeli, zincir birkaç satıra yayılmamalıdır; aksi halde değerli ekran alanı doldurulur. Kısa bir zincir hem okunur hem de sayfanın içeriğine daha fazla yer bırakır.
Ürün birden fazla kategoride yer alıyorsa hangi yol gösterilir?
Tek, tutarlı bir kanonik yol seçilir. Nielsen Norman Group da çok yollu sitelerde birden fazla izi göstermek yerine tek yol önerir. Böylece hem kullanıcı hem arama motoru için sayfanın yeri belirsizleşmez.