Çörək qırıntıları və istifadəçi yolu

1) Rolu və dəyəri

• hiyerarxiyada olduğumu göstərir;
• daha yüksək səviyyəyə sürətli geri dönüş yolu verir;
• «back-bounce» azaldır («geri» təkrarlanan klik);
• qonşu səviyyələrin aşkarlanmasını artırır və məzmun səhifələri üçün SEO-nu yaxşılaşdırır.

Prinsiplər: sadəlik> təfərrüat, iyerarxiya> klik tarixi, davamlı quruluş> dinamik səs-küy.

2) Nə zaman istifadə olunur

Dərin kataloqlar və məzmun (provayder → kateqoriya → oyun/məqalə).
B2B-adminks və 2-3 + səviyyəli hesabatlar.
Bölmələr və içindəkilər (qırıntılar + TOC) ilə longrides/doklar.
Dərinliyin olmadığı üst səviyyəli ekranlarda (lobbi/deshboard) ehtiyac yoxdur.

3) Qırıntıların növləri

1. İerarxik (struktur) - istifadəçinin marşrutunu deyil, IA-nı əks etdirir:

'Ev › Provayderlər › Play 'n GO › Book of Dead'

2. Yol boyu (history-based) - faktiki marşrutu göstərir (nadir hallarda veb; daha yaxın «geri»).
3. Hibrid - hiyerarxiya + qorunan filtrlər/kontekstlə son addım.

Tövsiyə: təsadüfi keçidlərdən «səs-küy» qarşısını almaq üçün default - iyerarxik.

4) Tərkibi və formatı

Bölücü: '›' və ya '/' (dizayn və lokal ilə uyğun).
Başlanğıc nöqtəsi: «Ev «/loqo klikabildir.
Kəsmə:> 4 səviyyəli dərinlikdə «»... -də orta bağlantıları gizlətmək.
Son element: cari səhifə, qeyri-likabel və vizual vurğu.
Başlıq uzunluqları: nöqtə ilə kəsin, lakin tam 'title '/tooltip ilə hover/focus.

5) qırıntıların yaradılması (məntiq)

referer 'y görə deyil, URL/IA kanonik iyerarxiya qurmaq.
Mahiyyətlər üçün (oyun/məqalə) təsadüfi etiketlər deyil, əsas kateqoriyanı (və ya «çörək» kateqoriyasını) götürün.
Dinamik səhifələr üçün (filtrlər, çeşidləmə) - qırıntılar əsas bölməyə gedən yolu göstərir və kontekst ayrıca göstərilir (filter çipləri).
Multitenantlıq ilə markanın/operatorun kontekstini başlanğıcda və ya yaxınlıqda seçicidə əlavə edin, lakin qırıntıları çox yükləməyin.

6) Filtrlər, çeşidləmə, paginasiya

Filtrlər qırıntıları «uzatmamalıdır». Aşağıda çiplərdə göstərin («Provayderlər › Live» + çiplər: Geo = CA, Device = Mobile).
Paginasiya qırıntılara daxil deyil; cari səhifə siyahı nəzarətində göstərilir.
Filtrlərin valideyn səviyyəsinə endirilməsi: «təmiz» kateqoriyaya qayıtmaq.

7) Mobil UX

H1 qırıntıları bir sətir altında yerləşdirin; yer olmadıqda - üfüqi skroll və ya orta bağlantıların kəsilməsi.
Tap hədəfləri ≥ 44px, klaviatura naviqasiyasında nəzərə çarpan fokus (PWA üçün).
Sistem «Geri» təkrarlamayın - struktur üçün qırıntılar, düymə - tarix üçün.

8) Mövcudluq (A11y)

'nav' [aria-label = «breadcrumb»] və 'ol> li' semantikasından istifadə edin.
Son element üzərində 'aria-current =' page 'göstərilir.
Link kontrastı WCAG AA-ya uyğundur; fokus - görünür.
İkon/ayırıcı tək siqnal deyil (mətn etiketləri var).
DOM-da sifariş vizual qaydaya uyğundur.

9) SEO və məlumatlar

