Sitenizde Gezinmeyi Kolaylaştıracak 9 Breadcrumb İpucu [+ Örnekler]

Yayınlanan: 2022-09-13

Telefonunuzu, anahtarlarınızı veya cüzdanınızı hiç kaybettiniz mi? Eğer öyleyse, muhtemelen adımlarınızı tekrar izlemeniz tavsiye edilmiştir. Breadcrumb navigasyonu, sitenize gelen ziyaretçilerin tam da bunu yapmasına yardımcı olur, ancak sadece buzdolabında anahtarlarını bulmak için mutfak, banyo ve ön kapı alanını aramak yerine, breadcrumb navigasyonu kullanıcılara mevcut konumlarını ve oraya ulaşmak için atılan adımları gösterir.

Ekmek kırıntısı navigasyonu, adını, erkek ve kız kardeş ikilinin eve dönüş yollarını göstermek için ormanı geçerken arkalarında bir kırıntı izi bıraktığı Hansel ve Gretel masalından alır. Web sitenizde etkin bir şekilde uygulanan kırıntı gezintisi, ziyaretçilerinizin ormanda asla kaybolmamasını sağlayacaktır.

HubSpot'ta yüzlerce Web Sitesi Temasına ve Şablonuna erişin

Kırıntı gezintisi nedir?

Ekmek kırıntıları, kullanıcıların bir web sitesinde veya arayüzde mevcut konumlarını takip etmelerini sağlayan bir gezinme yardımcısıdır. Bir içerik haritası izi, bir kullanıcının o anda bulunduğu sayfayı ve bu sayfanın kendisinden önce ziyaret ettiği sayfalarla ilişkisini veya mevcut sayfanın üzerindeki üst düzey üst sayfaların hiyerarşisini görüntüler. Breadcrumb navigasyonu, kullanıcıya, başlangıç noktalarına veya ziyaretlerinden önceki sayfalara hızla geri dönme yeteneği sağlar.

İçerik haritaları tipik olarak, büyüktür işaretiyle (>) ayrılmış, köprü bağlantılı web sitesi sayfalarının yatay bir listesi olarak görüntülenir. Breadcrumbs navigasyonu genellikle ana web sitesi navigasyonunun altında bir yerde sayfanın üst kısmına yakın bir yerde bulunur. İpuçlarına ve en iyi uygulamalara geçmeden önce, ekmek kırıntılarının birkaç farklı tada sahip olduğunu unutmamak önemlidir.

Breadcrumb Gezinme Türleri

Konum veya Hiyerarşi Tabanlı Ekmek Kırıntıları

Konum veya Hiyerarşi tabanlı kırıntı gezintisi, en sık karşılaşacağınız türdür. Konum tabanlı bir içerik haritası, kullanıcıya bulundukları geçerli sayfayı ve bunun üzerindeki web sitesinin hiyerarşisiyle ilişkisini gösterir. Belgeleri bilgisayarınızda sakladığınız klasörler gibi düşünün. İlk klasör en geniş olanıdır ve içindeki her klasör, siz belgenize ulaşana kadar daha belirgin hale gelir.

HubSpot Bilgi Bankasından hiyerarşi içerik haritaları örneği

Yukarıdaki örnekte, içerik haritası, kullanıcının bulunduğu geçerli sayfayı ve eve, Bilgi Bankasına giden her bir ardışık ana sayfayı gösterir. Hiyerarşi tabanlı kırıntı gezintisi, kullanıcının ana sayfaya veya mevcut sayfanın bulunduğu üst sayfalardan herhangi birine geri dönmesini kolaylaştırır.

Yol veya Geçmişe Dayalı İçerik Kırıntıları

Yol tabanlı içerik haritası gezintisi, bir kullanıcının geçerli sayfaya gelmeden önce izlediği benzersiz yolu temsil eder. Yol tipik olarak bütünüyle görüntülenmese de, yol tabanlı içerik haritaları genellikle kullanıcıyı ziyaretlerinin önceki sayfasına getiren bir geri düğmesi biçimi olarak uygulanır.

Bloomingdales'in web sitesinde yol tabanlı kırıntı gezintisi örneği

Yukarıdaki örnek, Bloomingdale'in web sitesinde, kullanıcının benzersiz sorgusu bozulmadan önceki sayfasına geri dönmesine izin veren, yola dayalı bir içerik haritası olan 'Sonuçlara Dön' bağlantısını göstermektedir. Geçmişe dayalı kırıntılar, aranacak birçok farklı kategori ve ürün çeşidine sahip e-ticaret sitelerinde yaygındır.

Özniteliğe Dayalı Ekmek Kırıntıları

