Breadcrumb Nedir?

Breadcrumb terimi Türkçe’de ekmek kırıntısı anlamına gelir. Anlamı ise ekmek kırıntılarını takip eden Hansel ve Gretel masalından gelir. Kullanıcılara bir sayfanın hiyerarşik konumunu takip etmelerine yardımcı olur. Breadcrumbs, kullanıcıların bir web sitesinde veya uygulamada gezinirken bulundukları konumu gösteren bir navigasyon öğesidir. Genellikle kullanıcı arayüzü tasarımı ve web siteleriyle ilgilidir.

İnternet kullanıcılarının web sitelerde gezinirken karşılaştıkları sorunlardan biri, mevcut konumlarını kaybetme veya site içinde gezinme süreçlerinin karmaşıklığı olabilmektedir. Breadcrumb’ın, web sitelerinde gezinirken kaybolmayı önlemeye yardımcı olması ve kullanıcı deneyimini iyileştirmesi sebebiyle özellikle büyük ve karmaşık web siteleri için breadcrumb kullanımına önem verilmesi faydalı olmaktadır.

Breadcrumb genellikle bir dizi metin bağlantısından oluşur ve bu bağlantılar kullanıcılara mevcut sayfanın nerede olduğunu gösterir. Örneğin, bir web sitesi için breadcrumb navigasyonu şu şekilde görünebilir:

Ana Sayfa > Kategori 1 > Alt Kategori 1 > Ürün Sayfası

Bu breadcrumb, kullanıcının şu anda “Ürün Sayfası”nda olduğunu ve bu sayfaya “Alt Kategori 1” altından geldiğini gösterir. Kullanıcı, bu breadcrumb bağlantılarına tıklayarak daha önce ziyaret ettiği sayfalara geri dönebilir veya daha üst seviyedeki kategorilere yönlendirilebilir.

Bu görüntüyü iki farklı site özelinde örneklendirdiğimizde aşağıdaki görselleri inceleyebiliriz;

Breadcrumb Web Site Entegrasyonu

Breadcrumb oluşturma ve web sitesine entegrasyonu, web geliştiriciler için önemli bir adımdır. Aşağıda, breadcrumb oluşturma ve entegrasyonu için adım adım bir kılavuz paylaştık;

1. Adım: Breadcrumb Yapısını Belirleyin

Breadcrumb yapısını ve hiyerarşiyi belirlemeniz gerekecektir. Örneğin, web sitenizin ana sayfasından başlayarak, kategori, alt kategori ve nihayetinde belirli bir içerik veya ürün sayfasına kadar olan yolunuzu belirleyin. Bu, breadcrumb’de hangi bağlantıların yer alacağını belirlemenize yardımcı olur.

2. Adım: HTML ve CSS Kullanarak Breadcrumb’ı Oluşturun

Breadcrumb’ı HTML ve CSS kullanarak oluşturabilirsiniz:

<nav> öğesini kullanarak breadcrumb’ı sarmalayın. Bu, breadcrumb’ın bir navigasyon öğesi olduğunu belirtir ve erişilebilirliği artırır.

Breadcrumb bağlantılarını ekleyin. Örneğin;

CSS ile breadcrumb’ı stilize edin. Renkler, yazı tipleri ve aralıklar gibi stil özelliklerini ayarlayabilirsiniz. Bu, breadcrumb’ın web sitenizin tasarımına uygun hale gelmesini sağlar.

3. Adım: Bağlantıları ve Yolları Doldurun

Breadcrumb bağlantılarını ve yollarını dinamik olarak doldurmanız gerekecektir. Her sayfanın, breadcrumb’ın hangi bağlantıları içereceğini belirlenmesi gerekecektir. Örneğin, ürün sayfasındaysanız, bu sayfa URL’sini kullanarak ürün adını ve bağlı olduğu alt kategori adını dinamik olarak ekleyebilirsiniz.

4. Adım: İleri Düzey Özellikler Ekleyin (Opsiyonel)

Breadcrumb’ınızı daha işlevsel ve kullanıcı dostu hale getirmek için bazı ileri düzey özellikler ekleyebilirsiniz. Örneğin, kullanıcının geçmiş sayfalara dönmesine olanak tanıyan geri dönüş bağlantıları eklemek veya mobil cihazlarda daha iyi görüntülemek için duyarlı tasarım eklemek gibi özellikler düşünebilirsiniz.

