Ekmek kırıntıları ve kullanıcının yolu

1) Rol ve değer

• Hiyerarşide nerede olduğumu göster;
• Yukarıdaki seviyeye hızlı bir dönüş yolu verin;
• "geri-sıçrama'yı azaltın (tekrarlanan tıklamalar" geri ");
• Komşu katmanların algılanabilirliğini artırın ve içerik sayfaları için SEO'yu geliştirin.

İlkeler: basitlik> detay, hiyerarşi> tıklama geçmişi, kalıcı yapı> dinamik gürültü.

2) Ne zaman kullanılır

Derin kataloglar ve içerik (sağlayıcı - kategori - oyun/makale).
B2B yöneticileri ve 2-3 + yuvalama düzeyleri ile raporlar.
Bölümler ve içindekiler tablosu ile Longrides/rıhtım (kırıntıları + TOC).
Derinlik olmayan üst düzey ekranlarda (lobi/deshboard) gerekli değildir.

3) Kırıntı türleri

1. Hiyerarşik (yapısal) - kullanıcı rotasını değil, IA'yı yansıtır:

'Ev › Sağlayıcıları › Play'n GO › Ölüm Kitabı'

2. Yol boyunca (tarih tabanlı) - gerçek rotayı görüntüleyin (web'de nadiren uygun; "Geri'ye daha yakın).
3. Hibrit - hiyerarşi + kaydedilmiş filtreler/bağlam ile son adım.

Öneri: varsayılan olarak - rastgele geçişlerden "gürültü" önlemek için hiyerarşik.

4) Kompozisyon ve format

Sınırlayıcı: '›' veya'/' (tasarım ve yerel ayarlarla tutarlı).
Başlangıç noktası: "Home "/logo tıklanabilir.
Kesme: derinlik> 4 düzeyde, orta bağlantıları gizleyin... "" açıklamasıyla.
Son öğe: geçerli sayfa, tıklanamayan ve görsel olarak vurgulanmış.
Başlık uzunlukları: Elipsis ile kırpılmış ancak hover/focus'ta tam 'title'/tooltip.

5) Kırıntı üretimi (mantık)

Kanonik URL/IA hiyerarşisine göre oluşturun, yönlendiren'y'ye göre değil.
Varlıklar için (oyun/makale), rastgele etiketleri değil, ana kategoriyi (veya'ekmek "kategorisini) alın.
Dinamik sayfalar için (filtreler, sıralama) - kırıntılar temel bölümün yolunu gösterir ve bağlam ayrı olarak gösterilir (filtre yongaları).
Çoklu kiracılık ile, marka/operatör bağlamını başlangıçta veya seçicide yan yana ekleyin, ancak kırıntıları aşırı yüklemeyin.

6) Filtreler, sıralama, sayfalama

Filtreler kırıntıları "uzatmamalıdır". Bunları aşağıda yongalarda görüntüleyin ("› Live Providers" + yongaları: Geo = CA, Device = Mobile).
Pagination kırıntıları dahil değildir; Geçerli sayfa liste denetiminde gösterilir.
Ana seviyeye tıklayarak filtreleri sıfırlayın: "temiz" kategorisine dönün.

7) Mobil UX

H1'in altındaki kırıntıları bir sıraya yerleştirin; Alan eksikliği durumunda - yatay kaydırma veya orta bağlantıların kesilmesi.
Tap-targets ≥ 44px, klavye navigasyonu için dikkat çekici odak (PWA için).
Sistemi çoğaltmayın "Geri" - yapı için kırıntıları, düğme - tarih için.

8) Kullanılabilirlik (A11y)

'nav [aria-label = "breadcrumb"]'ve' ol> li 'anlamlarını kullanın.
Son öğede' aria-current =" page"' belirtin.
Referansların kontrastı WCAG AA'ya karşılık gelir; odak - görünür.
Simge/ayırıcı tek sinyal değildir (metin etiketleri vardır).
DOM'daki sıra görsel sıraya karşılık gelir.

9) SEO ve veri