Özniteliğe dayalı içerik haritaları, bir kullanıcının bir web sayfasındaki aramalarını filtrelemek için seçtiği öznitelikleri veya etiketleri görüntüler. Özniteliğe dayalı içerik haritaları, kullanıcıların bir sayfadaki öğeleri daraltmak için farklı öznitelikler seçebilecekleri ve örneğin o mükemmel kot pantolonu bulabilecekleri e-ticaret web sitelerinde kullanışlıdır.

Gap'in web sitesinde kırıntı gezintisine bir örnek

Özniteliğe dayalı kırıntılar, blog gönderilerini ve içerik türlerini kategorilere ayırmak için etiketler olarak da uygulanabilir.

Artık içerik haritası navigasyonunun farklı çeşitlerini ele aldığımıza göre, sitenizde gezinilebilirliği iyileştirmek ve hemen çıkma oranını azaltmak için sitenizde içerik haritası navigasyonunu uygulamaya yönelik 9 ipucuna geçelim.

Breadcrumb Gezinme İpuçları ve Örnekler

1. Yalnızca sitenizin yapısı için anlamlıysa, kırıntı gezintisini kullanın.

Breadcrumb navigasyonu, yalnızca sitenizin yapısı gerektiriyorsa uygundur. Birden çok farklı açılış sayfasından erişilebilen daha düşük düzeyli sayfalarınız varsa, içerik haritası gezintisi kullanmak, aynı sayfalara farklı başlangıç noktalarından erişen okuyucuların kafasını karıştırabilir. Ek olarak, yalnızca birkaç üst düzey sayfa içeren küçük bir web siteniz varsa, kırıntı gezintisi gerekli olmayabilir.

Goshi'nin web sitesinde kırıntı gezinme örneği

Goshi, kırıntı gezintisi uygulaması gerekmeyen bir web sitesi örneğidir. Tek bir ürün sunarlar ve web siteleri yalnızca birkaç temel sayfa içerir. Bu durumda, ana gezinme, sitenin sunduğu her şeyi kapsar ve üst sayfaların içine yerleştirilmiş ek sayfalar yoktur.

2. Kırıntı gezintinizi çok büyük yapmayın.

Breadcrumb navigasyonu, web sitenizin ana navigasyonuna göre ikincildir. En iyi uygulama, içerik haritalarınızın sitenizin ana navigasyonundan daha küçük ve aşağıda bir yerde görünmesidir. Ekmek kırıntılarınız çok büyük görünüyorsa, sayfanın görsel dengesi bozulabilir ve sitede gezinirken kafa karışıklığına neden olabilir.

OXO'nun web sitesi iyi bir örnektir. Birincil gezinme çubukları geniştir ve "Pişirme ve Pişirme" "İçecekler" vb. kategorilerle sayfanın üst kısmına temiz bir şekilde yerleştirilmiştir. Kırıntı gezintileri, daha küçük ve daha ince bir yazı tipiyle ana gezinmenin altında bulunur.

Oxo'nun web sitesinde bir kırıntı gezinme örneği

Oxo'nun örneğinde, içerik haritası izinin sitenin üstündeki ana gezinme çubuğuna ikincil olduğu açıktır. Kırıntı navigasyonunun yaşadığı gri çubuk da hoş bir dokunuş.

3. İçerik haritası navigasyonunuza tam gezinme yolunu ekleyin.

Bazı ziyaretçilerin, ana sayfadan başlayıp gezinmek yerine arama yoluyla sitenizdeki sayfaları keşfetmesi olasıdır. Bu açılış sayfasına ulaşmak için Google'da “Elon Üniversitesi Diplomasız Öğrenciler”i aradım. Elon, içerik haritası navigasyonuna “Ev” ve “Kabuller” dahil olmak üzere tam navigasyon yolunu dahil etmek için akıllıdır.

Belirli seviyeleri dışarıda bırakırsanız, kullanıcıların kafasını karıştırırsınız ve kırıntı yolu o kadar yardımcı olmaz. Kullanıcılar ana sayfada başlamamış olsalar bile, onlara sitenizi baştan keşfetmeleri için kolay bir yol vermek istersiniz.

elon üniversite web sitesinde bir kırıntı gezinme örneği

4. En yüksek seviyeden en düşüğe doğru ilerleme.

En soldaki bağlantı ana sayfanız ve en sağdaki bağlantı kullanıcının geçerli sayfası olacak şekilde, kırıntı gezintinizin soldan sağa doğru okunması önemlidir. Nielsen Norman Group tarafından yapılan bir araştırma, kullanıcıların zamanlarının %80'ini bir sayfanın sol yarısını ve %20'sini sağ yarısını izleyerek geçirdiklerini ve bu da soldan sağa tasarım için güçlü bir durum oluşturduğunu buldu. Ayrıca, sola en yakın bağlantı, zincirin başlangıcı olarak görünecektir, bu nedenle en üst düzey sayfanız olmasını istersiniz.

