Breadcrumbs Kullanıcı Arayüzü: Etkili Navigasyon Nasıl Tasarlanır?

Günümüz dijital çağında web siteleri, işletmeler ve müşterileri arasında birincil iletişim ve etkileşim aracı haline gelmiştir. Web sitelerinin artan karmaşıklığıyla birlikte, kullanıcılara sezgisel navigasyon seçenekleri sunmak daha önemli hale geldi ve breadcrumbs UX bu konuda önemli bir rol oynuyor. Web sitesi navigasyonunun bu tür hayati bileşenlerinden biri de breadcrumbs UI'dir.

Breadcrumbs UI, kullanıcılara bir web sitesinin hiyerarşisinde nerede olduklarını gösteren ve daha önce ziyaret ettikleri sayfalara geri dönmelerini sağlayan bir tür navigasyon yardımcısıdır. Bu makalede, web tasarımında ekmek kırıntılarının önemini inceleyecek ve web siteniz için etkili ekmek kırıntılarını nasıl tasarlayacağınızı tartışacağız.

Kullanıcı Arayüzünde Breadcrumbs Nedir?

Ekmek kırıntısı navigasyonu olarak da bilinen ekmek kırıntıları, kullanıcılara bir web sitesi veya uygulama içindeki mevcut konumlarının bir izini sağlayan bir tür kullanıcı arayüzü öğesidir. Genellikle sayfanın üst kısmına yakın bir yerde görünür ve sitenin yapısını yansıtarak daha önce ziyaret edilen sayfalara hiyerarşik bağlantılar gösterir.

Breadcrumbs kullanıcı arayüzü, kullanıcıların bir web sitesinin yapısını kolayca gezinmesine ve anlamasına yardımcı olduğu için modern web tasarımında önemli bir bileşen haline gelmiştir. Bu, ziyaretçilerin birincil gezinme menülerini kullanmak zorunda kalmadan ilgili sayfalar arasında hızla gezinmesine olanak tanıdığından, özellikle birden fazla içerik düzeyine sahip karmaşık web sitelerinde kullanışlıdır.

Etkili ekmek kırıntısı tasarımı, ziyaretçilerin ihtiyaç duydukları bilgileri bulmalarını kolaylaştırırken site içinde bir bağlam ve yer duygusu sağlayarak sorunsuz bir kullanıcı deneyimine önemli ölçüde katkıda bulunabilir.

Ekmek Kırıntısı Türleri

Ekmek kırıntıları, tasarımlarına ve işlevselliklerine göre üç ana türe ayrılabilir: konum tabanlı, öznitelik tabanlı ve yol tabanlı. Şimdi her bir türe daha yakından bakalım:

1. Konum Tabanlı Ek Bilgi Kırıntıları

Konum tabanlı ekmek kırıntıları, kullanıcının o anda bulunduğu sayfayı ve üst kategorisini göstererek web sitesinin hiyerarşisi içindeki mevcut konumunu gösterir. Bu tür bir içerik haritası en çok derin bir hiyerarşiye sahip web sitelerinde kullanılır.

Örneğin, bir e-ticaret web sitesindeki konum tabanlı bir içerik haritası aşağıdaki gibi görünebilir:

Ana Sayfa > Kadın Giyim > Elbiseler > Abiye Elbiseler

Bu örnekte, kullanıcı ana sayfadan kadın kıyafetleri bölümüne, ardından elbiseler kategorisine ve son olarak da gece elbiseleri sayfasına gitmiştir.

Mobil cihazlarda, mobil ekmek kırıntıları izinin yalnızca son düzey(ler)i içerecek şekilde kısaltılması ve hemen üst kategoriye kadar erişime izin verilmesi genellikle önerilir.

2. Öznitelik Tabanlı Ek Bilgiler

Öznitelik tabanlı ekmek kırıntıları, geçerli sayfanın site hiyerarşisi içindeki konumu yerine özniteliklerini veya özelliklerini görüntüler. Bu tür bir içerik haritası, e-ticaret siteleri veya dizinler gibi filtre seçeneklerine sahip web sitelerinde yaygın olarak kullanılır.