İçerik sayfaları için BreadcrumbList (JSON-LD) yapılandırılmış verilerini kullanın.
Kanonik URL'ler ve kararlı kırıntılar, aramanın hiyerarşiyi anlamasına yardımcı olur.
İçerik olmadan "boş'ara düğümleri dizine eklemeyin (ince sayfalardan kaçının).

10) Ekran desenleri

Klasik seri: 'Ana Sayfa › Bölüm › Alt Bölüm › Sayfa'.
Kesilmiş: 'Ev ›... › Kategori › Kart'.
Marka Bağlamı (B2B) ile: 'Marka A › NGR › › Gelir Raporları'.
Rıhtımlardaki çapalarla: 'KYC › dokümantasyon › # Seviyeler-kontroller' (çapa - TOC, kırıntılar - bölümden önce).

11) Davranış ve mikro etkileşimler

Hover/focus, bağlantıyı ve tıklama alanını vurgular (sadece metnin değil, tüm "kırıntı").
Son "kırıntı", komşu varlıklarla (örneğin, bu sağlayıcının diğer oyunları) ek bir menüye sahip olabilir - düzgünce, aşırı yüklenmeden.
"Yukarı" gitmek, kanonu kırmadığı sürece listenin konumunu/sayfasını korur (örn. 'için? sayfa = 2 ').

12) Metrikler ve telemetri

• 'breadcrumb _ click (level, label, url)'
• 'breadcrumb _ expand _ more' (kesik için)
• 'back _ to _ parent _ retained _ context' (konum/sayfa korunuyorsa)

• Kullanım Oranı: ≥2 derinlikte kırıntılara tıklayan kullanıcıların oranı.
• Geri sıçrama ↓: Derin sayfaya giriş yaptıktan hemen sonra "geri" miktarını azaltmak.
• Time-to-Parent: Daha yüksek bir seviyeye dönme zamanı.
• SEO TO: Kırıntı işaretli sayfaların TO'sunu değiştirme.

13) iGaming için örnekler

B2C (casino): 'Ev › Sağlayıcıları › Pragmatik Oyun › Olympus Kapıları'. Sağlayıcının sayfasında - filtre yongaları (Canlı/Yuvalar/Megaways); Kırıntılar - sadece yapı.
Turnuvalar: 'Ev › Turnuvaları › Sonbahar Kupası › Kuralları'.
B2B (sağlayıcı): 'Panel › İçerik › › Book of Ra'yı Yayınlar (ID 12345)' - son öğe tıklanabilir değildir; İfadede Aç düğmesinin yanında.

14) Antipatterns

Fayda olmadan H1 kelimesini tekrar eden kırıntılar.
Yapı yerine tarihsel yollar (kaotik "sicim").
Filtrelerin ve sayfaların kırıntılara eklenmesi ("Oyunlar › Yuvalar › sayfa = 5").
Son kırıntı kendine bir göndermedir.
Aşırı derinlik, küçük boyut, düşük kontrast - "görünmez kırıntılar".
Menü/URL ile tutarsız bağlantı adları.

15) Uygulama kontrol listesi

1. IA haritası: Varlıklar için kanonik yollar tanımlar.
2. Jeneratör: IA/URL'den kırıntılar oluşturan işlev (yönlendiriciye bağlı değildir).
3. Kesme: derinlikte kurallar> 4, tam yol ile açılır.
4. A11y/SEO: 'nav [aria-label]', 'ol/li', 'aria-current', JSON-LD.
5. Stil: AA kontrast, mobil cihazlarda †, bölücüler, boyutlar.
6. Bağlam: Filtreler/sıralama - aşağıdaki çipler, kırıntılarda değil.
7. Telemetri: olayları tıklatın/genişletin, Time-to-Parent, back-bounce.
8. Dokümantasyon: örnekler, anti-vakalar, bağlantı adlandırma kılavuzu.

16) Alt satır

1. Kanonik hiyerarşiye dayanarak,

2. Okunabilir ve erişilebilir,

3. Filtrelere/sayfa durumlarına dayanıklı,

4. Ölçülebilir fayda ile (telemetri/SEO).

Böylece gerçekten gezinmeye yardımcı olur ve kullanıcının hedefe giden yolunu kısaltırlar.