Le fil d’Ariane web est défini comme un système de navigation secondaire qui montre à l’utilisateur sa position sur un site web, un e-commerce ou une application.

Dans la mythologie grecque, le fil d’Ariane, qui est une pelote de laine, est utilisé par le prince Thésée pour ne pas se perdre dans le Labyrinthe (et lui permettant ainsi de vaincre le Minotaure). C’est Ariane, fille de Minos qui offre à Thésée ce fil.

Aujourd’hui le fil d’Ariane représente un fil conducteur au niveau de la conception Web. En effet, Internet et les sites Web complexes peuvent paraître comme des labyrinthes.

En outre, le terme « fil d’Ariane », en anglais « Breadcrumb », signifie miettes de pain. Cela fait référence à la technique utilisée par Hansel pour retracer son chemin dans la forêt dans le célèbre conte des frères Grimm.

Alors qu’est-ce que l’aide de navigation par fil d’Ariane ? Quel est son apport pour l’utilisabilité des sites Web et son impact pour les moteurs de recherche ?

Nous répondons à ces questions dans cet article. Avant d’aller plus loin, sachez qu’une agence SEO pourra également vous accompagner dans tous vos projets de référencement naturel.

Table des matières

Qu’est-ce que le fil d’Ariane ?

Le fil d’Ariane est un élément de navigation secondaire utilisé pour soutenir les menus classiques. Il se trouve dans la partie supérieure d’un site Web de manière horizontale.

Il permet d’obtenir une meilleure orientation : ce fil rend visible à l’utilisateur où il se trouve exactement et indique le chemin de navigation vers des niveaux supérieurs.

En cela, les utilisateurs peuvent se déplacer depuis la page d’accueil vers des pages de catégorie pour obtenir un contenu spécifique. Cela lui apporte la possibilité de comprendre, suivre et de garder à portée de main la structure du site Web et ainsi de revenir en arrière en un seul clic. 

Nous en parlions déjà dans notre article dédié à l’arborescence des sites web.

emax-digital
eMax Digital
Nantes, France
4.94 - 12 recommandations
SEOStratégie DigitaleLogiciels Création de Site Web
Découvrir l’agencearrow_forward
capture-decran-2021-03-26-a-12-15-35
Uplix
Paris, France
4.92 - 3 recommandations
SEOStratégie Digitale
Découvrir l’agencearrow_forward
odw
ODW
Paris, France
4.85 - 5 recommandations
Réseaux SociauxSEOStratégie DigitaleLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
leadstart
LeadStart.
Paris, France
5 - 2 recommandations
SEOLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
rnd
RnD
Paris, France
4.88 - 4 recommandations
Réseaux SociauxErgonomie (UX/UI)SEOStratégie DigitaleLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
nancomcy
NANCOMCY
Nancy, France
4.98 - 11 recommandations
SEOStratégie DigitaleLogiciels Création de Site WebDesign Graphique
Découvrir l’agencearrow_forward
capture-decran-2021-02-19-a-18-49-53
Yateo
Paris, France
4.5 - 8 recommandations
SEOLogiciels Création de Site WebE-commerce SoftwareSEA
Découvrir l’agencearrow_forward
capture-decran-2020-12-04-a-11-56-51
Seoptimale
Bordeaux, France
4.5 - 6 recommandations
SEOStratégie DigitaleLogiciels Création de Site Web
Découvrir l’agencearrow_forward
capture-decran-2020-10-23-a-12-33-16
Periscope
Paris , France
4,5 - 5 recommandations
SEOStratégie DigitaleDéveloppement webLogiciels Création de Site WebE-commerce Software
Découvrir l’agencearrow_forward
capture-decran-2020-10-09-a-10-35-06
Aji Creative
Lognes, France
5 - 26 recommandations
SEOMobile & App DesignStratégie DigitaleDéveloppement webDéveloppement mobile & AppE-commerce Software
Découvrir l’agencearrow_forward
meet
WECOMEET
Paris, France
5/5 - 9 recommandations
Content MarketingBrandingWeb DesignLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
bold
Be BOLD
Strasbourg, France
5/5 - 6 recommandations
Content MarketingMobile & App DesignEvenementielStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
dahive
Dahive
Nantes, France
5/5 - 4 recommandations
Stratégie DigitaleLogiciels Création de Site WebDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
tapioka
Tapioka communication
Paris, France
5/5 - 6 recommandations
Content MarketingEvenementielRelations PubliquesStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
pari
Imagine Communication
Paris, France
5/5 - 9 recommandations
Content MarketingBrandingEvenementielStratégie DigitaleDéveloppement webWeb DesignLogiciels Création de Site WebProduct DesignDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
soci
Made in Social
Bordeaux, France
5/5 - 1 recommandation
Stratégie DigitaleMarketing
Découvrir l’agencearrow_forward
fly
Flying Saucer Studio
Paris, France
5/5 - 11 recommandations
Content MarketingBrandingEmailingStratégie DigitaleDéveloppement webLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
pix
Toutenpixel
Lille, France
5/5 - 3 recommandations
Logiciels Création de Site WebDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
fusee
AGENCE LA FUSEE
Paris, France
5/5 - 4 recommandations
Mobile & App DesignBrandingEvenementielStratégie DigitaleDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
pro-2
cleever
Paris, France
5/5 - 9 recommandations
Content MarketingMobile & App DesignBrandingEvenementielRelations PubliquesMarketing AutomationStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
digiita
DIGITAL TALENTS
Paris, France
5/5 - 12 recommandations
EvenementielMarketing
Découvrir l’agencearrow_forward
dupont
Dupont Lewis
Paris, France
5/5 - 13 recommandations
Content MarketingBrandingRelations PubliquesDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
blanc
Digital Effervescence
Chambéry, France
5/5 - 1 recommandation
Content MarketingBrandingStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
win
Wink Stratégies
Paris, France
5/5 - 2 recommandations
Content MarketingBrandingRelations PubliquesStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
usts
USTS Innovative Agency
Paris, France
5/5 - 7 recommandations
Content MarketingBrandingEvenementielRelations PubliquesDéveloppement webMarketing
Découvrir l’agencearrow_forward
ma
MaComAgency
Châtenay-Malabry, France
5/5 - 10 recommandations
Content MarketingBrandingEvenementielRelations PubliquesStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
vaka
Vaka – Agence Webmarketing
Avignon, France
5/5 - 7 recommandations
Content MarketingStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
mg
MG MOBILE
Paris, France
5/5 - 2 recommandations
Mobile & App DesignEmailingLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
net
Net Stratégie
Auch, France
5/5 - 4 recommandations
Content MarketingStratégie DigitaleLogiciels Création de Site WebMarketing
Découvrir l’agencearrow_forward
sophie
Sophie Candau Communication
Paris, France
5/5 - 11 recommandations
Content MarketingRelations PubliquesMarketing AutomationStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
nosy
NOSYWEB DIGITAL
Paris, France
5/5 - 6 recommandations
Content MarketingMobile & App DesignEvenementielStratégie DigitaleWeb DesignE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
wea
Agence WEA
Mérignac, France
5/5 - 10 recommandations
EvenementielStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
sow
Fibre-Digitale
Maisons-Laffitte, France
5/5 - 10 recommandations
Content MarketingStratégie DigitaleLogiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
swee
Sweet Globe
Rixensart, Belgium
5/5 - 11 recommandations
Content MarketingStratégie DigitaleLogiciels Création de Site WebMarketing
Découvrir l’agencearrow_forward
alp
Alpaga
Mons, Belgium
5/5 - 1 recommandation
BrandingStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
we1
HUGGGY
Ottignies-Louvain-la-Neuve, Belgium
5/5 - 4 recommandations
BrandingDéveloppement webLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
ratio1
The Crew Communication
Ixelles, Belgium
5/5 - 13 recommandations
Content MarketingStratégie DigitaleLogiciels Création de Site WebDesign GraphiqueE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
tyro
Capital Panache
Brussels, Belgium
5/5 - 9 recommandations
BrandingLogiciels Création de Site WebDesign GraphiqueMarketing
Découvrir l’agencearrow_forward
sun
Sunset Events
Brussels, Belgium
5/5 - 1 recommandation
EvenementielMarketing
Découvrir l’agencearrow_forward
mor1
Blue Morpho Digital
Brussels, Belgium
5/5 - 0 recommandation
Logiciels Création de Site WebE-commerce SoftwareMarketing
Découvrir l’agencearrow_forward
lab1
WowLab
Etterbeek, Belgium
5/5 - 12 recommandations
BrandingStratégie DigitaleMarketing
Découvrir l’agencearrow_forward
360
Cutesocial digital agency
Liège, Belgium
5/5 - 5 recommandations
EmailingStratégie DigitaleMarketing
Découvrir l’agencearrow_forward

Pourquoi utiliser le fil d’Ariane ?

L’objectif du fil d’Ariane est de faciliter l’expérience utilisateur entre les différentes catégories d’un site internet et ainsi éviter l’effet labyrinthe.

En effet, cela présente de nombreux avantages pour l’utilisateur : 

  • La réduction des actions : l’internaute n’a pas besoin de revenir en arrière pour découvrir d’autres sections.
  • Facilité de compréhension : le fil d’Ariane peut être particulièrement intuitif pour les internautes. S’il est bien construit, les visiteurs ne risquent pas de se perdre sur le site web.

