Anasayfa » UI / UX » Breadcrumb Navigation En İyi Uygulamalar ve Örnekler

    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!