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

Google

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!