Breadcrumb Navigation En İyi Uygulamalar ve Örnekler
Kırıntı gezintisi genellikle tasarım ve geliştirme sürecinde göz ardı edilir. Bazı insanlar bunu gereksiz görürken, bazıları bunun için ne kadar büyük bir güçlük yaşadığını hissedebilir. İşin aslı, kırıntı gezintisi bir web sitesinin kullanılabilirliğini büyük ölçüde artıracak..
Ekmek kırıntıları, kullanıcılara alternatif bir gezinme yöntemi sunar, bir web sitesinin hiyerarşisinde nerede durduklarını görmelerini sağlar ve bir web sitesinde daha üst bir seviyeye gitmek için gereken adım sayısını azaltır..
Burada, günümüzde kullanılan farklı kırıntı gezintisi türleri, neden önemli oldukları ve çevrimiçi ortamda en iyi nasıl uygulanmaları gerektiği açıklanmaktadır. Ayrıca referans için buraya dahil ekmek kırıntılarının bugün çevrimiçi ortamda nasıl kullanıldığına dair 30'dan fazla örnek.
Unutmayın, kırıntı gezintisinin bir web sitesini yapmaması veya kırmaması büyük olasılıkla, web sitenizin genel kullanılabilirliğini ve işlevselliğini artırarak kullanıcılarınıza ek bir fayda sağlayacaktır..
Kırıntı Çeşitleri
yol
Yola dayalı ekmek kırıntıları, bir kullanıcının web sitesinin geçerli sayfasına ulaşmak için attığı adımları veya yolu belirtir. Ayrıca, kullanıcılar mevcut sayfaya ulaşmak için daha önce ziyaret ettikleri sayfalara bağlantılar görecektir. Üç ekmek kırıntısı gezinme türünden, Yol tabanlı ekmek kırıntısı gezinti en az çevrimiçi popülerdir. Nedeni, Yol tabanlı kırıntı gezintisi, “ileri” ve “Geri” tarayıcıdaki düğmeler. Çoğu web sitesi için Konum tabanlı ve Öznitelik tabanlı ekmek kırıntı gezintisi daha iyi işlevsellik sunar.
yer
Yere dayalı ekmek kırıntıları, geçerli sayfanın web sitesinin hiyerarşisinde durduğu kullanıcıyı gösterir. Bu ekmek kırıntısı gezinme türü en çok ikiden fazla derinlik veya içerik seviyesine sahip web sitelerinde görülür. Bir web sitesine daha fazla geçtikten sonra, kullanıcılara bir sayfa gibi davranan sayfalara veya kategorilere bağlantılar verilir. “ebeveyn” veya görüntüledikleri sayfadan bir seviye yukarı. Örneğin, bir kullanıcı “konuşmak” sayfa ancak “Ne yaparız” Sayfa bir ebeveynidir. “konuşmak” sayfa boyunca “Ev” Sayfa bir ebeveynidir. “Ne yaparız” sayfa.
Clearleft Ltd
nitelik
Öznitelik tabanlı ekmek kırıntıları, kullanıcıya bir web sitesindeki geçerli sayfaya atfedilen öznitelikleri veya kategorileri gösterir. Genellikle e-ticaret web sitelerinde görülen ürünler yalnızca bir kategoriye girmeyebilir, aynı zamanda belirli özellikler altında da olabilir. Örneğin, bir araç SUV olarak sınıflandırılabilir, ardından siyah renk olma özelliklerine sahip olur ve 2010 yılında piyasaya sürülür..
Cars.com
Neden Ekmek Kırıntıları Kullanmalı?
-
Mükemmel Kullanılabilirlik
Ekmek kırıntıları, kullanıcıların bir web sitesinde kolayca gezinmelerini sağlayan ek bir yol sağlar. Bir kullanıcı başka bir kaynaktan web sitenizdeki dahili bir sayfaya girerse, kullanıcının sitenin hiyerarşisinde tam olarak nerede durduğunu görmesine izin verir. Kullanıcıya, herhangi bir zaman uğraşmadan herhangi bir zamanda web sitesinin daha üst bir seviyeye çıkması için fırsat verilir.
-
Geriye Dönmesi Kolay
Birincil navigasyonlar geriye doğru takip edilmek üzere tasarlanmamış ekmek kırıntılarıydı. Geri izleme son derece popüler olduğundan, ek bir yardım sağlamak uzun bir yol kat edebilir.
-
Ek Tıklamaları Ortadan Kaldır
Ekmek kırıntıları, kullanıcıların bir web sitesini bir seviyeden diğerine atlamak zorunda kalmadan kullanmasını sağlar. “ileri” veya “geriye” tarayıcıdaki düğmeler. Ek olarak, ekmek kırıntıları, kullanıcıların sürekli ana navigasyona başvurma gereksinimini ortadan kaldırıyor.
-
Kullanıcıların Hiyerarşisini Gösterir
Bir web sitesinin birincil gezinmesi, sitedeki her sayfanın hiyerarşisini yansıtmaz. Kullanıcılara ekmek kırıntıları vermek, bir web sitesinin içindeki bir sayfanın hiyerarşisini görmelerini sağlar.
-
Görsel olarak hoş
Ekmek kırıntıları yalnızca kullanıcılara ek kullanılabilirlik sağlamakla kalmaz, bunu sayfada çok fazla alan veya alan olmadan da yaparlar. Ekmek kırıntılarını web sitenizin görsel tasarımına uygulamak kolaydır ve kullanıcılara büyük fayda sağlar.
-
Ek Yardım Sağlar
Bazı kullanıcılar, bir web sitesinin birincil gezinmesinin nasıl çalıştığını anlayamayabilir ve bazı durumlarda kullanıcılar ne aradıklarını bile bilmiyor olabilir. Kullanıcılara ekmek kırıntıları vermek, bir web sitesinin genel ilerlemesini ve yapısını görmelerini ve böylece web sitelerini daha iyi gezinmelerini sağlar..
-
Düşük Hemen Çıkma Oranları
Genellikle ekmek kırıntıları, birincil navigasyondan daha ayrıntılı bir navigasyon sağlar. Bunu yaparken, kullanıcılara bir web sitesinde nasıl gezinecekleri konusunda daha fazla seçenek verilecek. Web sitesinde birkaç seviyeyi kolayca geri izleme fırsatını vermek, hemen çıkma oranınızı düşürür.
-
Faiz oluşturur
Bir kullanıcı bir web sitesinin dahili sayfasına girdiğinde olasılıklar zaten ilgilenilen bir sayfadadır. Ekmek kırıntıları, kullanıcının ilgilendiği ek sayfalara ve bilgileri ilk kareden başlamaya başlamadan da sağlayabilir..
Breadcrumb En İyi Uygulamaları
-
Sayfanın Başındaki Ekmek Kırıntılarını Kullan
Ekmek kırıntıları için en yaygın ve içgüdüsel yerleşim bir sayfanın en üstündedir. Bu, kullanıcıların ekmek kırıntılarını karmaşık bir şekilde bulmalarını ve bunlardan yararlanmalarını sağlar..
-
Ekmek Kırıntılarını Tutarlı Kullanın
Kırıntıları kullanmaya karar verirseniz, bunları web sitenizin tamamında kullandığınızdan emin olun. Kullanıcılara bazı sayfalarda ekmek kırıntıları vermek, diğerlerinde ise sadece kafa karıştırmak ve hayal kırıklığına uğratmak. (Bunun en önemli örneklerinden biri, ekmek kırıntılarını ürün sayfalarından kaldırdıkları için Amazon'dur.)
-
Ekmek kırıntıları incelikle bozunmalıdır
Ekmek kırıntıları her zaman ana sayfadan başlamalı ve o andaki sayfaya düşmelidir. Bunu yaparken, ekmek kırıntılarınızın her seferinde bir adımda en yüksek seviyeden en düşük seviyeye geçmesi gerekir..
-
Ekmek Kırıntılarını Uygun Şekillendirme
Ekmek kırıntılarınızın görülmesini istiyorsunuz, ancak odak noktası olmasını istemiyorsunuz. Ayrıca, ekmek kırıntılarınızın bir sayfadaki ana içeriğin bir parçası olmadığını, yalnızca ona ek destek verdiğini de belirtmek istersiniz. Kırıntılarınızın farkedildiği ancak zorlayıcı olmayan mutlu bir ortam bulun.
-
Sayfaları Açıkça Sınıflandırın
İki veya daha fazla kategoriye giren sayfalarınız varsa, web sitenizde ekmek kırıntıları kullanmak istemeyebilirsiniz. Bir sayfayı iki veya daha fazla kategorinin altına yerleştirmeye çalışmak muhtemelen belirsiz ekmek kırıntıları üretecek ve kullanıcıyı bulmacayı çözecektir. Web sitenizin düzenli bir hiyerarşiye sahip olduğundan ve ekmek kırıntılarınızda uygun şekilde görüntülendiğinden emin olun..
-
Açıkça Her Seviyeyi Ayır
Kullanıcıların her bir ekmek kırıntı düzeyi arasındaki farkı ayırt edebildiğinden emin olun. Seviyeler arasındaki en yaygın ayırıcı, 'büyüktür' karakteridir (>). Diğer iyi ayırıcılar sağ çift açılı alıntıları (»), eğik çizgileri (/) ve okları (→) içerir. Düz metin karakteri kullanıyorsanız, yalnızca bir tane kullanın.. (»>> 'den daha çekici ve etkilidir.)
-
Geçerli Sayfadan Ayrıl
Şu anda görüntülenmekte olan sayfa olduğunu belirlemek için bir ekmek kırıntı listesinin son öğesinde farklı bir stil kullanın. Öğeyi yaparak bunu başarabilirsiniz. cesur, rengini değiştirmek veya vurgulayan o.
-
Geçerli Sayfayı Bağlantı Yapmayın
Bir breadcrumb listesinin son öğesini bir link oluşturmaya gerek yoktur çünkü görüntülenen sayfadır. Burada bir bağlantı oluşturmak, yalnızca kullanıcıları tıkladığında ve yeni bir sayfaya alınmadığında kullanıcıların kafasını karıştırır..
-
Breadcrumbs'u Sayfa Başlığı Olarak Kullanmayın
Bir kırıntı listesinin son öğesini geçerli bir sayfanın başlığı olarak kullanmak etkisizdir. Ekmek kırıntılarını kullanmayı tercih ederseniz, sayfa başlığı ekleyerek de yapın.
-
Kırıntıları Birincil Gezinme Yerini Değiştirmeyin
Ekmek kırıntıları, yalnızca birincil navigasyonu hiçbir zaman tamamen değiştirmeyecek şekilde birincil navigasyona destek olarak kullanılmalıdır. Kullanıcılara her zaman breadcrumb navigasyonunu kullanmadan önce bir web sitesinde gezinmeleri için birincil navigasyon sağlamalısınız..
Ekmek kırıntılarının harika örnekleri
Vitra Direct
Trek Bisikletleri
Illy
SiteInspire
Mia ve Maggie
Intridea
İnsanlar tarafından Tasarım
Roxy
Blik
SitePoint
Hedef
Walmart
1-800-Flowers
En iyi satın alım
Amazon.com
Ahırlar ve Soylu
Toprakların Sonu
elma
kovalamak
AbsolutePunk.net
Littman Bros. Aydınlatma
Guardian.co.uk
ALAN 17
Wufoo
Orta Tennessee Kız İzciler
Glasgow Kolektifi
ilk doğan
Bell Kanada
Grooveshark
Devlounge
yazar hakkında - Shay Howe şu anda Chicago, IL'da yaşayan profesyonel bir web ve kullanıcı arayüzü tasarımcısı. Web tasarımı hakkında kendi blogunda, pazar günlerinde yazıyor ve sizden Twitter'dan haber almak istiyor. Lütfen ona merhaba deyin!