De plus, le fil d’Ariane est un très bon outil pour diminuer le taux de rebond (indicateur permettant de mesurer le pourcentage d’internautes qui sont entrés sur une page Web et qui ont quitté le site après, sans consulter d’autres pages).

Grâce à cela, les internautes peuvent naviguer facilement entre les différentes section et ainsi restent plus longtemps sur le site web.  

Lisez notre article sur le taux de rétention pour en savoir plus.

La navigation par le fil d’Ariane de plus en plus utile

Le »breadcrumb » est alors une aide visuelle qui indique à l’utilisateur où il se situe dans la hiérarchie du site.

Cette caractéristique permet d’apporter certaines informations contextuelles à l’utilisateur et l’aide à trouver des réponses aux questions suivantes :

  • Où suis-je ? Le fil d’Ariane peut informer les visiteurs de leur position.
  • Où puis-je aller ? Le fil d’Ariane permet de trouver plus facilement les pages et les sections d’un site.
  • Devrais-je aller là-bas ? Le fil d’Ariane communique sur la valeur du contenu et peut encourager la navigation. Par exemple sur un site internet, le visiteur peut atterrir sur une page produit. Ce dernier peut ne pas correspondre à ses besoins mais il peut voir tous les autres produits de la même catégorie.

Réduire le nombre d’actions

En ce qui concerne l’utilisabilité, le fil d’Ariane réduit le nombre d’actions d’un utilisateur et parait alors plus intuitif. Généralement, le navigateur utilise le bouton « Précédent » ou un bouton du menu principal pour retourner en arrière sur le site internet.

Prendre l’espace minimal

Ce mécanisme ne prend pas tant de place puisqu’il s’agit simplement d’organiser plusieurs liens de manière horizontales. Le bénéfice ici, c’est qu’ils ne vont pas surcharger une page et son contenu.

Aucun utilisateur ne rencontre de problème avec un fil d’Ariane

Les utilisateurs peuvent ignorer ce petit élément du design, mais ce dernier est très intuitif pour les utilisateurs.

Quand utiliser un fil d’Ariane ?

Il existe une astuce efficace pour déterminer si un site devrait utiliser un fil d’Ariane.

Celle-ci consiste à construire un plan du site ou un diagramme qui représente la structure de navigation d’un site web, puis analyser si un fil d’Ariane pourrait améliorer la capacité de navigation à l’intérieur et entre les catégories.

Encore une fois, notre article sur l’arborescence pourra vous aider.

Ne pas utiliser le fil d’Ariane pour remplacer la navigation primaire

Cette notion est très importante puisque le « breadcrumbs » doit être une fonctionnalité supplémentaire et non remplacer la navigation effectuée par le menu principal.

Rappelez-vous qu’il est avant tout utilisé comme une option pour améliorer le confort de l’utilisateur, comme une navigation secondaire, comme une alternative de navigation d’un site web.

Ne pas mettre de lien vers la page de navigation actuelle

Le dernier élément dans un fil d’Ariane, c’est-à-dire la position actuelle de l’utilisateur, est optionnel. Si vous voulez l’afficher, il faut s’assurer qu’il ne soit pas cliquable. Étant donné que les utilisateurs sont déjà sur cette page, il n’y a aucun intérêt d’ajouter un lien de la page actuelle sur le fil d’Ariane.

Utiliser des séparateurs

Le symbole le plus connu pour séparer les liens d’un fil d’Ariane est le symbole “plus grand que” (>). Typiquement, le signe > est utilisé pour indiquer le système de hiérarchie, comme le format Catégorie parent > Catégorie enfant.

Les autres symboles utilisés sont les flèches qui pointent vers la droite (→), les guillemets de fin (») et les slashs (/).

Choisir une taille adéquate et espacer le contenu

Faites attention lorsque vous choisissez la taille et le padding de votre design. Il doit y avoir assez d’espace entre les différents niveaux du fil d’Ariane, autrement les utilisateurs pourraient le trouver difficile à utiliser.

En même temps, le fil d’Ariane ne doit pas occuper toute la page. De ce fait, il faut que le fil d’Ariane soit plus discret que le menu principal.

Ne pas en faire un point focal du design

Soyez sobre, vous ne devez pas utiliser de polices trop fantaisistes ou des couleurs trop flashy car elles iront contre le principe même du fil d’Ariane.

Lorsque vous êtes en train de choisir la taille et le style de votre fil d’Ariane, il ne doit jamais être le premier élément vu par l’utilisateur lorsqu’il ouvre la page.

Ne pas utiliser de fil d’Ariane sur mobile

Si vous êtes sur votre téléphone mobile et que vous avez besoin d’un fil d’Ariane pour naviguer, alors vous trouverez sûrement des élément dans le design du site pour mobile.