5. Adım: Test Edin ve Sorunları Giderin

Breadcrumb’ı ekledikten sonra web sitenizi test edin ve her bağlantının doğru bir şekilde çalıştığından emin olun. Ayrıca breadcrumb’ın mobil cihazlarda ve farklı tarayıcılarda düzgün görüntülendiğine emin olun. Herhangi bir sorun tespit ederseniz, düzeltin.

6. Adım: Breadcrumb’ı Web Sitesine Entegre Edin

Breadcrumb’ı web sitenize entegre etmek için, her sayfanın head bölümüne veya footer bölümüne breadcrumb kodunu ekleyin. Breadcrumb’ın her sayfada tutarlı bir şekilde görüntülendiğinden emin olun.

Bu adımları takip ederek, web sitenize breadcrumb ekleyebilirsiniz. Ayrıca, farklı programlama dilleri ve içerik yönetim sistemleri kullanıyorsanız, bu sistemlerin özgün gereksinimlerine göre breadcrumb entegrasyonunu ayarlamak gerekebilir.

Breadcrumb Stilleri ve Tasarım Seçenekleri

Breadcrumb stilleri ve tasarım seçenekleri, web sitesinin tasarımına ve gereksinimlerine göre değişebilir.

1. Yatay Breadcrumb:

Bu yaygın breadcrumb stili, breadcrumb bağlantılarını yatay bir sıra halinde gösterir. Öğeler arasında genellikle ok işaretleri veya işaretleme karakterleri (örneğin “›” veya “/”)  kullanılır. Yatay breadcrumb, web sitenin üst kısmında veya sayfa başlığının altında görünebilir.

2. Dikey Breadcrumb:

Dikey breadcrumb, bağlantıları dikey bir sıra halinde gösterir ve genellikle sayfanın sol veya sağ tarafında bulunur. Her seviyede bir bağlantıyı gösterir, bu nedenle daha derin hiyerarşilere sahip web siteleri için uygun olabilir.

3.Hızlı Breadcrumb:

Hızlı breadcrumb, sadece birkaç seviyeyi gösterir ve daha fazla detaya inmeden ana sayfadan belirli bir sayfaya hızla erişmek için kullanışlıdır. Genellikle yatay veya dikey bir sıra halinde gösterilir.

4.Pasta Kırıntısı Breadcrumb:

Pasta kırıntısı breadcrumb, hiyerarşik yolları bir pasta dilimi gibi gösterir. Her seviye, diğerlerine göre büyüklük açısından farklı bir dilimde gösterilir. Pasta kırıntısı stili, görsel olarak dikkat çekicidir ve sayfa hiyerarşisini net bir şekilde ifade eder.

5.Renkli veya İkonlu Breadcrumb:

Renkli veya simgeli breadcrumb, her seviyeyi belirli bir renk veya sembolle vurgular. Kullanıcıların sayfalar arasında gezinirken daha hızlı ve görsel olarak etkili bir yol bulmalarına yardımcı olabilir.

6.Renkli veya İkonlu Breadcrumb:

Bu breadcrumb için iki farklı çeşit bulunabilir. Bunları animasyonlu breadcrumb ve kırıntı olmadan breadcrumb olarak inceleyebiliriz.

-Animasyonlu Breadcrumb: Animasyonlu breadcrumb, kullanıcının yolunuzu takip etmesini kolaylaştırmak için geçiş efektleri veya animasyonlar kullanır. Bu stil, breadcrumb’ı daha ilgi çekici ve etkileşimli hale getirebilir.

-Kırıntı Olmadan Breadcrumb: Bu minimalist breadcrumb stili, sadece mevcut sayfanın adını veya sembolünü gösterir ve geriye doğru hiyerarşik bağlantıları ihmal eder. Basit ve temiz bir tasarım isteyenler için uygundur.

Bu farklı breadcrumb stilleri ve tasarım seçenekleri, web sitenizin amacına, tasarımına ve kullanıcı ihtiyaçlarına bağlı olarak seçilebilir.

Kullanıcı Dostu Breadcrumb Tasarım Örnekleri