Məzmun səhifələri üçün strukturlaşdırılmış BreadcrumbList (JSON-LD) məlumatlarından istifadə edin.
Kanonik URL və sabit qırıntılar hiyerarxiyanı anlamağa kömək edir.
Məzmun olmadan «boş» ara komponentləri indeksləşdirməyin (thin pages qarşısını almaq).

10) Ekran nümunələri

Klassik sıra: 'Ev › Bölmə › Bölmə › Səhifə'.
Kəsmə ilə: 'Əsas ›... › Kateqoriya › Kart'.
Brend konteksti ilə (B2B): 'Brand A › Hesabatlar › Gəlir › NGR'.
Lövhələrdə lövbərlər ilə: 'Sənədləşmə › KYC › #Уровни -müayinələr' (lövbər - TOC-da, qırıntılar - bölməyə qədər).

11) Davranış və mikro müdaxilə

Hover/focus linki və klik sahəsini işıqlandırır (yalnız mətn deyil, bütün «qırıntı»).
Sonuncu «qırıntı» qonşu varlıqlarla əlavə mübadilə edə bilər (məsələn, bu provayderin digər oyunları) - həddindən artıq yüklənmədən diqqətlə.
«Yuxarı səviyyəyə» keçid siyahının mövqeyini/səhifəsini saxlayır, əgər bu kanonikanı pozmasa (məsələn, k '? page = 2').

12) Metrika və telemetriya

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more' (kəsilmiş üçün)
• 'back _ to _ parent _ retained _ context' (əgər mövqe/səhifə saxlanılıbsa)

• Use Rate: ≥ dərinliyində qırıntıları tıklayan istifadəçilərin payı 2.
• Back-bounce ↓: dərin səhifədə giriş dərhal sonra «geri» sayını azaltmaq.
• Time-to-Parent: geri dönüş müddəti daha yüksəkdir.
• SEO CTR: CTR səhifələrini qırıntılara işarə ilə dəyişdirin.

13) iGaming üçün nümunələr

B2C (Casino): 'Ev › Provayderlər › Pragmatic Play › Gates of Olympus'. Provayder səhifəsində - filtr çipləri (Live/Slots/Megaways); qırıntılar - yalnız struktur.
Turnirlər: 'Ana səhifə › Turnirlər › Payız kuboku › Qaydalar'.
B2B (provayder): 'Panel › Məzmun › Relizlər › Book of Ra (ID 12345)' - son element kliklənə bilməz; yaxınlıqda «Operator açın» düyməsi.

14) Antipattern

Faydasız H1 sözünü təkrarlayan qırıntılar.
Quruluş əvəzinə tarixi marşrutlar (xaotik «xətt»).
Filtrlərin və paqinasiyaların qırıntılara daxil edilməsi («Oyunlar › Slots › page = 5»).
Son qırıntı - özünə istinad.
Artıq dərinlik, kiçik ölçü, aşağı kontrast - «görünməz qırıntılar».
Menyu/URL-dən razılaşdırılmamış link adları.

15) Giriş çek siyahısı

1. Kart IA: varlıqlar üçün kanonik yolları müəyyən.
2. Generator: IA/URL qırıntıları qurmaq funksiyası (referer asılı olmadan).
3. Kəsmə: dərinlikdə qaydalar> 4, tam şəkildə popover.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Stil: Mobile, ayırıcılar, ölçülərə uyğunlaşdırılmış AA kontrastı.
6. Kontekst: filtrlər/çeşidləmə - aşağıda çiplərlə, qırıntılarda deyil.
7. Telemetri: klik hadisələri/expand, Time-to-Parent, back-bounce.
8. Sənədləşmə: nümunələr, anti-cases, linklərin adının bələdçisi.

16) Yekun

1. kanonik iyerarxiya əsasında,

2. oxunan və mövcud,

3. filtrlərə/səhifə vəziyyətlərinə davamlı,

4. ölçülebilir faydaları ilə (telemetri/SEO).

Beləliklə, onlar həqiqətən oriyentasiyaya kömək edir və istifadəçini hədəfə aparan yolu qısaltır.