Le plus probable c’est que votre site est trop complexe (trop de niveaux) pour ce type d’usage et environnement.

Afin de résoudre ce problème, vous devez réfléchir comment réduire la complexité du site, et vous n’aurez même plus besoin de fil d’Ariane. Une agence de développement web pourra vous y aider.

Les différents fils d’Ariane

Il existe différents types de fils d’Ariane, qui sont basés sur la localisation, le parcours ou les attributs.

Basés sur la localisation

Les fils d’Ariane qui s’appuient sur la localisation représentent la structure du site. Ils aident les internautes à la navigation et à comprendre la hiérarchie du site qui a plusieurs niveaux (généralement plus de deux).

Ce type de fil d’Ariane est très efficace auprès des utilisateurs qui entrent sur un niveau profond du site depuis une source externe (depuis un moteur de recherche par exemple).

Ce fil d’Ariane est utilisé pour les sites ayant plusieurs niveaux de hiérarchie. Les utilisateurs naviguent ainsi plus facilement grâce à une meilleure lecture de la structure du site.

Il est particulièrement utile lorsque les internautes accèdent à un niveau profond depuis une source extérieure. Par exemple, en tapant une recherche sur Google.

Basés sur le parcours

Les fils d’Ariane basés sur le parcours montre le parcours effectué par l’utilisateur pour arriver sur une page en particulier. Ils peuvent paraître très pratique, mais la plupart du temps ils perturbent les utilisateurs.

Il arrive que les utilisateur navigue brièvement sur un site, en sautant d’une page à une autre. Avoir ce type de parcours, peu clair, n’apporte aucune aide à l’utilisateur et peut facilement être remplacée par un bouton “Précédent” dans le navigateur. Dans ce cas, un fil d’Ariane est inutile pour les navigateurs qui entrent sur le site via une page profonde.

Ce qui est important ci, ce n’est pas de montrer la structure du site, mais le chemin emprunté par l’utilisateur. C’est par exemple le cas si l’internaute navigue de page en page depuis les liens de maillage interne. Ainsi, il atterrit sur des pages de même niveau ou de niveau supérieur.

En réalité, ce breadcrumb n’est pas très utile puisqu’il est facilement remplaçable par le bouton précédent. 

Basés sur les attributs

Le fil d’Ariane basé sur les attributs liste les catégories de la page spécifique ou du produit, c’est un fil d’Ariane particulièrement utile pour un site internet.

Ce type de fil d’Ariane aide l’utilisateur à comprendre la relation entre les produits et offre une approche différente. Ce type de  » breadcrumb  » est très utile pour les sites de E commerce.

Par exemple, un visiteur découvre les produits proposés par le site. Il clique dessus, mais celui-ci ne répond pas à ses attentes. Il peut alors atteindre d’autres produits possédant les mêmes caractéristiques. 

Les autres avantages du Fil d’Ariane pour un utilisateur

Un utilisateur effectue moins d’actions en se servant du Fil d’Ariane lors de sa navigation. En effet, lorsque ce dernier retourne en arrière, il n’a pas besoin d’utiliser un bouton du menu principal, ou le bouton “Précédent” du navigateur. Le Fil d’Ariane l’aide dans cette action.

Ce moyen aide aussi les visiteurs d’un site à éviter la surcharge d’une page web et de son contenu. Le fil d’Ariane navigation web utilise un espace minimal, car s’agissant de plusieurs hyperliens qui sont organisés d’une manière horizontale. Ce procédé utile aide les utilisateurs à avoir moins de problèmes lors de leur navigation sur internet.

Conclusion

Tout ce que le fil d’Ariane fait, c’est faciliter la navigation d’un site aux utilisateurs, en partant du principe que son contenu et sa structure font sens. Cela permet d’améliorer l’utilisabilité et le confort de l’utilisateur.

En outre, une navigation avec des fils d’Ariane peut rendre l’expérience utilisateur plus agréable pour les sites Internet complexes qui comportent de nombreuses catégories et sous-catégories.

Cela permet un aperçu rapide de l’ensemble de la structure du site Web tout en s’intégrant à la plupart des conceptions.

De plus, cela représente un bénéfice au niveau du SEO, en raison du gain de liens internes naturels et de la possibilité de remplacer l’URL par des fils d’Ariane dans les pages de résultats des moteurs de recherche.

Cependant, la condition est de réaliser cela logiquement en apportant une valeur ajoutée pour l’utilisateur ainsi qu’en faisant une bonne intégration dans le site.

Pour finir, il faut garder à l’esprit que des sites peu hiérarchisés et peu profonds, avec un faible contenu, ont rarement besoin de recourir aux chemins de navigation. Une agence SEO pourra vous conseiller sur vos besoins et votre projet.