5. Kırıntı başlıklarınızı sayfa başlıklarınızla tutarlı tutun.

Sayfa ve içerik haritası başlıklarınızla tutarlı olmanız önemlidir. Bu sadece karışıklığı önlemekle kalmaz, aynı zamanda hedeflenen anahtar kelimelerinizi bulmak için başka bir yer sunar. Ayrıca, kırıntı başlıklarınızı sayfaya net bir şekilde bağlamak istersiniz. İçerik haritası başlığının bir bağlantısı yoksa, açıkça belirtin. Sony, içerik haritası başlıklarını sayfa başlıklarıyla eşleşecek şekilde etkili bir şekilde etiketler. Örneğin, "Çevre, KSS ve Kalite", sayfada olduğu gibi içerik haritası navigasyonunda da aynısını okur.

Sony ayrıca bağlantıları bağlantı olmayanlardan ayırt etme konusunda da iyi bir iş çıkarıyor. Bağlantıların altı çizilidir, mevcut “Çevre” sayfası gibi olmayan bağlantılar ise süslenmeden kalır.

sony kırıntı gezinme örneği

6. Tasarım konusunda yaratıcı olun.

Breadcrumb gezintisi, geleneksel olarak, büyüktür işaretiyle (>) ayrılmış yatay bir bağlantı listesi olarak biçimlendirilir. Ancak, farklı bir tasarım sitenizin görünümü ve hissi ile daha tutarlıysa geleneksel yolu izlemeniz gerekmez.

Örneğin, Hoka, içerik haritası gezinmelerindeki öğeleri ayırmak için bir "https://blog.hubspot.com/" kullanır. Bu durumda, ince tasarım varyasyonu, site ve marka estetiği için anlamlıdır.

hoka kırıntı gezinme örneği

7. Temiz ve düzenli tutun.

Kırıntı gezintiniz kullanıcıya bir yardımcıdır ve kullanıcı aramadıkça gereksiz dikkat çekmemelidir. Bu nedenle, kırıntı gezintinizi gereksiz metin veya hantal tasarımla karıştırmak istemezsiniz.

Örneğin, Eionet, kırıntı navigasyonlarında “Buradasınız” metni olmadan yapabilirdi. Yardımcı olması amaçlanmış olsa da, metin sayfayı karıştırıyor. Doğru tasarımla, kırıntı gezintisi giriş yapmadan yeterince fark edilebilir olmalı, ancak ağrıyan bir başparmak gibi dışarı çıkmamalıdır.

eionet web sitesinde kırıntı gezintisi örneği

8. Siteniz için hangi tür kırıntı gezintisinin en mantıklı olduğunu düşünün.

Makalenin başında tartışıldığı gibi, dikkate alınması gereken birkaç içerik haritası türü vardır: konum tabanlı, öznitelik tabanlı ve geçmiş tabanlı içerik haritaları. Konum tabanlı içerik haritaları, kullanıcıya sitenin hiyerarşisinde nerede olduklarını gösterir. Özniteliğe dayalı içerik haritaları, kullanıcılara sayfalarının hangi kategorilerin veya etiketlerin altına düştüğünü gösterir. Son olarak, geçmişe dayalı kırıntılar, kullanıcılara geçerli sayfaya ulaşmak için izledikleri belirli yolu gösterir.

Rolling Stone, kullanıcılara görüntüledikleri içeriğin sitenin hangi bölümünün altına düştüğünü göstermek için konuma dayalı kırıntı navigasyonunu kullanır. Bu tür kırıntı gezintisi, Rolling Stone kullanıcıları için en etkilidir, böylece eve veya daha geniş bir kategori sayfasına kolayca gidebilirler. Bir içerik haritası gezintisi oluştururken, sitenizin ziyaretçileri için en yararlı olanı düşünün.

yuvarlanan taş sahasında konuma dayalı kırıntılara örnek

Web siteniz birçok farklı seçenek ve stile sahip ürünler sunuyorsa, özniteliğe dayalı içerik haritaları, kullanıcılarınızın aramalarını daraltmalarına ve seçilen bir öznitelik içindeki sayfalara kolayca atlamalarına yardımcı olur. Verishop, örneğin, havlu aramalarını marka ve renge göre daraltırken, kullanıcıların seçimlerini görüntülemek için öznitelik tabanlı kırıntıları kullanır.

verishop sitesinde öznitelik tabanlı kırıntılara örnek

