La navigation sur les sites web est une chose que beaucoup créent après coup, après avoir réfléchi aux pages et au contenu. Dans une enquête récente, seuls 50 % des internautes ont pu prédire où le contenu pertinent serait basé sur la structure de navigation standard d’un site web.
Si la moitié de vos visiteurs ne trouvent pas la page qu’ils recherchent, c’est énorme problème d’UX.
Il en résultera des taux de rebond plus élevés, un temps de présence sur site plus court et des taux de conversion plus faibles.
Si vous gérez une boutique de commerce électronique, une mauvaise navigation peut également avoir un impact négatif sur vos résultats et vos revenus.
Dans cet article, je couvre de A à Z la navigation sur les sites web. Cela signifie que vous apprendrez les meilleures pratiques, les différents types de navigation et ce que vous devez faire précisément pour créer la navigation parfaite pour votre site.
Commençons !
Qu’est-ce que la navigation sur un site web ?
La navigation sur un site web est le processus qui consiste à naviguer sur les pages, les applications et les sites web sur Internet. La technologie sous-jacente est appelée hypertexte ou hypermédia.
Les hypertextes ou médias sont des pages web textuelles qui utilisent des hyperliens pour les relier à d’autres pages sur Internet. Un hyperlien est un lien qui conduit votre navigateur web à une URL.
L’URL indique à quel fichier le navigateur doit accéder depuis le serveur et il télécharge et affiche les données de manière à ce que l’utilisateur puisse les voir.
Des liens internes mènent à différentes pages sur le même domaine. Les liens externes mènent à des pages différentes sur un autre domaine, un site web et un serveur complètement séparés.
La navigation sur le site web utilise des menus avec des liens internes qui permettent aux visiteurs de trouver facilement la page qu’ils recherchent. Une bonne navigation est un élément essentiel d’un site convivial.
Qu’est-ce qu’un menu de navigation de site web ?
Le menu de navigation d’un site web est un ensemble de liens, généralement vers des pages internes, qui est organisé en menu. La plupart des sites web, y compris le nôtre, disposent d’un menu tout en haut de leur site.
Cette section est appelée « l’en-tête » d’un site web en matière de design et de développement de sites web. Parmi les pages les plus courantes auxquelles ces menus renvoient, on trouve
- À propos de nous.
- Blog.
- Contact.
- Caractéristiques.
- Plans / Tarifs.
Le menu peut, bien entendu, inclure des liens vers d’autres pages.
Quelle est la structure de navigation d’un site web ?
La structure de navigation d’un site web décrit comment les différentes pages de votre site sont organisées et reliées entre elles.
Par exemple, certaines pages et certains contenus ne peuvent être atteints qu’en visitant une page spécifique. Les concepteurs et les développeurs web planifient souvent la structure de navigation lorsqu’ils créent un nouveau site web.
Dans cet exemple, les pages À propos, Plans, Contact et Blog sont accessibles à partir du menu d’accueil. Pour accéder aux pages Mission et Équipe, vous devez d’abord visiter la page À propos.
Pourquoi la navigation est-elle importante sur un site web ?
Dans l’introduction de cet article, vous avez appris que 50 % des internautes ne sont pas capables d’utiliser correctement un menu standard. Imaginez le nombre de personnes qui trouveraient le bon contenu sans aucune navigation.
Avec une bonne approche de la navigation et des menus, vous pouvez ramener le pourcentage bien en dessous de 50 %. Cela réduira vos taux de rebond, augmentera votre temps moyen sur le site et entraînera une augmentation du trafic, des prospects et des clients.
Types de navigation sur le web
Il existe trois principaux types de navigation sur les sites web. Les voici :
Lorsqu’ils sont combinés correctement, ils aident vos visiteurs à naviguer sur votre site web et à trouver leur destination sans problème. Examinons chacun d’entre eux de plus près.
1. Navigation globale du site web
Grâce à la navigation globale du site, le menu et les liens sont identiques sur toutes les pages du site. De nombreux menus modernes sont conçus de cette manière, y compris le menu de notre propre site ici chez Kinsta : si vous faites défiler la page, le menu « suit ».
Dans la capture d’écran, vous pouvez voir notre menu d’en-tête simple et facile à comprendre. Il est le même sur toutes nos pages et mène à certaines de nos pages et contenus les plus importants.
Nous connaissons les informations cruciales qu’un client potentiel souhaite connaître sur une entreprise d’hébergement avant de prendre une décision. C’est pourquoi nous avons fait en sorte qu’il soit facile pour les clients potentiels de trouver nos plans, nos fonctionnalités et de nous contacter. Et, pour les utilisateurs existants, nous avons l’option de connexion qui leur permet de se connecter à leur tableau de bord MyKinsta.
Notre menu de pied de page est également global et met en évidence les sections essentielles de notre site web et certains contenus mis en avant.
Les menus globaux sont la norme pour la plupart des solutions CMS prêtes à l’emploi.
Chaque thème WordPress vous permet de proposer différents types et zones pour les menus de navigation. Si vous en avez besoin de plus, vous pouvez utiliser une extension de menu pour avoir plus d’options disponibles.
2. Navigation hiérarchique de site web
La navigation hiérarchique signifie que les menus changent en fonction du contexte de chaque page.
La plupart des journaux et des sites web purement axés sur le contenu disposent d’une navigation hiérarchique. Par exemple, si vous visitez la page d’accueil d’un journal, vous verrez généralement des liens vers les principales catégories de nouvelles dans le menu d’en-tête.
Si le menu était global, il resterait le même après avoir cliqué sur une catégorie différente. Mais comme il est hiérarchique, il révèle de nouveaux liens qui mènent à des sous-catégories de la page de catégorie que nous visitons.
Sur la page Science du New York Times, vous ne voyez pas du tout le menu de premier niveau. Au lieu de cela, vous voyez des liens vers différentes sous-sections de la recherche et des articles scientifiques.
C’est ce changement qui distingue ce menu d’un menu global ordinaire que l’on trouve sur la plupart des petits sites.
3. Navigation locale sur le site web
Contrairement à la navigation hiérarchique ou globale, la navigation locale sur un site web fait référence à des liens internes qui sont inclus dans le contenu lui-même. En général, l’utilisateur se voit proposer des options au même niveau de la hiérarchie ou à un niveau plus profond, ou des liens pour naviguer vers d’autres pages pertinentes.
Les sites web de magazines en sont un bon exemple. Ils utilisent souvent des liens pour aider les lecteurs à explorer le contexte plus profond d’un certain article. S’ils mentionnent un incident qu’ils ont couvert dans le passé, ils établiront un lien vers cet article, au lieu de l’expliquer en profondeur.
Mais elle n’est pas réservée aux seuls magazines et sites d’information. Les boutiques de commerce électronique s’appuient fortement sur ce type de menu de navigation pour présenter les produits de la même catégorie.
Les liens internes sont également un aspect crucial du référencement en général, et plus particulièrement du référencement WordPress, et c’est donc désormais une pratique courante pour toute personne qui gère un site web.
Exemples de navigation sur un site web
Plutôt que de papillonner sur la théorie, plongeons dans quelques exemples. Je parlerai d’un site d’information et du thème WordPress Twenty Twenty.
Site d’information : New York Times
Au premier coup d’œil, on pourrait croire que le New York Times utilise principalement un menu d’en-tête unique et global de ses catégories.
Mais cela ne s’arrête pas là. Le NYT utilise tous les types de navigation dans ses centaines de pages de catégories et ses millions d’articles.
Types de navigation utilisés :
- Hiérarchique.
- Globale.
- Locale.
Examinons les différents modes de navigation dans l’en-tête de chaque page.
Page d’accueil
Dans la section d’en-tête de son site web, il comprend deux menus, un menu global extensible au-dessus du logo et un menu hiérarchique en dessous de l’en-tête. En gros, c’est comme une configuration de menu d’en-tête et de sous-en-tête.
Si vous développez le menu hamburger d’en-tête, il se transforme en une colonne latérale sur la gauche, où il y a une grande marge avec la plupart des résolutions modernes.
Il ne s’efface pas et n’utilise pas de superposition pour masquer le contenu du site.
Page d’accueil (mobile)
Examinons la même section d’en-tête sur mobile. La majorité des internautes accèdent à des sites d’information par le biais de leur smartphone, l’expérience mobile est donc peut-être plus importante que celle d’ordinateur de bureau.
Le menu de sous-en-tête de la catégorie d’actualités ne fait pas partie de la page d’accueil sur le mobile. Au lieu de cela, vous n’avez que l’option extensible disponible.
Lorsqu’il est développé, il devient un menu plein écran et couvre entièrement tout le contenu de la page d’accueil.
Il comprend toutes les options du menu principal sur les ordinateurs de bureau et les liens sont soigneusement organisés par catégorie.
Page de catégorie
Sur la page des catégories, sous le menu hamburger, vous trouverez un lien vers un autre sous-ensemble de catégories.
Cela permet aux personnes qui ne s’intéressent qu’à un domaine spécifique dans le cadre d’un sujet plus large de trouver plus facilement des articles qui pourraient correspondre à leurs intérêts.
Page de catégorie (Mobile)
Sur mobile, ces pages de catégories comprennent le même menu et la même structure d’en-tête en hamburger que la version d’ordinateur de bureau. Le menu secondaire de l’en-tête n’est pas du tout masqué pour faciliter la navigation et la découverte du contenu.
Une autre raison pourrait être que de nombreuses expériences mobiles commencent par une recherche ou des réseaux sociaux, plutôt que de visiter directement la page d’accueil du NYT.
Article individuel
Pour les articles individuels, l’en-tête flottant indique la section dans laquelle vous vous trouvez actuellement, mais il ne comporte que le menu global extensible (avec la boîte de recherche).
Article individuel (Mobile)
Sur mobile, la navigation est propre car le seul menu est celui en hamburger de l’en-tête.
Pied de page
Le menu de pied de page NYT est le même sur la page d’accueil, les pages de catégories et les articles individuels.
Pied de page (mobile)
Sur mobile, le menu de bas de page n’affiche que cinq éléments de menu, qui se développent tous en sous-sections une fois cliqués.
Par exemple, si vous cliquez sur la section Arts, vous pourrez parcourir ces sous-sections :
Comme le site web utilise JavaScript pour charger dynamiquement plus de contenu lorsque vous faites défiler la page, il peut sembler que le pied de page n’existe pas du tout.
C’est une astuce qui peut aider à gagner du temps sur le site et à inciter les lecteurs à lire plus d’articles, mais elle rend la navigation sur le site un peu plus difficile.
Mise en page du contenu
Certains pourraient arguer que le principal outil de navigation utilisé par les journaux et les blogs en ligne n’est pas seulement le menu. C’est la mise en page même du journal qui constitue l’épine dorsale de la navigation pour le NYT et d’autres sites similaires.
Tous les éléments mis en évidence sont cliquables et mènent à différentes pages internes du site du New York Times.
La mise en page du contenu est un autre élément clé de la navigation sur les sites web qu’ils mettent en œuvre sur leur page d’accueil et leurs pages de catégories.
Le thème WordPress Twenty Twenty
Une autre année, un autre thème WordPress par défaut. Cette fois, c’est Twenty Twenty, nous allons plonger en profondeur et voir ce qui a changé dans la navigation.
Je vais examiner s’il y a quelque chose de différent dans la façon dont les développeurs ont décidé d’aborder les menus et les liens internes avec cette nouvelle instance de WordPress.
Menu d’en-tête
Comme tout thème WordPress standard, la nouvelle version officielle comporte un menu sans fioritures dans la section d’en-tête. Vous pouvez sélectionner différents emplacements d’affichage et voici à quoi ressemble l’option Menu horizontal grand écrans :
D’autre part, l’option Menu étendu grands écrans ajoutera la possibilité de développer les liens de votre menu dans une barre justifiée en haut à droite.
La zone de contenu principale est teintée d’un gris foncé, ce qui permet à l’utilisateur de se concentrer sur le menu des liens.
Pied de page
Dans le pied de page, il n’y a pas de liens pour la navigation interne, à l’exception d’un simple lien « Haut de page » qui vous ramène en haut de la page.
Qu’est-ce qui fait une bonne navigation sur un site web ?
Une bonne navigation sur un site web est toujours conçue en pensant à l’utilisateur. Elle utilise un langage clair et facile à comprendre, et des liens vers les pages les plus importantes.
Elle utilise un grand espace blanc, des changements de couleur ou d’autres techniques de conception pour se séparer clairement du contenu principal. De plus, elle est plus facile à lire et à utiliser sur tous les appareils (mobiles et de bureau).
La navigation axée sur l’utilisateur signifie également qu’elle est contextuelle. Elle prend en considération l’expérience et les attentes de l’utilisateur. C’est peut-être la raison pour laquelle les journaux en ligne ne peuvent toujours pas s’affranchir de leur design « surchargé ».
Dans le contexte de la lecture d’un journal, c’est ce qu’attendent leurs utilisateurs et clients potentiels, ce qui inclut leurs menus très complets de catégories et sous-catégories.
Dans la prochaine section, je traiterai des bases de la création d’une bonne navigation pour votre site.
8 Principes pour l’amélioration de la navigation sur un site web
Même si vous êtes un débutant, vous serez en mesure de bien naviguer sur votre site web en suivant les conseils ci-dessous.
1. Faîtes un plan de la structure de votre page et la navigation
Avant même de commencer à rédiger le contenu de votre site web, faîtes un plan de la structure de vos pages et la navigation.
Le plan est une partie essentielle du processus visant à fournir à vos visiteurs une navigation satisfaisante. Vous pouvez utiliser un créateur de plan de site pour vous aider à créer rapidement des maquettes de ce que vous voulez que votre site web soit.
GlooMaps est un bon exemple d’outil de plan de site.
Vous pouvez créer gratuitement autant de documents que vous le souhaitez. Chacun d’entre eux aura une URL unique que vous pourrez ensuite partager pour recueillir des ressentis et permettre aux autres de le modifier. Une fois créée, votre URL sera disponible pendant 14 jours, à moins qu’elle ne soit revisitée. Chaque nouvelle visite prolonge la durée de vie du lien de 14 jours supplémentaires.
GlooMaps n’est pas le seul outil que vous pourriez utiliser, il en existe bien d’autres comme Octopus, VisualSitemaps, Creately, pour n’en citer que quelques-uns.
2. Suivre les normes établies
N’essayez pas de réinventer la roue. La navigation sur les sites web est plus une question de convivialité que de créativité.
Pour les éléments de design essentiels, comme l’emplacement de votre menu et la façon d’indiquer qu’il est extensible, suivez les normes connues.
Trois bandes horizontales, ou le signe « hamburger » ☰, est l’une des icônes les plus reconnaissables pour identifier un menu extensible. L’autre est constitué des trois points créant une ligne horizontale.
Si vous essayez d’être créatif et de développer une icône personnalisée, il y a de fortes chances que de nombreux visiteurs ne comprennent pas le but de votre design et aient du mal à trouver votre menu.
3. Utilisez le vocabulaire de vos utilisateurs
Au lieu de vous contenter de créer des liens vers les mêmes vieilles pages, d’utiliser le jargon standard du développement web ou de faire preuve de trop de créativité, utilisez un langage plus proche de ce que vos utilisateurs utilisent, recherchent et souhaitent.
Cette approche est bénéfique à la fois pour le référencement et l’ergonomie. Créez des pages qui reflètent ce que vos utilisateurs recherchent en ligne.
Vous pouvez ensuite créer des liens vers ces mêmes pages en utilisant les mêmes mots et expressions qui aident les utilisateurs à trouver votre site web sur Google.
4. Utiliser des menus responsive
Étant donné que plus de 52 % de l’ensemble du trafic en ligne est désormais mobile, une conception responsive et mobile est devenue une nécessité absolue.
Au lieu de menus qui continuent à sortir du cadre du navigateur web mobile ou qui sont trop encombrés, assurez-vous de mettre en place des menus mobiles extensibles.
Ce n’est pas pour rien que cela est devenu une norme industrielle. Les menus horizontaux avec du texte minuscule sont difficiles à lire, à cliquer et à utiliser correctement sur un mobile.
La bonne nouvelle est que tous les meilleurs thèmes WordPress sont livrés par défaut avec un design et des menus réactifs. À moins que vous ne conceviez votre site WordPress à partir de zéro, WordPress vous couvre ici.
5. Tirez avantage de votre menu de pied de page
Les lecteurs qui continuent à lire et à faire défiler votre site web sont plus engagés que l’utilisateur moyen. Profitez-en et utilisez l’espace en bas de chaque page pour mettre en valeur les contenus de valeur.
Comme le pied de page n’occupe pas l’espace « au-dessus du pli », vous pouvez obtenir une structure granulaire et inclure plusieurs catégories, et même mettre en évidence des pages ou des articles essentiels.
À titre d’exemple, regardez comment nous traitons notre pied de page sur cette même page. Nous couvrons les pages essentielles, notre entreprise, la répartition de nos ressources, et bien d’autres choses encore.
Le pied de page vous permet de mettre en évidence le contenu que vous « ne pouviez pas faire entrer » dans votre en-tête.
6. Utiliser la couleur et l’espace blanc pour séparer la navigation des autres éléments
Utilisez la couleur, les polices et l’espace blanc pour séparer vos menus de votre contenu principal et de vos colonnes latérales. Indiquez clairement où commence et où finit la navigation.
Peu importe la langue utilisée dans vos menus ou les pages auxquelles vous accédez si les visiteurs de votre site web ne trouvent même pas le menu au départ.
7. Éviter les menus déroulants
Pour la plupart des sites web (pas tous), les menus déroulants ne sont ni nécessaires ni utiles. Lorsque les utilisateurs voient un lien dans un menu, on suppose qu’il est cliquable. À moins que la conception ne le sépare des liens cliquables, cela peut entraîner une confusion.
Le fait d’avoir trop de liens dans votre menu principal peut également avoir un impact négatif sur l’ergonomie de votre site web.
La mise en place d’une navigation hiérarchique et locale en lieu et place des menus déroulants peut permettre un flux plus fluide des utilisateurs. Elle permet également aux utilisateurs d’interagir avec plusieurs pages et de passer plus de temps sur votre site, au lieu de naviguer dans une liste géante de liens.
8. Aplatissez votre structure
Si vous voulez que les visiteurs puissent explorer toutes les pages de votre site web le plus facilement possible, maintenez une structure de navigation aussi plate que possible.
Au lieu de créer des liens vers une poignée de pages à partir de votre page d’accueil, puis de les développer avec toujours plus de sous-pages et de catégories, gardez les choses simples.
Assurez-vous de créer des liens vers des catégories importantes à partir de votre page d’accueil, et de créer des liens vers une seule couche de sous-catégories ou vers des pages d’articles uniques à partir de là.
Il est prouvé que l’aplatissement de la structure de cette manière a un effet positif sur le référencement et peut conduire à des sitelinks Google. Ne laissez donc pas la structure de votre site web devenir trop désordonnée !
Tendances 2024 de menu de navigation de site web
Bien que les grandes tendances de ces dernières années en matière de design de sites web comprennent des éléments de conception en 3D et l’intégration de photographies sur mesure dans des designs créatifs, les menus n’ont pas connu une année très excitante.
Mais cela ne signifie pas que rien n’a changé. Voici un aperçu de quelques-unes des tendances les plus importantes de ces dernières années.
Catégories extensibles dans les menus mobiles en plein écran
Uber et d’autres sociétés géantes au design moderne et remanié ont mis à jour leurs menus pour qu’ils soient plus faciles à utiliser.
Un problème pour ces entreprises est qu’elles ont tellement de produits et de catégories différents qu’il peut être impossible de les inclure dans un seul menu de manière raisonnable.
Cela conduit à des menus mobiles clairs, catégorisés et extensibles, au lieu d’une simple liste interminable de liens.
Menus d’en-tête flottants
La tendance universelle des menus de ces dernières années est peut-être le menu d’en-tête flottant.
Un menu d’en-tête flottant est un menu qui se colle en haut de la fenêtre de votre navigateur web lorsque vous faites défiler la page (comme celui que nous utilisons pour kinsta.com). Généralement, il fait partie d’une section d’en-tête qui comprend un petit logo et peut-être aussi une barre de recherche.
Il est difficile de s’y opposer, car l’accès permanent à un menu facilite la navigation interne. Ce type de menu est inclus dans de nombreux thèmes WordPress et la tendance ne semble pas vouloir s’arrêter.
Menus déroulants superposés sur ordinateur de bureau
L’un des conseils les plus élémentaires pour la navigation sur un site web est de ne pas utiliser les menus déroulants. Et pour cause.
Mais cela ne signifie pas qu’ils sont intrinsèquement terribles. Les menus déroulants sont simplement délicats à mettre en œuvre d’une manière qui ait un sens sur l’écran d’un ordinateur.
Avec une superposition en couleur sur le contenu principal, ils peuvent forcer l’attention de l’utilisateur à 100 % sur le menu. Vous disposez également de meilleures options pour les catégories extensibles que l’affichage de liens supplémentaires au survol.
Ces facteurs se sont conjugués pour donner naissance à une tendance croissante en 2019. En fait, de nombreux sites web et modèles innovants comportent des menus déroulants superposés sur ordinateur de bureau.
Résumé
Cet article devrait vous avoir permis de comprendre clairement ce qu’est la navigation sur un site web et certains de ses points clés.
La navigation sur les sites web devrait toujours être axée sur la simplicité et la clarté, plutôt que sur des couleurs intenses et un design créatif. Comme la navigation et les menus de votre site doivent tenir compte à la fois des utilisateurs de bureau et des utilisateurs mobiles, les choses peuvent devenir plus compliquées et il peut être judicieux de faire appel à un développeur web.
Essayez toujours de suivre les meilleures pratiques en matière de conception de menus de sites web pour vous assurer que vos visiteurs et les moteurs de recherche peuvent naviguer facilement dans votre contenu.
La facilité d’utilisation et la clarté resteront des priorités pour l’avenir. Ainsi, si vous pouvez maîtriser le language de vos utilisateurs et créer une structure qui leur convienne, vous serez en mesure de pérenniser vos menus.
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire