Briciole di pane e percorso utente

1) Ruolo e valore

• Mostrano dove mi trovo nella gerarchia;
• danno un rapido ritorno al livello superiore;
• riduce «back-bounce» (ripetuti click «indietro»);
• migliorano la rilevabilità dei livelli adiacenti e migliorano il SEO per le pagine di contenuti.

Principi: semplicità> dettaglio, gerarchia> storia click, struttura resistente> rumore dinamico.

2) Quando utilizzare

Cataloghi e contenuti profondi (provider categoria gioco/articolo).
Indirizzi B2B e report con 2-3 + livelli di allegati.
Longridi/molo con sezioni e sommario (briciole + TOC).
Non servono schermi di livello superiore (lobby/board) dove non c'è profondità.

3) Tipi di briciole

1. Gerarchiche (strutturali): riflettono l'IA, non il percorso utente:

" Provider" Play "n GO" Book of Dead "

2. Percorso (history-based) - Visualizza il percorso effettivo (raramente appropriato nel Web; più vicino a «indietro»).
3. Ibrido - Gerarchia + ultima fase con filtri/contesti salvati.

La raccomandazione predefinita è gerarchica per evitare il rumore da transizioni accidentali.

4) Composizione e formato

Separatore: «›» o «/» (consistente con design e locale).
Punto di partenza: Home/logo cliccabile.
Taglio: con profondità> 4 livelli nascondi i livelli medi in «»... con apertura.
L'ultimo elemento è la pagina corrente, non liquida e visivamente accentuata.
Lunghezze di intestazione: ritaglio con puntini multipli, ma con «title »/tooltip completo a hover/focus.

5) Generazione di briciole (logica)

Costruisci secondo la gerarchia canonica URL/IA, non per referer'y.
Per le entità (gioco/articolo), prendere la categoria principale (o «pane»), non i tag casuali.
Per le pagine dinamiche (filtri, ordinamenti) - Le briciole indicano il percorso per la sezione di base e il contesto viene visualizzato separatamente (chip filtri).
Se è multiforme, aggiungere il contesto del marchio/operatore all'inizio o nel selettore accanto, ma non sovraccaricare le briciole.

6) Filtri, ordinamento, paginazione

I filtri non devono allungare le briciole. Visualizzateli di seguito nei chip (Provider › Live + chip: Geo = CA, Device = Mobile).
La paginazione non fa parte delle briciole; la pagina corrente viene visualizzata nel controllo dell'elenco.
Reimposta i filtri click al livello padre - Torna alla categoria netta.

7) Mobile UX

Posizionare le briciole sotto l'H1 con una riga; in caso di mancanza di spazio, lo scroll orizzontale o il taglio degli anelli medi.
Target TAP 44px, attivo notevolmente nella navigazione tastiera (per PWA).
Non duplicare il sistema Indietro - briciole per la struttura, il pulsante per la cronologia.

8) Disponibilità (A11y)

Usa la semantica'nav [aria-label = "breadcrumb"] "e" ol> li ".
Imposta "aria-current =" page "sull'ultimo elemento.
Il contrasto dei riferimenti corrisponde a WCAG AA; Il trucco è visibile.
Icone/separatore non è l'unico segnale (ci sono etichette di testo).
L'ordine del DON corrisponde all'ordine visivo.

9) SEO e dati

Per le pagine di contenuti, utilizzare i dati BreadcrumbList strutturati (JSON-LD).
Gli URL canonici e le briciole stabili aiutano la ricerca della gerarchia.
Non indicizzare i nodi intermedi «vuoti» senza contenuto (evitare thin pages).

10) Cartelli di visualizzazione

Serie classica "Home Sezione" Pagina ".
Con un taglio: "Home ... Categoria" Carta ".
Con il contesto del marchio (B2B): "Brand A" Report "Reddito" NGR ".
Con ancoraggi al molo: "Documentazione KYC" # Livello-Controllo "(Ancoraggio a TOC, briciole a partizione).

11) Comportamento e microinterazioni

Hover/focus evidenzia il collegamento e l'area del click (tutto «briciola», non solo il testo).
L'ultima «briciola» può avere dop.mena con entità vicine (ad esempio, altri giochi di questo provider) - senza sovraccarico.
Il passaggio «al livello superiore» salva la posizione/pagina dell'elenco se questo non rompe la canonica (ad esempio, «? page = 2»).

12) Metriche e telemetria

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more' (per troncati)
• 'back _ to _ part _ retained _ contest' (se salvate la posizione/pagina)

• Usa Rate è la percentuale di utenti che cliccano sulle briciole in profondità.
• Back-bounce: diminuisce il numero dì indietro "subito dopo l'accesso alla pagina profonda.
• Time-to-Parent- Tempo di ritorno al livello superiore.
• SEO CTR - Modifica delle pagine CTR con le briciole.

13) Esempi per il iGaming

B2C: «The Home Provider of Pragmatic Play of Gates of Olympus». Nella pagina del provider, i chip dei filtri (Live/Slots/Megaways); Le briciole sono solo una struttura.
Tornei, tornei, tornei d'autunno.
B2B: «Pannello di Contenuto» Release «Book of Ra (ID 12345)» - l'ultimo elemento non è clicabile; accanto al pulsante Apri nell'operatore.

14) Antipattern

Briciole che ripetono H1 parola in parola senza alcun beneficio.
Itinerari storici invece della struttura («verenica» caotica).
Abilita i filtri e la paginazione nelle briciole (Giochi › Slot › page = 5).
L'ultima è un riferimento a se stessa.
Profondità eccessiva, dimensioni ridotte, contrasto basso, «briciole invisibili».
Nomi di anelli incoerenti con menu/URL.

15) Assegno-foglio di implementazione

1. Mappa IA - Identificare i percorsi canonici per le entità.
2. Generatore: funzione che costruisce briciole a partire da IA/URL (indipendentemente dal referer).
3. Taglio: regole di profondità> 4, popover con percorso completo.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Stile: contrasto AA, adattamento su mobile, separatori, dimensioni.
6. Contesto: filtri/ordinamenti - chip sotto, non in briciole.
7. Telemetria: eventi click/expand, Time-to-Part, back-bounce.
8. Documentazione: esempi, anti-valigette, hyde di denominazione degli anelli.

16) Totale

1. basati sulla gerarchia canonica,

2. leggibile e disponibile,

3. resistenti ai filtri e agli stati della pagina,

4. con benefici misurabili (telemetria/SEO).

In questo modo aiutano davvero a orientarsi e ridurre il percorso dell'utente verso l'obiettivo.