Örneğin, iş ilanları için bir web sitesindeki öznitelik tabanlı bir ekmek kırıntısı aşağıdaki gibi görünebilir:

Ana Sayfa > İş İlanları > Tam Zamanlı > Pazarlama Müdürü

Bu örnekte, kullanıcı tam zamanlı işleri seçmiş ve ardından yalnızca pazarlama müdürü pozisyonlarını görüntülemek için daha fazla filtreleme yapmıştır.

3. Yol Tabanlı Breadcrumbs

Yol tabanlı ekmek kırıntıları, kullanıcının site içindeki mevcut konumuna ulaşmak için attığı adımları gösterir. Bu tür ekmek kırıntıları genellikle bir hizmete kaydolma veya bir satın alma işlemini tamamlama gibi çok adımlı süreçlerde veya iş akışlarında kullanılır.

Örneğin, bir çevrimiçi alışveriş web sitesindeki yol tabanlı bir içerik haritası aşağıdaki gibi görünebilir:

Ana Sayfa > Sepet > Kargo Bilgileri > Ödeme Ayrıntıları

Bu örnekte, kullanıcı sepetine ürün eklemiş, ödeme sayfasına ilerlemiş ve ödeme ayrıntıları sayfasına ulaşmadan önce kargo bilgilerini girmiştir.

Ek bilgi kırıntıları ayrıca bir web sitesinin özel ihtiyaçlarına uyacak şekilde birleştirilebilir veya özelleştirilebilir. Örneğin, bir web sitesi, kullanıcılara sitede gezinmek için birden fazla yol sağlamak için hem konum tabanlı hem de öznitelik tabanlı ekmek kırıntılarını kullanabilir.

Ayrıca web siteleri, görsel olarak daha çekici ve sitenin genel tasarımıyla tutarlı hale getirmek için ekmek kırıntıları için özel simgeler veya renkler kullanabilir.

UI Ekmek Kırıntıları Nasıl Tasarlanır?

Web siteniz için kırıntı çubuğu kullanıcı arayüzü tasarlarken, bunların etkili ve kullanıcı dostu olmasını sağlamak için akılda tutulması gereken birkaç temel faktör vardır.

Basit ve Net Tutun

Breadcrumbs'ın anlaşılması ve takip edilmesi kolay olmalıdır, bu nedenle onları açık ve öz tutmak önemlidir. Karmaşık veya teknik bir dil kullanmaktan kaçının ve basit, kolayca tanınabilir terimlere bağlı kalın.

Örneğin, bir e-ticaret web sitesi işletiyorsanız ve bir kullanıcı belirli bir ürünü görüntülüyorsa, kırıntı izi aşağıdaki gibi görünebilir: Ana Sayfa > Elektronik > Cep Telefonları > iPhone 12. Bu kırıntı izi net ve takip etmesi kolay olup kullanıcının sitede nerede olduğunu ve "Elektronik" gibi daha geniş kategorilere veya ana sayfaya nasıl geri dönebileceğini anlamasını sağlar.

Ana Sayfa > Kategori-1 > Alt Kategori-B > Ürün-12345 gibi karmaşık veya jargon dolu bir dil kullanılsaydı, kullanıcının anlaması ve gezinmesi çok daha zor olurdu, bu da potansiyel olarak hayal kırıklığına ve kötü bir kullanıcı deneyimine yol açardı.

Ekmek kırıntılarını basit tutarak ve tanıdık terimler kullanarak kullanıcıların sitenizde daha etkili bir şekilde gezinmesine yardımcı olur ve genel deneyimlerini iyileştirirsiniz.

Mantıksal Bir Hiyerarşi Kullanın

Daha önce de belirtildiği gibi, ekmek kırıntıları web sitenizin yapısını yansıtan mantıksal bir hiyerarşi izlemelidir. Bu, her ekmek kırıntısının sitenin hiyerarşisinde hemen üstündeki sayfaya veya bölüme yönlendirmesi gerektiği anlamına gelir.

