Système de fil d'Ariane et d'orientation

Que fait Système de fil d'Ariane et d'orientation ?

Objectif

Le Système de fil d'Ariane et d'orientation fournit une méthodologie pour concevoir les pistes de navigation secondaires situées au-dessus du contenu principal. Il garantit que les utilisateurs ne se sentent jamais « perdus » dans des architectures d'information (IA) profondes en offrant une carte linéaire claire de leur emplacement actuel par rapport à la page d'accueil ou au répertoire racine. Ce système équilibre la précision navigationnelle avec un poids visuel minimal, permettant aux utilisateurs de comprendre leur contexte et de revenir aux niveaux parents en un seul clic.

Cas d'utilisation

• E-commerce : Navigation dans Catégorie > Sous-catégorie > Produit.
• Documentation & Wikis : Parcourir Volume > Chapitre > Section > Page.
• Tableaux de bord SaaS : Gestion d'entités imbriquées comme Compte > Projet > Actif.
• Sites d'annuaires : Navigation par Emplacement > Catégorie > Fiche.
• Résultats de recherche : Affichage du chemin vers un élément spécifique trouvé via la recherche.

Quand NE PAS l'utiliser

• Architectures plates : Si le site n'a que 1 à 2 niveaux de profondeur (Accueil > Page), les fils d'Ariane ajoutent une surcharge inutile.
• Progressions linéaires : Pour les assistants pas à pas ou les flux de paiement, utilisez plutôt système-de-progression-par-étapes.
• Chemins dynamiques/non hiérarchiques : Si le chemin de l'utilisateur est basé sur l'historique de session (par ex., « Retour aux résultats de recherche ») plutôt que sur une structure fixe, utilisez plutôt un bouton « Retour ».
• Pages d'atterrissage : Lorsque l'objectif est une conversion unique et que la navigation distrait de l'appel à l'action principal.

Entrées

1. Architecture de l'Information (IA) : La carte hiérarchique du site.
2. Nœud actuel : La page spécifique que l'utilisateur est en train de consulter.
3. Hiérarchie parente : La chaîne des ancêtres de la page actuelle jusqu'à la racine.
4. Contraintes d'affichage : Largeur horizontale disponible (depuis système-de-grille-responsive).

Sorties

1. Plan d'orientation : Une anatomie définie pour les libellés, les séparateurs et les liens.
2. Stratégie de troncature : Règles pour gérer les chemins longs sur les petits écrans ou les scénarios de débordement.
3. Mappage responsive : Comment le chemin se réduit ou se transforme pour les écrans mobiles.
4. Couche d'accessibilité sémantique : Rôles et libellés ARIA définis pour les lecteurs d'écran.

Flux de travail

1. Mapper le chemin hiérarchique

Déterminer le chemin absolu de l'Accueil/Racine à la page actuelle. Exemple : Accueil > Ressources > Livres blancs > [Titre de la page actuelle]

2. Définir l'anatomie visuelle

Établir le style pour chaque composant :

• Les liens : Style de lien standard (depuis système-d-états-interactifs).
• Les séparateurs : Un symbole non interactif (par ex., /, > ou →) qui distingue visuellement les niveaux.
• La page actuelle : Un libellé non cliquable en texte brut qui confirme l'emplacement de l'utilisateur.

3. Établir le rythme spatial

Appliquer le système-d-espacement-fluide :

• Espaces : Utiliser un espacement petit et cohérent (par ex., --espace-xs) entre les liens et les séparateurs.
• Placement vertical : Placer le chemin de manière cohérente au-dessus du <h1> principal mais en dessous de l'en-tête global du site.

4. Implémenter la troncature et le débordement

Pour les chemins profonds (4 niveaux ou plus) ou les titres longs :

• Troncature au milieu : Réduire les niveaux intermédiaires en une ellipse (...) si la largeur totale dépasse le conteneur (par ex., Accueil > ... > Section > Page).
• Troncature des libellés : Utiliser max-width et text-overflow: ellipsis pour les libellés longs individuels afin d'éviter le passage à la ligne.

5. Planifier l'adaptation responsive

Mapper l'expérience mobile :

• Le motif « Retour au parent » : Sur les très petits écrans, remplacer le chemin complet par un seul lien « <- Retour à [Parent] » pour économiser de l'espace.
• Défilement horizontal : Permettre à la liste du fil d'Ariane de défiler horizontalement si le chemin complet doit être préservé.

Règles de décision

• La règle « Toujours la racine » : Le premier élément du chemin doit toujours être la racine fonctionnelle (généralement « Accueil »).
• État de la page actuelle : Le dernier élément du fil d'Ariane (la page actuelle) ne doit PAS être un lien. Cela empêche les utilisateurs de cliquer sur un lien vers la page sur laquelle ils se trouvent déjà.
• Logique vs. Historique : Les fils d'Ariane doivent refléter la structure du site, PAS l'historique de navigation de l'utilisateur.
• Visibilité des séparateurs : Les séparateurs doivent avoir un poids visuel inférieur (par ex., couleur atténuée) à celui des liens pour éviter de rivaliser pour l'attention.

Contraintes

• Accessibilité : Doit être enveloppé dans un élément <nav> avec aria-label="Fil d'Ariane", contenant une liste ordonnée (<ol>) d'éléments afin que les lecteurs d'écran annoncent la position et le nombre total.
• Contraste : Les liens et les séparateurs doivent respecter les exigences WCAG AA (4,5:1).
• Cibles tactiles : Les liens du fil d'Ariane doivent respecter le minimum WCAG 2.2 SC 2.5.8 de 24x24px, même si le texte visible peut être plus petit.
• Longueur : Les libellés du fil d'Ariane doivent correspondre exactement aux titres de page (ou utiliser une version raccourcie si le titre est excessivement long).

Modèles d'échec courants

• Le « Accueil perdu » : Ne pas inclure le lien Accueil/Racine, forçant les utilisateurs à utiliser le menu principal pour recommencer.
• Lien excessif : Rendre la page actuelle cliquable, ce qui recharge la même page et déroute les utilisateurs.
• Compétition visuelle : Utiliser des séparateurs trop grands ou à contraste élevé, rendant la piste difficile à lire.
• Casse du passage à la ligne : Permettre au fil d'Ariane de passer sur 3 lignes ou plus sur mobile, repoussant trop le contenu principal vers le bas de la page.
• IA incohérente : Afficher des chemins différents pour la même page selon la façon dont l'utilisateur y est arrivé.

Critères de validation

• Le chemin commence par le nœud Accueil/Racine.
• La page actuelle est le dernier élément et n'est PAS cliquable.
• Le fil d'Ariane est enveloppé dans un point de repère <nav aria-label="Fil d'Ariane"> contenant une liste <ol>.
• Des séparateurs visuels sont utilisés et ont un contraste inférieur à celui des liens.
• Le chemin s'adapte correctement aux écrans mobiles (troncature ou lien « Retour »).
• L'espacement entre les éléments est cohérent et suit le système d'espacement fluide.
• Les utilisateurs clavier peuvent parcourir les liens intermédiaires avec la touche Tab.