Le fil d'Ariane faisait partie des standards du Web dès les années 2000. Pour certains, cet élément est démodé. Pour moi, il reste une bonne pratique incontournable que je recommande d'appliquer.
Dans la mythologie grecque, Minos, roi de Crète, devait faire une offrande de sept jeunes garçons et de sept jeunes filles au Minotaure enfermé dans le labyrinthe, tous les neuf ans. Ariane, la fille du roi, confia à Thésée dont elle était amoureuse, une pelote de fil qu’il devrait dérouler pour trouver le chemin du retour. Thésée tua le monstre et grâce à ce fil, put retrouver son chemin.
Dans le Web, le fil d’Ariane est un système de navigation secondaire
Il permet à l’utilisateur de savoir où il est et d’où il vient. Il ressemble normalement à ça (les éléments soulignés doivent être des liens cliquables) :
Accueil > Rubrique de niveau 1 > Rubrique de niveau 2 > Rubrique de niveau 3 > Page
Le fil d’Ariane est constitué d’une série de liens indiquant le chemin parcouru, offrant ainsi une navigation plus simple, claire et intuitive.
Il est recommandé par les fondateurs du Nielsen Norman Group depuis 1995. La nouvelle génération d'UX designers pourrait croire que le fil d'Ariane, faisant partie du siècle dernier, est démodé. Je pense différemment.
En UX design, intégrer un fil d’Ariane reste très important, surtout sur les sites qui ont une arborescence à plusieurs niveaux de profondeur.
Cet élément apporte une dimension de clarté et d’orientation, permettant aux utilisateurs de se situer plus facilement sur un site et de naviguer en toute confiance.
Tu hésites encore à mettre un fil d’Ariane sur ton site ? Le fil d’Ariane offre pourtant des avantages.
1. Clarté
Le fil d'Ariane guide les utilisateurs en leur montrant où ils se trouvent sur un site.
2. Navigation facilitée
Le fil d'Ariane permet de remonter facilement et rapidement aux niveaux supérieurs.
3. Meilleure expérience utilisateur
Le fil d'Ariane contribue à une expérience de navigation plus fluide et moins frustrante.
Mais attention. Si tu n’as qu’un seul niveau de navigation, il est préférable de ne pas afficher de fil d’Ariane. Cela alourdirait ton interface pour rien.
C'est d'ailleurs pour cette raison qu'il n'y a pas de fil d'Ariane sur ce site !
Bonus : le fil d’Ariane est aussi utile dans une bonne stratégie SEO et contribue au bon positionnement de ton site sur les moteurs de recherche.
Pour que ton fil d’Ariane soit bien conçu, voici une check-list des bonnes pratiques.
1. Positionnement
Le fil d'Ariane doit être placé sous la barre de navigation et au-dessus du titre d'une page. Il ne remplace pas la barre de navigation, il la complète.
Il doit être affiché sur toutes les pages de ton site, à l'exception de ta page d'accueil.
2. Structure
Le fil d'Ariane doit démarrer avec le mot Accueil et se terminer par le libellé du titre de la page sur laquelle l'utilisateur se trouve.
Tous les éléments doivent être soulignés et cliquables, à l'exception du dernier élément.
3. Contenu
Le fil d'Ariane doit refléter le positionnement d'une page par rapport à la hiérarchie du site. Il ne doit pas refléter le parcours de navigation complet d'une session de navigation.
4. Exclusivité
Dans certains cas, il se peut qu'une page appartienne à plusieurs niveaux hiérarchiques. La page devra afficher un seul et unique fil d'Ariane, car en afficher plusieurs risquerait de perdre l'utilisateur.
5. Spécificités du mobile
Sur la version mobile de ton site, il se peut que ton fil d'Ariane s'étende sur plusieurs lignes, ce qui est à proscrire. Dans ce cas, soit tu le réduis en affichant le dernier élément cliquable, soit tu ne l'affiches pas.
Tu l’auras compris, sauf cas exceptionnel, avoir un fil d’Ariane sur ton site fait partie des bonnes pratiques à appliquer pour avoir un site efficace !
Cet article est issu de ressources publiées sur le site du Nielsen Norman Group, la référence mondiale en ergonomie digitale et en UX design.
Accès à l'article rédigé par Jakob Nielsen sur le site du Nielsen Norman Group
Accès à l'article rédigé par Page Laubheimer sur le site du Nielsen Norman Group
Dans le domaine de l’UX design, comprendre l’effet Zeigarnik est essentiel. Je t'explique pourquoi.
Découvre cette astuce UX
L’affordance réduit les frictions. Il est donc crucial d’avoir des éléments affordants sur tes interfaces.
Découvre cette astuce UX
L’eye tracking : un dispositif qui doit être vu comme un investissement et non comme une dépense.
Découvre cette astuce UX