Piste de navigation


La piste de navigation ou breadcrumbs est une navigation secondaire au sein d’un site web. Elle offre aux utilisateurs la possibilité, sous forme de liens internes, de retrouver leur chemin vers la page principale ou de diriger vers des pages qui se trouvent à un autre niveau de la structure du site web[1]. La piste de navigation permet à l'utilisateur de retrouver quelles pages il a déjà visité. Cette navigation est structurée de manière hiérarchique et montre sous forme d’arbre le chemin depuis la page d’accueil vers la position actuelle de l'utilisateur. La piste de navigation s’affiche souvent en haut de la page et est en général un élément de design relativement discret et sobre.

Piste de Navigation

Contexte

En anglais, la piste de navigation s'appelle "breadcrumb" (littéralement : miettes de pain) et le terme découle du conte de fées "Hansel et Gretel" des frères Grimm. Dans ce conte de fées, les deux enfants utilisaient des miettes de pain pour retrouver leur chemin. Sur le web, le breadcrumb fait la même chose : il rend le chemin de l'utilisateur compréhensible et lui permet de sauter facilement d'un niveau hiérarchique à l'autre. La variante la plus utilisée peut être la suivante :

Page d'accueil > Wiki > Piste de navigation 

Présentation graphique de la piste de navigation

Les séparateurs sont souvent représentés par des flèches, d'autres symboles typographiques ou des boutons. En cliquant, l'utilisateur peut atteindre la page d'accueil ou la page principale du Wiki. Cependant, le dernier point de la navigation n'est pas cliquable. La piste de navigation est invariablement affichée dans la zone au-dessus du pli d'un site web ; mais elle demeure discrète en termes de taille de police et de couleur afin que la navigation principale ne tombe pas en arrière-plan. La cohérence revêt également une certaine importance : si une navigation secondaire est utilisée, elle devrait être disponible sur toutes les pages et sous-pages.

Types de piste de navigation

A strictement parler, la piste de navigation se distingue du chemin d'accès, car ce dernier peut être caractérisé par des sauts dans différents niveaux hiérarchiques, éventuellement circulaires et pas nécessairement logiques. En revanche, les données de la piste de navigation proviennent des clics que l'utilisateur a suivis. Selon la variante de navigation, la navigation est identique aux chemins de clic ou est relative à d'autres éléments et niveaux du site.

Les pistes de navigation peuvent être distinguées en fonction des niveaux relatifs du site ou des chemins d'accès auxquels elles se réfèrent :

  • Chemin du clic : Il s'agit d'une navigation basée sur le chemin qui trace le chemin de clic réel et affiche la position actuelle. Cette variante n'est pas pratique pour les chemins d'accès étendus et les sites web avec une structure profonde. D'autant plus que l'utilisateur peut réaliser les mêmes fonctions avec les boutons avant et arrière du navigateur. En outre, la mise en œuvre dépend des données de l'analyse du chemin de clics, et les navigations basées sur le chemin du clic peuvent en conséquence devenir très longues.
  • Emplacement : Une piste de navigation basée sur l'emplacement indique la position actuelle de l'utilisateur dans la hiérarchie du site. Les sites web avec plus de deux sous-niveaux utilisent souvent cette variante pour accéder rapidement aux éléments principaux dans l'arborescence du site du site.
  • Catégorie : Les pistes de navigation basés sur les attributs ou catégories permettent à l'utilisateur de voir à quelles catégories appartient la page actuellement visité et quels attributs sont attribués à cette page. En règle générale, les aides à la navigation provenant des sites de e-commerce et des boutiques en ligne sont utilisées au niveau du produit et sont offertes avec des fonctions de recherche et de personnalisation. La mise en œuvre est en conséquence plus complexe, car la piste de navigation doit être adaptée aux fonctions du site web et éventuellement à la base de données.

Applications

