Free Press

Dans le conte de fées Hansel et Gretel, deux enfants laissent tomber des miettes de pain dans les bois pour retrouver leur chemin.

De nos jours, vous ne vivez probablement pas trop d’expériences de type « perdu dans le bois », mais je suis prêt à parier que vous vous êtes senti frustré et désorienté sur des sites Web mal conçus.

Dans la conception de sites Web, la navigation par fil d’Ariane est un moyen de montrer à vos utilisateurs leur emplacement et comment ils y sont arrivés (semblable au fil d’Ariane d’Hansel). Elle aide également les utilisateurs à trouver plus rapidement les pages de niveau supérieur s’ils ont atterri sur votre site à partir d’une recherche ou d’un lien profond.

Jakob Nielsen, cofondateur du Nielsen Norman Group, recommande la navigation par fil d’Ariane depuis 1995, et les défend avec force : « Tout ce que font les fils d’Ariane, c’est faciliter le déplacement des utilisateurs sur le site, en supposant que son contenu et sa structure globale aient un sens. C’est une contribution suffisante pour quelque chose qui ne prend qu’une ligne dans la conception. »

Si le site Web de votre entreprise est à plusieurs niveaux, vous pourriez envisager de mettre en œuvre la navigation par fil d’Ariane pour faciliter la navigation sur votre site. Cependant, comme tout élément de conception, il y a une bonne et une mauvaise façon de le faire. Ici, nous allons explorer neuf conseils et exemples pour vous assurer que vous créez la navigation par fil d’Ariane la plus efficace pour vos utilisateurs.

Conseils et exemples de navigation par fil d’Ariane

N’utilisez la navigation par fil d’Ariane que si elle a du sens pour la structure de votre site.

La navigation par fil d’Ariane a une structure linéaire, vous ne voulez donc l’utiliser que si elle a du sens avec la hiérarchie de votre site Web. Si vous avez des pages de niveau inférieur qui sont accessibles à partir de différentes pages de destination, l’utilisation de la navigation par fil d’Ariane ne fera qu’embrouiller les lecteurs qui continuent à accéder aux mêmes pages à partir de différents points de départ. En outre, si votre site est relativement simple, avec seulement quelques pages, vous n’avez probablement pas besoin de la navigation par fil d’Ariane.

Ne rendez pas votre navigation par fil d’Ariane trop grande.

Votre navigation par fil d’Ariane est un outil secondaire à votre barre de navigation principale, elle ne doit donc pas être trop grande ou trop proéminente sur la page. Par exemple, sur le site Web de DHL, leur barre de navigation principale est grande et reconnaissable, avec des colonnes comme « Express » « Colis & eCommerce » « Logistique », etc. Leur fil d’Ariane de navigation est la plus petite section en dessous qui indique « DHL Global | > Logistics | > Freight Transportation ». Vous ne voulez pas que vos utilisateurs confondent votre navigation de fil d’Ariane avec la barre de navigation principale.

Inclure le chemin de navigation complet dans votre navigation de fil d’Ariane.

J’ai googlé « Elon University Non-Degree Students » pour atteindre cette page de destination, mais Elon est intelligent d’inclure le chemin de navigation complet, y compris « Home » et « Admissions ». Si vous omettez certains niveaux, vous risquez d’embrouiller les utilisateurs et le fil d’Ariane ne sera pas aussi utile. Même si les utilisateurs n’ont pas commencé par la page d’accueil, vous voulez leur donner un moyen facile d’explorer votre site dès le début.

Progression du niveau le plus élevé au plus bas.

Il est important que votre navigation par fil d’Ariane se lise de gauche à droite, le lien le plus proche à gauche étant votre page d’accueil, et le lien le plus proche à droite étant la page actuelle de l’utilisateur. Une étude du Nielsen Norman Group a révélé que les utilisateurs passent 80 % de leur temps à regarder la moitié gauche d’une page et 20 % à regarder la moitié droite, ce qui plaide en faveur d’une conception de gauche à droite. De plus, le lien le plus proche de la gauche apparaîtra comme le début de la chaîne, vous voulez donc qu’il s’agisse de votre page de plus haut niveau.