Örneğin, sitenizde "Ana Sayfa", "Ürünler" ve "Hakkımızda" gibi kategorilere sahip bir ana gezinme menüsü varsa, ekmek kırıntısı iziniz de aynı yapıyı yansıtmalıdır. Ana Sayfa > Hakkımızda > Ürünler gibi kategoriler kullanmak mantıklı olmaz ve kullanıcıların kafasını karıştırabilir.

Net ve tutarlı bir hiyerarşi izleyerek kullanıcıların web sitenizin organizasyonunu ve web sitenizde nasıl gezinebileceklerini anlamalarına yardımcı olursunuz.

Kullanıcı İhtiyaçlarını Göz Önünde Bulundurun

Ekmek kırıntıları çoğu kullanıcı için inanılmaz derecede yararlı olsa da, tüm web siteleri veya kullanıcı demografileri için gerekli olmayabilir. Örneğin, web siteniz öncelikle web sitelerinde gezinmeye aşina olan teknoloji meraklısı kişiler tarafından kullanılıyorsa, ekmek kırıntıları o kadar yararlı olmayabilir.

Öte yandan, web siteniz daha az teknoloji meraklısı bir kitleye hitap ediyorsa veya karmaşık navigasyona ve derin içerik hiyerarşisine sahipse, ekmek kırıntıları kullanıcı deneyimini büyük ölçüde iyileştirebilir.

Web sitenizde ekmek kırıntılarını uygulayıp uygulamayacağınıza karar verirken hedef kitlenizi ve onların ihtiyaçlarını göz önünde bulundurmanız önemlidir. Ayrıca, geri bildirim toplamak ve kullanıcıların sitenizdeki ekmek kırıntılarıyla nasıl etkileşime girdiğini görmek için kullanıcı testi yapmak isteyebilirsiniz.

Mobil için Özelleştirin

Mobil cihazların yükselişiyle birlikte, ekmek kırıntılarının daha küçük ekranlarda nasıl görüneceğini ve işlev göreceğini dikkate almak önemlidir. Mobil cihazlarda, tek bir satırda yeterli alan olmadığında ekmek kırıntılarının tamamını görüntülemek için yatay kaydırmaya uyum sağlaması gerekebilir.

Geleneksel ekmek kırıntıları masaüstünde iyi çalışsa da mobil arayüze iyi bir şekilde aktarılamayabilir. Uzun mobil içerik haritaları birden fazla satıra yayılarak değerli ekran alanını tüketebilir ve potansiyel olarak kullanıcıların kafasını karıştırabilir.

Ek bilgi kırıntılarının tüm cihazlarda kolayca okunabilir ve kullanılabilir olmasını sağlamak için duyarlı tasarım tekniklerini kullanmayı düşünün. Ayrıca, kırıntı izini kısaltarak veya metin bağlantıları yerine simgeler kullanarak mobil cihazlar için uyarlamak isteyebilirsiniz.

Görsel İpuçları Kullanın

Metin bağlantıları sağlamanın yanı sıra, kullanıcıların kırıntı izini daha iyi anlamalarına yardımcı olmak için oklar veya simgeler gibi görsel ipuçları da kullanabilirsiniz. Bu görsel yardımcılar, hiyerarşiyi ve navigasyon yolunu daha net ve takip edilmesi daha kolay hale getirebilir.

Ancak, bu ipuçlarını web sitenizin tamamında tutarlı bir şekilde kullanmanız ve sayfadaki diğer öğelerden kolayca ayırt edilebilmelerini sağlamanız önemlidir.

Tıklanabilir Yapın

Ekmek kırıntılarının gerçekten faydalı olabilmesi için tıklanabilir olmaları ve kullanıcıyı hiyerarşideki bir önceki sayfaya veya seviyeye geri götürmeleri gerekir. Bu sayede kullanıcılar kaybolduklarında veya önceki bir sayfayı tekrar ziyaret etmek istediklerinde kolayca geri dönebilirler.