Web siteniz için hangi tür kırıntı gezintisinin en uygun olduğuna karar verirken, sitenizin yapısını, sunduğunuz ürün veya hizmetlerin türünü ve kullanıcıların sayfalarınızla nasıl etkileşim kurmasını beklediğinizi göz önünde bulundurmalısınız.

9. Kitlenizi tanıyın.

İçerik haritası navigasyonunda en iyi uygulama, içerik haritasını sayfanın en üstüne, ana navigasyonun altına yerleştirmektir. Ancak tüm zamanların en değerli şirketlerinden biri olan Apple, breadcrumb navigasyonunu sitenin alt kısmındaki altbilgiye koyarak bu mantığa meydan okuyor. Sonuçta, kitlenizi tanımanız çok önemlidir. Apple'ın müşterileri genellikle teknoloji konusunda bilgilidir ve ihtiyaç duyarlarsa navigasyonu muhtemelen bulurlar. Müşterilerinizin ihtiyaçlarını göz önünde bulundurun ve emin değilseniz A/B testi uygulayın.

apple iphone 13 pro sitesinde konum tabanlı içerik kırıntıları örneği

HTML ve CSS'de Breadcrumb Navigasyonu

Ekmek kırıntıları yararlı olmakla kalmaz, aynı zamanda biraz HTML ve CSS koduyla web sitenize eklemek de kolaydır.

Bağlantıları kendileri yapmak için kullanacağımız HTML ile başlayalım. Bunu yapmanın en kolay yolu, bağlantılarınızı sırasız bir liste (<ul>) öğesinde düzenlemektir; her liste öğesi (<li>), geçerli sayfayı gösteren son öğeye kadar içerik haritası dizisinde bir bağlantı içerir.

İşte kullanabileceğiniz içerik kırıntıları için bir HTML şablonu :

CodePen'de HubSpot (@hubspot) tarafından HTML ve CSS'de Kalem Ekmek Kırıntılarına bakın.

Ayrıca sırasız listeyi bir HTML <nav> (gezinme) öğesine nasıl eklediğime ve açılış etiketine bir sınıf ve bir ARIA etiketi eklediğime dikkat edin. Bu isteğe bağlıdır, ancak sayfanızın ekran okuyucular ve arama motorları için daha erişilebilir olmasına yardımcı olur.

Tabii ki, bu HTML tek başına yeterli değil - şu anda sadece madde işaretli bir bağlantı listemiz var. CSS ekleyerek aradığımız kırıntı görünümüne ulaşabiliriz. Aşağıdaki CSS'yi yukarıdaki HTML'ye uygulayın:

CodePen'de HubSpot (@hubspot) tarafından HTML ve CSS'de Kalem Ekmek Kırıntılarına bakın.

Bu kod birlikte, herhangi bir sitede kullanılabilecek temel bir kırıntı gezinme alanı oluşturur - aşağıdaki nihai sonuca bakın. Ayrıca daha temiz bir görünüm için bazı ek stiller ekledim. Bu stil olmadan içerik haritalarının nasıl göründüğünü görmek için CSS sekmesinin altındaki kodu yorumlayın.

CodePen'de HubSpot (@hubspot) tarafından HTML ve CSS'de Kalem Ekmek Kırıntılarına bakın.

Bootstrap CSS'de Breadcrumb Navigasyonu

Bootstrap CSS ayrıca, özel CSS eklemeye gerek kalmadan kırıntıları oluşturmanın bir yolunu sunar. Bunu yapmak için Breadcrumb bileşenini şu şekilde kullanın. İşte Bootstrap 5 belgelerinden bir örnek:

CodePen'de HubSpot (@hubspot) tarafından Bootstrap CSS'de Kalem Ekmek Kırıntılarına bakın.

Bu, Bootstrap'taki içerik haritası gezintisinin temelleri - tüm ayrıntıları öğrenmek için Bootstrap içerik haritası belgelerine bakın.

Kullanıcıların Sitenizde Gezinmesine Yardımcı Olacak Tasarım

Sonuç olarak, kırıntı gezintisi, sitenizde gezinmeyi kolaylaştırmak için etkili bir araçtır, ancak lezzetli lokmalarınızdan (ekmek kırıntıları) en iyi şekilde yararlanmanızı sağlamak için en iyi uygulamaları göz önünde bulundurmak önemlidir. Ek UX tavsiyesi için Ultimate UX Design Kılavuzumuza göz atın.

Editörün notu: Bu gönderi ilk olarak Eylül 2018'de yayınlandı ve kapsamlı olması için güncellendi.

{{slideInCta('3b85a969-0893-4010-afb7-4690