Gardez vos titres de fil d’Ariane cohérents avec vos titres de page.

Pour éviter toute confusion, vous voudrez rester cohérent avec vos titres de page et de fil d’Ariane, en particulier si vous ciblez certains mots-clés dans ces titres. Vous voulez également lier clairement vos titres de fil d’Ariane à la page. Si le titre du fil d’Ariane ne comporte pas de lien, faites-le clairement. Nestlé étiquette efficacement ses titres de fil d’Ariane pour qu’ils correspondent aux titres des pages. « Domaines d’impact & engagement », par exemple, se lit de la même manière dans le fil d’Ariane de navigation que sur la page.

Nestle fait également un bon travail en différenciant les liens des non-liens avec des couleurs différentes — les liens sont bleus, tandis que les non-liens restent gris.

Soyez créatif avec le design.

Le fil d’Ariane de navigation traditionnel ressemble à ceci : Accueil > À propos de nous > Carrières. Cependant, vous n’êtes pas obligé de suivre le chemin traditionnel si vous pensez qu’un design différent pourrait plaire davantage à votre public, ou avoir une meilleure apparence sur votre site.

Par exemple, Target utilise la navigation par fil d’Ariane dans ses pages de produits (car qui ne se perdrait pas dans la section virtuelle des chaussures ?), mais utilise les symboles « / » et un texte simple en noir et gris. Dans ce cas, la variation subtile du design a du sens pour l’esthétique de leur site.

Gardez-le propre et épuré.

Votre navigation par fil d’Ariane est simplement une aide pour l’utilisateur, et idéalement ne devrait pas être remarquée à moins que l’utilisateur ne la cherche. Pour cette raison, vous ne voulez pas encombrer votre navigation de fil d’Ariane avec du texte inutile.

Eionet, par exemple, pourrait faire sans leur texte « Vous êtes ici ». Bien qu’il soit censé être utile, le texte encombre la page. Avec un bon design, une navigation par fil d’Ariane devrait être suffisamment perceptible sans introduction.

Considérez quel type de navigation par fil d’Ariane a le plus de sens pour votre site.

Il existe quelques types différents de fils d’Ariane que vous pourriez utiliser — basés sur l’emplacement, basés sur les attributs et basés sur l’historique. Les fils d’Ariane basés sur l’emplacement montrent à l’utilisateur où il se trouve dans la hiérarchie du site. Les fils d’Ariane basés sur les attributs montrent aux utilisateurs dans quelle catégorie se trouve leur page. Enfin, les fils d’Ariane basés sur l’historique montrent aux utilisateurs le chemin spécifique qu’ils ont emprunté pour arriver à la page actuelle.

Bed Bath & Beyond utilise la navigation par fil d’Ariane basée sur les attributs pour montrer aux utilisateurs de quelle catégorie relève leur page de produits, afin que les utilisateurs puissent cliquer à nouveau sur « Cuisine » ou « Petits appareils électroménagers » pour parcourir des articles similaires. Ce type de navigation par fil d’Ariane est le plus efficace pour les clients de Bed Bath & Beyond. Lorsque vous créez une navigation par fil d’Ariane, considérez ce qui est le plus utile pour les visiteurs de votre site.

Connaissez votre public.

Les meilleures pratiques en matière de navigation par fil d’Ariane incitent les concepteurs de sites Web à placer la navigation en haut de la page — mais Apple, l’une des entreprises les plus précieuses de tous les temps, défie cette logique en plaçant sa navigation par fil d’Ariane au bas de son site. En définitive, il est essentiel de connaître son public. Les clients d’Apple sont généralement des technophiles et trouveraient probablement la navigation s’ils en avaient besoin. Tenez compte des besoins de vos clients et mettez en place des tests A/B si vous n’êtes pas sûr.

En fin de compte, la navigation par fil d’Ariane est un outil efficace pour faciliter la navigation sur votre site, mais vous devez suivre les meilleures pratiques de conception pour vous assurer que vous tirez parti de l’utilité de l’outil. Pour des conseils supplémentaires en matière d’UX, consultez  » Le guide ultime de la conception UX « .