Bağlantının açıkça görülebildiğinden ve sayfadaki diğer öğelerden ayrıldığından emin olun. Ayrıca fareyle üzerine gelme efektleri eklemeyi veya aktif olduğunda ekmek kırıntısı bağlantısının rengini değiştirmeyi de düşünebilirsiniz.

Yalnızca Site Sayfalarını Dahil Edin

Ekmek kırıntılarını uygularken, yalnızca kendi web sitenizdeki sayfaları dahil etmeniz önemlidir. Harici bağlantılar eklemek kullanıcıların kafasını karıştırabilir ve hiyerarşiyi daha az net hale getirebilir.

Ayrıca, sitenizdeki hangi sayfaların gerçekten ekmek kırıntılarına ihtiyaç duyduğuna dikkat edin. Bazı durumlarda, arama çubuğu veya ilgili içerik önerileri gibi diğer gezinme tekniklerini kullanmak daha faydalı olabilir.

Global Navigasyonu Tamamlayın

Ekmek kırıntılarının tamamlayıcı bir navigasyon aracı olduğunu ve sitenizin global navigasyon çubuğunun yerini almaması gerektiğini unutmamak çok önemlidir.

Genel navigasyon sitenin yapısına ilişkin geniş bir genel bakış sağlarken, ekmek kırıntıları daha genel navigasyon çerçevelerini tamamlayan yerelleştirilmiş, bağlamsal bir yol sunar. Bu katmanlı yaklaşım, kullanıcıların sitenizi anlamak ve sitenizde gezinmek için birden fazla yola sahip olmasını sağlar. Ana sayfa, web sitesinin genel navigasyonunda belirgin bir şekilde yer alıyorsa, ekmek kırıntısı izine dahil etmek gereksiz olabilir.

Geçerli Sayfayı Açıkça Gösterme

Ekmek kırıntılarının önemli bir unsuru, mevcut sayfayı veya hiyerarşideki seviyeyi açıkça belirtmektir. Bu, kullanıcıların şu anda nerede olduklarını ve oraya nasıl ulaştıklarını anlamalarına yardımcı olur.

Bunu yapmanın, mevcut sayfa başlığını kalınlaştırmak veya yönü belirtmek için bir ok sembolü kullanmak gibi birkaç yolu vardır. Hangi yöntemi seçerseniz seçin, kolay tanınması için web sitenizin tamamında tutarlı olduğundan emin olun.

Etkili Breadcrumb Navigasyonu için En İyi Uygulamalar

Gösterişli veya Yüksek Kontrastlı Renkler Kullanmaktan Kaçının

Ekmek kırıntılarını tasarlarken ince, rahatsız edici olmayan renkleri tercih etmek çok önemlidir. Gösterişli veya yüksek kontrastlı renkler aşırı dikkat çekebilir ve kullanıcıları birincil gezinme öğelerinden ve ana içerikten uzaklaştırabilir.

Bunun yerine, sitenizin genel tasarım temasıyla uyumlu renkler seçin. Bu, ekmek kırıntılarının navigasyon için yararlı ancak göze batmayan bir araç olarak kalmasını sağlar. Renkleri akıllıca seçmek için Renk Düzeni hakkında daha fazla bilgi edinmek isteyebilirsiniz.

Erişilebilirlik Standartlarını Dikkate Alın

Erişilebilirlik, web tasarımında kritik bir husustur. Ekmek kırıntılarını oluştururken Web İçeriği Erişilebilirlik Yönergelerine (WCAG) uygun olduklarından emin olun.

Bu, görme engelli kullanıcılar için metni okunabilir hale getirmek için yeterli renk kontrast oranlarını kullanmayı, net görsel ipuçları sağlamayı ve klavyede gezinilebilirliği sağlamayı içerir. Bu yönergeleri izleyerek sitenizi daha kapsayıcı hale getirir ve herkes için kullanıcı deneyimini geliştirirsiniz.

Mobil ve Çok Hiyerarşili Siteler