-Büyük Düğmelerle Breadcrumb: Breadcrumb bağlantıları büyük düğmeler veya butonlar şeklinde gösterilebilir. Büyük düğmeler, dokunmatik ekranlarda kullanıcıların daha rahat bir şekilde tıklamalarını sağlar. Renkli düğmeler veya simgeler, her seviyenin daha belirgin olmasına yardımcı olabilir.

-İkonlu Breadcrumb: Her seviyedeki breadcrumb bağlantılarına sembol veya simge eklemek, kullanıcıların daha hızlı tanımlamalarına yardımcı olabilir. Özellikle farklı kategorileri veya konuları sembollerle temsil etmek, kullanıcıların daha kolay gezinmelerine yardımcı olabilir.

-Kademe Gösterme: Breadcrumb bağlantılarının her birinin altında hangi seviyede olduğunuzu belirten bir kademe göstergesi eklemek kullanıcıların daha iyi anlamalarına yardımcı olabilir.

Örneğin, “1. Seviye” veya “2. Seviye” gibi ifadeler eklemek, kullanıcılara yolculuklarını görsel olarak belirtir.

-Birinci Seviyede Ana Sayfa Bağlantısı: İlk breadcrumb bağlantısı her zaman ana sayfaya geri dönüşü temsil etmelidir. Bu, kullanıcıların her zaman başlangıç noktasına geri dönebileceğini bilmesini sağlar. Örneğin, “Ana Sayfa” bağlantısı genellikle diğer breadcrumb bağlantılarının önünde bulunur.

-Breadcrumb Renk Kodlaması: Her seviyenin farklı bir renkte gösterilmesi, kullanıcıların farklı hiyerarşik seviyeleri hızlıca ayırt etmelerine yardımcı olabilir. Renk kodlaması, kullanıcıların hangi seviyede olduklarını hızlıca görmelerine olanak tanır.

-Ek Bilgi Eklemek: Her seviyenin altına ek bilgi eklemek, kullanıcılara o sayfanın içeriği hakkında daha fazla bilgi sağlayabilir. Örneğin, bir ürün sayfasındaysanız, breadcrumb altında ürünün kısa bir açıklamasını veya fiyatını göstermek kullanışlı olabilir.

Kullanıcı dostu breadcrumb tasarımı, kullanıcıların kolayca gezinmelerine yardımcı olan ve web sitenizin hiyerarşisini anlaşılır bir şekilde ileten bir araçtır. Tasarımın, web sitenizin genel tasarımına uygun olduğundan emin olun.

Breadcrumb Kullanırken Dikkat Edilmesi Gerekenler

Breadcrumb kullanırken, doğru bir şekilde tasarlamak ve entegre etmek önemlidir. Aşağıdaki 10 maddede breadcrumb kullanırken dikkate almanız gereken bazı önemli noktaları bulabilirsiniz:

1. Başlık ve Anahtar Kelimeler: Breadcrumb bağlantılarınızın başlık ve anahtar kelimeleri açık ve anlaşılır olmalıdır. Kullanıcıların, her bağlantıyı tıklayarak konumlarını kolayca anlamalarını sağlamak önemlidir.

2. Bütünlük ve Tutarlılık: Breadcrumb, her sayfada tutarlı bir şekilde görüntülenmelidir. Yani, aynı sayfanın breadcrumb’ı farklı sayfalarda farklı görünmemelidir. Breadcrumb’ın bütünlüğünü korumak kullanıcıların konumlarını takip etmelerine yardımcı olur.

3. Breadcrumb Sırası: Breadcrumb bağlantıları, hiyerarşiyi doğru bir şekilde yansıtmalıdır. Yani, bir sayfa “Ana Sayfa > Kategori 1 > Alt Kategori 1 > Ürün Sayfası” gibi doğru bir sırayla gösterilmelidir.

4. Dil ve Semboller: Breadcrumb’de kullanılan dil ve semboller anlaşılır olmalıdır. Ok işaretleri (“>”, “»”) veya diğer semboller, bağlantılar arasında geçişin daha açık olmasına yardımcı olabilir. Ancak sembollerin aşırı kullanımından kaçının.

