Conduire rapidement et intuitivement les internautes vers l’information qu’ils sont venus chercher est le premier objectif d’un bon site web. Pour indiquer le chemin le plus court, rien de mieux qu’une navigation efficace, agréable et conviviale. Barre de menu, call-to-action et fil d’ariane, Wekiu décrypte les éléments à connaître pour mener vos visiteurs à bon port !
La navigation de votre site internet : la boussole de votre visiteur !
Bravo : votre projet professionnel ou personnel existe dans la vraie vie et vous voulez utiliser Internet pour le faire connaître. Vous allez donc créer votre site. Bienvenue chez Wekiu !
Peu importe que vous ayez beaucoup ou peu de contenu, il est nécessaire de le présenter de façon organisée à vos lecteurs. Car si tout est ordonné dans votre tête, vos visiteurs, eux, ont besoin d’un peu de repères pour s’orienter. A défaut d'accéder en quelques clics à ce qu’ils sont venus chercher, ils quitteront bien vite votre site… et pourraient ne jamais revenir.
Qu’est-ce que la navigation d’un site internet ?
La navigation de votre site permet à vos visiteurs de suivre un “parcours utilisateur” (un “user path”) pour consulter votre contenu. Elle est composée de toutes les interfaces (menus, barre de navigation, boutons, liens…) qui les guideront dans les différentes étapes jusqu’à trouver ce qu’ils cherchent (un acte d’achat, une information, un formulaire de contact…).
La barre de navigation (ou menu) : la carte au trésor !
Le premier élément qui se présente à eux est la barre de navigation. Dite aussi menu, elle se positionne le plus souvent dans l’en-tête du site (le header), à proximité du logo.
Sur écran d’ordinateur, elle est généralement disposée horizontalement.
Sur les écrans plus petits des tablettes et smartphones, la navigation est habituellement accessible en cliquant sur un bouton avec trois lignes horizontales, indiquant un menu dit burger, qui se déploie au clic.
Dans cette navigation, on trouve des titres cliquables, des hyperliens, qui contiennent des adresses URL identifiants des pages (si votre site est un multipages) ou des ancres, qui permettent d’accéder directement aux paragraphes souhaités.
Ces barres de menu peuvent être fixes (rester affichées en haut de l’écran pendant toute la navigation de l’utilisateur) ou mobile (et disparaître quand le visiteur se déplace dans la page en scrollant).
A l’opposé de ces menus d’en-tête, il existe des menus de pied de page dans le footer d’un site. Longtemps ignorés, ces menus de footer prennent de plus en plus d’importance car ils offrent une deuxième zone dédiée à la navigation. Elle peut être identique au menu du header (peu d’intérêt !) ou peut présenter des chemins différents, avec notamment des pages enfants à mettre en avant (voir plus bas).
Comment construire votre navigation ?
Votre navigation doit indiquer la structure de votre contenu, comme des titres de paragraphes structurant un article ou des panneaux signalétiques indiquant l’organisation des rayons dans un magasin. Avant donc de rédiger vos titres ou vos panneaux, il faut donc créer et classer le contenu.
Pour effectuer ce classement, il est fortement conseillé de construire l'arborescence de votre site. A la manière d’un arbre, vous partez du tronc, l’essence même de votre activité et de votre site : je suis ostéopathe ; j’ouvre un e-commerce de pièces détachées ; je partage du contenu sur la permaculture ; je suis une agence immobilière ; je propose des cours de physique-chimie en ligne…. Puis, sous forme de “branches”, vous listez ce qui découle de votre activité : articles à vendre ; détails des prestations ; qui sommes-nous ; tarifs ; inscriptions… Chaque branche correspond à une page (ou à une section, c’est-à-dire un paragraphe) de votre site et donc à une information délivrée à votre visiteur.
Jusqu’où détailler la navigation ?
Selon votre activité, vous aurez peut-être besoin de détailler le contenu de ces pages et de créer des accès à ces sous-pages directement depuis le menu (cours de physique > niveau collège, > niveau lycée, > niveau supérieur). Le premier niveau de pages s’appelle des pages PARENTS, et le deuxième niveau, des pages ENFANTS.
Dans la barre de navigation, l’accès à ces pages enfants peut s’effectuer sous forme d’une liste déroulante sous les titres des pages parents. Mais attention à ne pas abuser de ces menus déroulants qui pourraient mal ou trop orienter vos visiteurs.
Réfléchissez comme vos visiteurs
Pour construire une navigation équilibrée et efficace, il n’y a pas de méthode infaillible. Mettez-vous à la place de vos visiteurs !
Exemple 1 : vous préparez un voyage mais n’avez pas encore une idée très précise de votre destination, de la durée ou de votre budget. Auriez-vous envie d’être immédiatement canalisé.e vers une offre fermée “Voyage à Bali pour 15 jours” ? Ou préféreriez-vous avoir une large proposition de choix à comparer, en cliquant sur un titre généraliste « Voyages en Asie » ? La deuxième solution certainement !
Exemple 2 : vous êtes un.e élève de terminale et cherchez des cours de soutien en histoire : votre recherche est précise et vous souhaitez accéder au cours d’histoire de votre niveau dès la page d’accueil, sans itinérer dans les propositions de niveaux ou de cours qui ne vous concernent pas.
Avant de construire des navigations à rallonge avec des listes déroulantes trop nombreuses et trop longues dès votre page principale, construisez les parcours utilisateurs dont vos visiteurs ont besoin en vous mettant à leur place.
Quels sont les éléments graphiques nécessaires pour la barre de navigation ?
On retrouve des éléments communs à une grande majorité de navigation pour faciliter leur lisibilité et leur prise en main. Une disposition claire, en tête de site et légèrement dynamique, avec une modification de l’affichage des titres au survol de la souris et à la sélection de menu (police en gras, ou fond de couleur…) accompagnée d’un changement de disposition sur mobile (le fameux menu burger des affichages “responsive”) sont des attentes légitimes de la part de vos visiteurs.
Pour naviguer, il n’y a pas que la barre…
Les call-to-action
Les boutons cliquables font également partie des incontournables d’une bonne navigation. Appelés CTA, call-to-action, puisqu’il vous incite à… passer à l’action, ils offrent une grande interactivité. Ils sont faciles à dispatcher à divers endroits de votre site et offrent une grande diversité de commande : valider (une commande, un formulaire de contact…), revenir en arrière (retour à la page d’accueil, continuer vos achats…), contacter (connecté avec un numéro de téléphone, ils permettent d’appeler en un clic), naviguer vers une autre page ou un autre site (laisser un commentaire sur une plateforme de review…), partager du contenu sur les réseaux sociaux…
Le fil d’ariane
Pour les sites présentant de nombreux niveaux de navigation, le fil d’ariane peut être utile. A la manière du Petit Poucet (on dit d’ailleurs breadcrumbs, miettes de pain, en anglais), ce fil liste les pages que vos visiteurs ont empruntées pour arriver au contenu final. Pour les sites de e-commerces proposant une grande variété de produits, cet outil peut être intéressant : mode > accessoires > porte-monnaie > en tissu > imprimés “tropical”. Chaque élément est cliquable et permet de revenir rapidement aux sélections précédentes.
La navigation est donc une affaire de clarté et de logique pour guider vos visiteurs dans l’utilisation de votre site internet. Avant de vous lancer dans votre première arborescence, nous vous conseillons de surfer sur des sites similaires au vôtre et d’examiner leurs choix en matière de parcours utilisateurs. A vous, ensuite, de créer votre propre carte jusqu’aux trésors de votre site !