Mobil cihazlarda ekmek kırıntıları çok fazla yer kaplayabilir veya dokunması zor olabilir; kullanıcılarınızın görevleri izin veriyorsa ekmek kırıntısı izini kısaltmayı düşünün. Kompakt bir içerik kırıntısı izi dağınıklığı önleyebilir ve kullanılabilirliği artırabilir. Her bir içerik kırıntısının kolayca dokunulabilecek kadar büyük olduğundan emin olun ve gerekli bilgileri aktarırken yerden tasarruf etmek için simgeler veya kısaltmalar kullanmayı düşünün.

Bir düşünce ekolü, çok hiyerarşili bir web sitesinde ekmek kırıntılarının birden fazla yol göstermemesi gerektiğini öne sürer. Bu yaklaşım sadeliği korur ve kullanıcıların kafasını çok fazla seçenekle karıştırmaktan kaçınır. Kullanıcıları en mantıklı yol boyunca yönlendiren tek ve net bir ekmek kırıntısı izi sağlamaya odaklanın. Bu strateji, navigasyonu basit tutar ve bilişsel yükü azaltarak kullanıcı deneyimini geliştirir.

Etkili Breadcrumb Tasarım Örnekleri

Adidas

Adidas aşağıdakileri içeren ekmek kırıntıları kullanır:

Mobil uyumlu: Kategorileri ayırmak için ileri eğik çizgilerin (/) kullanılması, mobil kullanıcılar için ekmek kırıntılarının kısa ve öz olmasını sağlar. Bu kompakt format, alan kullanımını en aza indirerek ekmek kırıntılarının ekrana hakim olmamasını ve daha küçük cihazlarda gezinmenin kolay olmasını sağlar.

Kolay anlaşılır: Etiketlerde kullanıcıların kolayca anlayabileceği basit terimler kullanılıyor. Karmaşık jargondan kaçınarak ve açık, anlaşılır bir dil kullanarak Adidas, kullanıcıların site içindeki mevcut konumlarını hızlı bir şekilde kavramalarını ve önceki sayfalara zahmetsizce geri dönmelerini sağlıyor.

Harristeeter

Harristeeter.com ekmek kırıntılarını etkili bir şekilde kullanıyor. Onların ekmek kırıntısı çubuğu :

Açık ve öz: Etiketler kısa ve öz, web sitesinin hiyerarşisini yansıtıyor. Bu, kullanıcıların konumlarını ve geri dönecekleri yolu anlamalarına yardımcı olur.

Görsel olarak farklı: Renk (etkin olmayanlar için mavi, etkin olanlar için siyah) ve bağlantılar için ince alt çizgiler neyin tıklanabilir olduğunu netleştirir. Bu, kullanıcıların mevcut sayfalarını ve diğer bağlantıları kolayca tanımalarına yardımcı olur.

İyi yerleştirilmiş: Ekmek kırıntıları sayfanın üst kısmına yakın, ana navigasyon menüsünün hemen altında yer alır. Bu yerleşim onları görünür ve erişilebilir hale getirerek kullanıcı deneyimini tanıdık bir navigasyon yardımcısı ile geliştirir.

Son Düşünceler

UI ekmek kırıntıları, kullanıcıların bir arayüz yapısı içindeki sayfalara ulaşmasına yardımcı olan tamamlayıcı bir gezinme biçimidir. Çok katmanlı, hiyerarşik sitelerde gezinmeye yardımcı olmak için özellikle yararlı olabilirler, ancak tek seviyeli web sayfalarında anlamsızdırlar.

Ekmek kırıntıları net bir yol sağlayarak, kullanıcılara sitenin hiyerarşisi içindeki konumlarını anında hissettirerek genel kullanılabilirliği artırır. Bu, birden fazla kategori ve alt kategori içeren karmaşık web siteleri için çok önemlidir, çünkü kullanıcıların tarayıcının geri düğmesine veya ana gezinme menüsüne büyük ölçüde güvenmek zorunda kalmadan zahmetsizce geri gitmelerine olanak tanır. Bu nedenle, iyi yapılandırılmış bir sitede ekmek kırıntılarının uygulanması, kullanıcı navigasyonunu ve genel kullanıcı deneyimini önemli ölçüde iyileştirebilir.