Miettes de pain et chemin de l'utilisateur

1) Rôle et valeur

• montrent où je suis dans la hiérarchie ;
• donnent un retour rapide au niveau supérieur ;
• réduire « back-bounce » (clics répétés « back ») ;
• améliorent la détectabilité des niveaux voisins et améliorent le référencement des pages de contenu.

Principes : simplicité> détail, hiérarchie> historique des clics, structure persistante> bruit dynamique.

2) Quand utiliser

Catalogues profonds et contenu (fournisseur → catégorie → jeu/article).
B2B-Admins et rapports avec 2-3 + niveaux d'imbrication.
Longgrides/docks avec sections et table des matières (miettes + TOC).
Inutile sur les écrans de niveau supérieur (lobby/pas cher) où il n'y a pas de profondeur.

3) Types de miettes

1. Hiérarchique (structurelle) - reflète l'IA et non l'itinéraire de l'utilisateur :

'Accueil › Fournisseurs › Play 'n GO › Book of Dead'

2. Sur le chemin (historique-basé) - afficher l'itinéraire réel (rarement approprié dans le web ; plus proche du « retour »).
3. Hybride - Hiérarchie + dernière étape avec filtres/contextes stockés.

Recommandation : sont hiérarchiques par défaut pour éviter le « bruit » des transitions aléatoires.

4) Composition et format

Séparateur : '›' ou '/' (consistance avec design et local).
Point de départ : « Accueil « /le logo est cliquable.
Troncature : à une profondeur> 4 niveaux cacher les maillons moyens dans « »... avec révélation.
Dernier élément : la page actuelle est non lisible et accentuée visuellement.
Longueurs des titres : découpe avec ellipse, mais avec un « titre » complet/tooltip à hover/focus.

5) Génération de miettes (logique)

Construire à partir de la hiérarchie canonique URL/IA, pas à partir de referer'y.
Pour les entités (jeu/article), prenez la catégorie principale (ou catégorie « pain ») plutôt que les étiquettes aléatoires.
Pour les pages dynamiques (filtres, tries), les miettes indiquent le chemin jusqu'à la section de base et le contexte est affiché séparément (puces de filtre).
En cas de multiplicité, ajoutez le contexte de marque/opérateur au début ou dans le sélecteur à côté, mais ne surchargez pas les miettes.

6) Filtres, tri, pagination

Les filtres ne doivent pas « allonger » les miettes. Affichez-les ci-dessous dans les puces (« Fournisseurs de › Live » + puces : Geo = CA, Device = Mobile).
La pagination n'entre pas dans les miettes ; la page en cours est affichée dans le contrôle de la liste.
Réinitialiser les filtres en cliquant sur le niveau parent : retour à la catégorie « propre ».

7) Mobile UX

Placer les miettes sous H1 d'une seule ligne ; en cas de manque de place, un scroll horizontal ou une troncature des maillons moyens.
Tap-targets ≥ 44px, focus visible lors de la navigation au clavier (pour PWA).
Ne pas dupliquer le système « Retour » - miettes pour la structure, bouton - pour l'histoire.

8) Accessibilité (A11y)

Utiliser la sémantique 'nav [aria-label = « breadcrumb »] et' ol> li '.
Spécifiez "aria-current =" page "sur le dernier élément.
Le contraste des références correspond au WCAG AA ; le focus est visible.
L'icône/séparateur n'est pas le seul signal (il y a des étiquettes de texte).
L'ordre dans le DOM correspond à l'ordre visuel.

9) SEO et données

Pour les pages de contenu, utilisez les données structurées de BreadcrumbList (JSON-LD).
Les URL canoniques et les miettes stables aident la recherche à comprendre la hiérarchie.
Ne pas indexer les nœuds intermédiaires « vides » sans contenu (éviter les pages thin).

10) Modèles d'affichage

Rangée classique : 'Accueil › Section › Sous-section › Page'.
Avec un raccourci : « Accueil ›... › Catégorie › Carte ».
Avec le contexte de la marque (B2B) : 'Brand A › Rapports › Revenus › NGR'.
Avec des ancres dans les docks : 'Documentation › KYC › # Niveaux de vérification "(ancre - dans le TOC, miettes - avant la section).

11) Comportement et microinteractions

Hover/focus met en surbrillance le lien et la zone du clic (toute la « miette », pas seulement le texte).
La dernière « miette » peut avoir dop. avec des entités voisines (par exemple, d'autres jeux de ce fournisseur) - soigneusement, sans surcharger.
Le passage au niveau supérieur conserve la position/page de la liste à moins que cela ne brise le canon (par exemple, vers '? page = 2').

12) Métriques et télémétrie

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more '(pour les tronqués)
• 'back _ to _ parent _ retained _ context '(si vous avez enregistré la position/page)

• Taux d'utilisation : proportion d'utilisateurs qui ont cliqué sur les miettes à la profondeur de la ≥2.
• Back-bounce ↓ : réduction du nombre de « retour » juste après l'entrée sur la page profonde.
• Time-to-Parent : le temps de retour au niveau est plus élevé.
• SEO CTR : modification des pages CTR avec le marquage des miettes.

13) Exemples pour iGaming

B2C (casino) : « Accueil › Fournisseurs › Pragmatic Play › Gates of Olympus ». Sur la page du fournisseur, les puces de filtres (Live/Slots/Megaways) ; les miettes ne sont qu'une structure.
Tournois : « Accueil › Tournois › Coupe d'automne › Règles ».
B2B (fournisseur) : « Panel › Contenu › Versions › Book of Ra (ID 12345) » - le dernier élément n'est pas cliquable ; à côté du bouton « Ouvrir dans l'opérateur ».

14) Anti-modèles

Miettes qui répètent H1 mot-à-mot sans intérêt.
Itinéraires historiques au lieu de la structure (chaotique « Verenica »).
Inclure les filtres et la pagination dans les miettes (« Jeux › Slots › page = 5 »).
La dernière miette est une référence à elle-même.
Profondeur excessive, petite taille, faible contraste - « miettes invisibles ».
Noms incohérents des liens avec le menu/URL.

15) Chèque de mise en œuvre

1. Carte IA : définir les chemins canoniques des entités.
2. Générateur : fonction qui construit des miettes à partir de l'IA/URL (sans dépendre du referer).
3. Troncature : règles à la profondeur> 4, popover avec chemin complet.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Style : contraste AA, adaptabilité sur mobile, séparateurs, dimensions.
6. Contexte : filtres/tri - par les puces ci-dessous, pas en miettes.
7. Télémétrie : événements de clics/expand, Time-to-Parent, back-bounce.
8. Documentation : exemples, anti-cas, hyde par le nom des maillons.

16) Résultat

1. fondée sur la hiérarchie canonique,

2. lisibles et accessibles,

3. résistant aux filtres/états de la page,

4. avec des avantages mesurables (télémétrie/SEO).

Ainsi, ils aident vraiment à naviguer et raccourcir le chemin de l'utilisateur vers le but.