5. Renk ve Stil: Breadcrumb’ın tasarımı web sitenizin genel stilini yansıtmalıdır. Renkler, yazı tipleri ve boyutlar, web sitenizin tasarımıyla uyumlu olmalıdır. Aynı zamanda, kullanıcıların bağlantıları kolayca görebilmeleri için yeterince vurgulu olmalıdır.

6. Mobil Uyumluluk: Breadcrumb, mobil cihazlarda da etkili bir şekilde görüntülenmelidir. Küçük ekranlarda kullanıcıların breadcrumb’ı kullanması kolay olmalıdır. Dikey veya yatay tasarımlar, mobil cihazlarda uygun görüntülenme sağlayabilir.

7. Dinamik ve SEO Dostu URL’ler: Breadcrumb bağlantıları, dinamik olarak oluşturulmalı ve SEO dostu URL’leri yansıtmalıdır. Her bağlantı, kullanıcıların sayfanın tam konumunu anlamalarına yardımcı olmalıdır.

8. Hatalı Kullanımlardan Kaçınma: Breadcrumb’ı gereksiz veya karmaşık hale getirmekten kaçının. Her seviyede çok fazla bağlantı eklemek veya breadcrumb’ı gereksiz yere kullanmak, kullanıcıları rahatsız edebilir.

9. Test Etme: Breadcrumb’ı ekledikten sonra web sitenizi test edin. Bağlantıların doğru bir şekilde çalıştığından ve breadcrumb’ın sayfa hiyerarşisini doğru bir şekilde yansıttığından emin olun. Farklı tarayıcılarda ve mobil cihazlarda testler yaparak sorunları tespit edin ve düzeltin.

10. Analiz ve İyileştirme: Kullanıcı davranışlarını izleyerek breadcrumb’ın etkisini değerlendirin. Hangi bağlantıların daha fazla tıklama aldığını ve kullanıcıların breadcrumb’ı nasıl kullandığını anlamak, iyileştirmeler yapmanıza yardımcı olabilir.

Breadcrumb kullanırken bu dikkat noktalarını göz önünde bulundurmak, kullanıcıların daha iyi bir deneyim yaşamalarını ve web sitenizin daha etkili bir şekilde kullanılmasını sağlar.

Breadcrumb Hatalı Kullanımları

Breadcrumb’ın hatalı kullanımları, kullanıcıların karışık veya yanıltıcı bir gezinme deneyimi yaşamalarına neden olabilir. Bu hatalardan kaçınmak için aşağıdaki noktalara dikkat etmek önemlidir:

-Fazla Derin Breadcrumb: Her sayfada çok fazla seviye veya bağlantı eklemek, breadcrumb’ı karmaşık hale getirebilir. Kullanıcılar, çok fazla seviyede kaybolabilirler. Breadcrumb’de sadece en önemli ve ilgili hiyerarşik seviyeleri göstermek daha iyidir.

-Breadcrumb Karmaşası: Breadcrumb, kullanıcılara yol göstermeli ve hiyerarşiyi açıkça ifade etmelidir. Karmaşık veya karışık bir breadcrumb düzeni, kullanıcıların konumlarını anlamalarını zorlaştırabilir. Her seviye açık ve anlaşılır olmalıdır.

-Bağlantı Eksikliği: Bazı sayfalarda breadcrumb eksik veya eksikse, kullanıcılar doğru bir şekilde gezinemeyebilirler. Her sayfada breadcrumb bağlantıları sağlamak önemlidir.

-Breadcrumb İkinci Anlam Kazanmamalı: Breadcrumb bağlantıları, sayfa içeriği veya işlevi dışında bir anlam kazanmamalıdır. Örneğin, bir breadcrumb bağlantısı “Ana Sayfa > İletişim” ise, bu bağlantının sadece iletişim sayfasına gitmek için olduğu açık olmalıdır. Breadcrumb, farklı bir işlev için kullanılmamalıdır.

-Breadcrumb’ın Görünmeme Problemi: Bazı sayfalarda breadcrumb görünmezse veya kullanıcıların breadcrumb’ı kolayca göremeyeceği bir konumda yer alıyorsa, bu kullanıcıların navigasyonunu zorlaştırabilir. Breadcrumb’ın her sayfanın üst kısmında veya alt kısmında görünür olmasına dikkat edin.