La piste de navigation est principalement utilisée au sein de gros sites web et de portails qui possèdent une structure hiérarchique complexe. Une piste de navigation est aussi affichée dans les boutiques en ligne. Elle aide les internautes à retrouver leur chemin dans les catégories et dans les sélections de produits. Si un site web ne dispose pas d’une hiérarchie logique, la piste de navigation n’est alors pas recommandée. Un sitemap est un moyen utile et pratique pour construire une piste de navigation, car il reflète finalement l’architecture d’un site web.

Mise en place d'une piste de navigation sur un site web

Une piste de navigation peut être mise en place de différentes façons :

  • Plug-in : Selon le CMS (par exemple, WordPress), différents plug-ins peuvent être utilisés. Ce logiciel complémentaire vous permet d'effectuer des réglages et d'intégrer la navigation secondaire. En option, il est aussi possible d'intégrer des données structurées ou des microdonnées, afin que la piste de navigation puisse également être lu par les moteurs de recherche et affiché sur les SERP.
  • PHP et JavaScript : Des parties de code de différentes langues de programmation et de script peuvent être intégrées au code source. Par exemple, une fonction dans PHP serait définie, pour pouvoir être ensuite ouverte dans le document. Avec JavaScript, cela se fait de la même manière - même les sites générés dynamiquement peuvent se voir doté d'une piste de navigation.[2]
  • Content Management System : Certains systèmes CMS et boutiques en ligne offrent des pistes de navigation en option dans le backend. La mise en œuvre est généralement relativement simple et en quelques clics possible.
  • HTML : La variante manuelle est basée sur des liens regroupés en "div". Les chemins relatifs indiquent les pages précédemment visitées. Le design est conçu via CSS et doit être cohérent.

Avantages d'une piste de navigation

Une piste de navigation présente les avantages suivants pour la facilité d'utilisation des sites web :

  • Elle indique à l'utilisateur sa position actuelle par rapport aux autres niveaux hiérarchiques du site. La piste de navigation est donc une aide à l'utilisation et à la navigation.
  • Elle permet de naviguer dans la hiérarchie des pages en un clic. Lorsque les utilisateurs parcourent la recherche Google ou des liens profonds au milieu de l'architecture du site web, la piste de navigation est un outil de navigation rapide et sans complication.
  • La piste de navigation prend peu d'espace sur le site et est relativement facile à mettre en œuvre.
  • Selon Jakob Nielsen, expert en utilisabilité bien connu, elle ne cause jamais de problèmes avec les tests des utilisateurs. Les utilisateurs savent instinctivement quelle est cette navigation secondaire et comment ils doivent utiliser la piste de navigation.[3]

Importance pour le référencement

En se basant sur de nombreux test d’accessibilité, il a été prouvé que la piste de navigation assiste formidablement les utilisateurs lorsqu’ils surfent sur une page. D’un point de vue de l’accessibilité, la piste de navigation est donc indispensable. Dans une perspective d’optimisation on-page, il est important d’intégrer correctement la piste de navigation. Depuis quelques temps, les SERP de Google affichent aussi la piste de navigation dans la ligne de l’URL en tant que snippet enrichi. Il est recommandé de marquer la piste de navigation dans le code source en utilisant une microdonnée. Plus d’informations sur ce sujet peuvent être trouvées sur le Google Support.[4]

Dans un sens plus large, la piste de navigation aide les moteurs de recherche lors de l'exploration et de l'indexation des sites web. Grâce à elle, le maillage interne est renforcé et les correspondances thématiques des URL sont liées entre elles via l'élément de navigation. Cela signifie que dans la hiérarchie des pages, des répertoires plus profonds peuvent être atteints et explorés plus rapidement via la piste de navigation.

Références

  1. Les monstres de l’optimisation : Le monstre du maillage interne, Ryte Magazine, ouvert le 25.01.2018
  2. Cut & Paste Bread crumb script javascriptkit.com, ouvert le 19.09.2017
  3. Breadcrumb Navigation Increasingly Useful nngroup.com. ouvert le 19.09.2017
  4. About Breadcrumbs, developpers.google.com, ouvert le 19.09.2017