-Breadcrumb Otomasyonu: Otomatik breadcrumb oluşturma, bazen yanıltıcı olabilir. Özellikle karmaşık bir hiyerarşiye sahipseniz, otomatik olarak oluşturulan breadcrumb, kullanıcılar için anlaşılması zor veya yanıltıcı olabilir. Breadcrumb’ı manuel olarak düzenlemek ve gerektiğinde düzeltilmek önemlidir.

-Breadcrumb Hiyerarşisi: Breadcrumb, sayfanın hiyerarşisini açıkça yansıtmalıdır. Sayfanın konumuyla çelişen bir breadcrumb kullanmak, kullanıcıları yanıltabilir. Örneğin, bir alt kategorinin breadcrumb’ı, birden fazla farklı kategori seviyesini içermemelidir.

Breadcrumb hatalarını önlemek için kullanıcı deneyimini ön planda tutun ve her sayfa için breadcrumb bağlantılarını dikkatlice düzenleyin. Kullanıcıların rahatlıkla gezinmelerine ve konumlarını anlamalarına yardımcı olacak bir breadcrumb oluşturmak için tasarım ve içerik konularına özen gösterin.

Breadcrumb Avantajları

Breadcrumb, web sitenizin kullanıcı dostu ve düzenli olduğu izlenimini yaratır. Kullanıcılar, bir web sitesinin gezinmesinin kolay olduğunu gördüklerinde daha fazla güven duyarlar.

Breadcrumb, yazımızın başlarında yer verdiğimiz üzere kullanıcıların web sitesinde gezinirken nerede olduklarını anlamalarına yani kaybolmamalarına yardımcı olur. Kullanıcılar, belirli bir içeriğin veya ürünün hangi kategori veya alt kategori içinde bulunduğunu hızlıca anlayabilirler. Breadcrumb, kullanıcıların geçmiş sayfalara hızlı bir şekilde geri dönmesine veya daha yüksek seviyedeki bir kategoriye veya ana sayfaya dönmesine olanak tanır. Bu, kullanıcıların sitenizin hiyerarşik yapısını daha iyi anlamalarına ve konumlarını izlemelerine olanak tanır.

Breadcrumb, kullanıcıların istedikleri içeriğe daha hızlı ulaşmalarına yardımcı olduğu için dönüşüm oranlarını artırabilir. Özellikle e-ticaret siteleri için, kullanıcıların ürünlere daha hızlı erişmesi ve alışveriş yapması önemlidir.

Breadcrumb, kullanıcıların yanlışlıkla yanlış sayfalara gitme riskini azaltır. Bir kullanıcı ne kadar çok sitede gezinmesi konusunda sorun yaşarsa o kadar hızlı bir şekilde siteden ayrılabilir. Bu da bounce rate oranını yükseltebilir. Bounce rate oranının yüksek olması ise bir web site için olumsuz bir durumdur.

Breadcrumb, arama motorları için sayfa hiyerarşisini daha anlaşılır hale getirdiği için arama motorlarının web sitenizi daha iyi indekslemesine ve kullanıcıların daha spesifik aramalarında sitenizin daha iyi sıralamalar elde etmesine yardımcı olabilir.

Eğer bir işletme yerel SEO’ya önem veriyorsa, breadcrumb kullanarak yerel işletme sayfalarını ve yerel konumları vurgulayabilir. Bu, yerel aramalarda daha iyi görünürlük sağlayabilir.

Mobil cihazlar, sınırlı ekran alanına sahiptir ve kullanıcılar küçük ekranlarda gezinirken daha fazla zorluk yaşayabilirler. Küçük ekranlarda, tüm menüler ve alt kategoriler açıkça görülemeyebilir. Breadcrumb, kullanıcıların mobil cihazlarında belirli bir sayfanın konumunu hızlıca anlamalarına ve doğru yere yönlendirilmelerine yardımcı olur. Kullanıcıların ileri ve geri gitmelerini sağlar ve kullanıcı deneyimini daha akıcı hale getirir.

Breadcrumb, web sitenizin daha profesyonel ve dikkat çekici görünmesine yardımcı olabilir. Kullanıcılar, düzenli ve iyi tasarlanmış bir breadcrumb’ın, web sitenizin kalitesine dair olumlu bir izlenim bıraktığını görebilirler.