Navigation sur site web : comment la rendre claire et efficace

La navigation et ses éléments

Dans un monde idéal, chaque utilisateur commencerait par la page d’accueil et suivrait le parcours prévu vers la conversion.

Cependant, la réalité est totalement différente, et les utilisateurs se rendent sur n’importe quelle page du site web. La page d’accueil est rarement celle qui est la plus consultée. Si nous examinons la répartition du trafic total (100%) de la boutique en ligne, environ 30 % seulement des visites ont lieu sur la page d’accueil en elle-même, et les 70 % de visites restantes concernent d’autres pages (catégories, produits, contacts, etc.). Une navigation bien conçue et tous ses éléments jouent un rôle central dans le parcours d’un utilisateur sur un site ou sur une boutique en ligne. Par conséquent, nous devons comprendre le lien entre la navigation et ses éléments et l’expérience utilisateur.

Les éléments d’une navigation efficace devraient :

• être visibles,
• communiquer la position actuelle d’un utilisateur sur le site web,
• être capables de diriger l’utilisateur,
• être simples à utiliser.

Les éléments de base de la navigation

Menu de navigation

Les utilisateurs se représentent généralement la navigation principale sur un site ou une boutique en ligne sous la forme d’un menu horizontal en haut de la page – dans l’en-tête. Un clair avantage de ce type de navigation est qu’il se conforme à la façon dont les utilisateurs parcourent le site web – de haut en bas, de gauche à droite. C’est une bonne solution pour un menu de navigation ou la navigation en général, tels que des services ou des catégories basiques de produits.

En-tête rémanent

On utilise généralement un en-tête rémanent pour attirer l’attention de l’utilisateur sur l’en-tête (sections principales avec les éléments de navigation). Cet en-tête se trouve toujours au même endroit et reste visible même lorsqu’on fait défiler la page. Cela permet un accès rapide aux éléments de navigation et de recherche sans avoir besoin de défiler vers le haut de la page. Il augmente la probabilité que les utilisateurs utiliseront ces éléments pour voir plus de produits.

Page d’accueil et logo

Parmi le peu de choses sur lesquelles les utilisateurs peuvent se fier, c’est que chaque site web est doté d’une page d’accueil (début), qui est perçue comme le point de départ principal qui fournit des informations ainsi qu’une introduction à ce que les utilisateurs vont trouver sur le site. Trouver ces informations fait particulièrement du sens pour les visiteurs qui arrivent sur le site web à partir d’une recherche organique ou d’une publicité et qui vont directement sur d’autres pages à un niveau plus bas. Ensuite, ils souhaitent généralement consulter la page d’accueil pour découvrir ce qu’ils peuvent voir sur le site et quels types de pages il contient.

Si vous commencez à suivre le comportement des utilisateurs, vous découvrirez qu’ils reviennent souvent sur la page d’accueil lorsqu’ils se perdent, ont terminé de naviguer dans le site, ou souhaitent avoir plus d’informations sur la boutique.

Barre latérale

Selon le type de contenu principal, elle se situe à gauche ou à droite de la page. La barre latérale est souvent utilisée pour soutenir la navigation principale. Lorsque les utilisateurs choisissent la catégorie de premier niveau, ils verront les sous-catégories dans la barre latérale.

Les éléments de navigation de la barre latérale sont une excellente solution pour les boutiques en ligne ou les sites contenant une grande quantité d’informations qui ont besoin d’être structurées. En plus des sous-catégories, la barre latérale fournit suffisamment d’espace pour les filtres de produits.

Pied de page

Le bas de chaque site web ou boutique en ligne s’appelle un pied de page. Ils peuvent revêtir des formes différentes selon le type de contenu. Toutefois, cet espace utile est souvent sous-estimé dès la conception du site web. Nous prenons pour acquis que les utilisateurs ne prêtent pas beaucoup d’attention au bas de la page. Mais en fait, ils le font. Cet élément, par conséquent, ne remplit pas tout son potentiel. Si des utilisateurs se rendent jusqu’au bout de votre site, c’est qu’ils sont probablement intéressés par votre contenu.

Par exemple, les utilisateurs se rendent généralement sur le pied de page lorsqu’ils ont terminé leur visite (lire l’article ou chercher plus de contenu), ou ils défilent intentionnellement jusqu’au pied de page parce qu’ils s’attendent à trouver des informations précises, telles que les coordonnées.

Le fil d’Ariane

La navigation en fil d’Ariane (fil d’ariane) est un ensemble de liens de navigation organisés de manière hiérarchique qui apparaissent en haut de la page, souvent directement en dessous de la navigation principale. La navigation en fil d’Ariane est un élément de navigation classique pour les boutiques en ligne. C’est l’un des quelques éléments de navigation qui indiquent la position actuelle de l’utilisateur sur le site web.

La barre de navigation est un élément important pour tous les utilisateurs. Toutefois, si nous devons réduire ce groupe, nous devrions nous concentrer principalement sur les utilisateurs qui ont atteint le site autrement que par la page d’accueil (recherche organique, publicités, liens partagés) ou ont utilisé la recherche interne dans la boutique en ligne.

Boutons et liens

Les boutons et les liens hypertexte sont des éléments de navigation courants que l’utilisateur rencontre partout. La question, cependant, reste si nous savons lesquels utiliser et quand les utiliser. Les boutons définissent habituellement des actions claires qui permettent à l’utilisateur de se déplacer dans le site ou les mènent vers un but précis (conversion).

Nous pourrions simplifier cela et dire que les boutons définissent des actions, qui affectent le site même ou la boutique en ligne. Par exemple : créer un compte utilisateur, passer une commande, confirmer une transaction, etc. Au contraire, les liens sont utilisés pour des actions ayant moins d’importance qui n’affectent pas le comportement du site et effectuent principalement une tâche de navigation.

• Un bouton doit toujours ressembler à un bouton. Il doit contenir un appel à l’action clair sous forme d’un texte entouré d’un cadre suffisamment large. Les boutons contiennent également souvent des icônes qui illustrent l’action effectuée.
• Soyez cohérent. Les boutons et les liens qui effectuent la même tâche doivent toujours avoir la même apparence partout sur la page.
• N’utilisez jamais des boutons semblables pour des actions différentes. Si vous avez besoin de plusieurs boutons l’un à côté de l’autre, mettez en évidence leur importance et leur hiérarchie. Par exemple, le bouton standard fait référence à une action principale, un bouton texte avec un cadre (souvent appelé “bouton fantôme”) représente une action secondaire, et le lien est seulement la troisième option.
• La couleur et le nom du bouton (actions effectuées) ont un impact éternel sur l’expérience client. C’est particulièrement vrai dans le cas des décisions oui/non. Par exemple :

• Les liens hypertexte font parmi des éléments de navigation les plus utilisés sur les sites web. Cependant, afin de conserver leur aspect pratique, ils doivent remplir au moins les deux conditions suivantes : les liens devraient toujours être clairement séparés visuellement du reste du contenu (par exemple avec la couleur) et devraient toujours être soulignés.

Menu de navigation

Recherche vs. menu de navigation

Nous pourrions dire qu’en plus du menu de navigation, la recherche est l’un des éléments de navigation les plus importants et mérite par conséquent notre attention. Cependant, la question reste :

“Pourquoi et quand les utilisateurs préfèrent-ils utilisent la recherche plutôt que le menu de navigation ?”

En général, les utilisateurs ont tendance à préférer la recherche au menu de navigation s’ils savent qu’un site web ou une boutique en ligne peut satisfaire leurs besoins grâce à une offre suffisamment étendue. Tout simplement, s’ils savent qu’ils peuvent le produit ou la catégorie qui les intéressent dans la boutique.

Ils s’attendent à, une fois saisie la requête de recherche, obtenir les résultats qui vont les rapprocher de leur objectif. Des études montrent que près de 60 % des utilisateurs quittent un site ou une boutique en ligne s’ils ne trouvent pas ce qu’ils cherchent.

La préférence de l’utilisateur pour la recherche plutôt que pour le menu de navigation dépend de plusieurs facteurs. Cela dépend toutefois du type d’utilisateur (visiteur) et du segment du site web.

L’impact de la recherche sur différents segments

Un exemple typique de l’utilisation de la recherche est le segment des livres et des jeux, où seulement 20 % des utilisateurs (sur un trafic total de 100 % dans la boutique en ligne) utilisent en moyenne la fonction de recherche. Néanmoins, la recherche dans ce segment représente jusqu’à 45 % du chiffre d’affaires. Une autre catégorie est le segment B2B, dans lequel jusqu’à 92 % de tous les achats proviennent de la recherche.

Si vous êtes souhaitez connaître l’impact de la recherche sur des segments individuels et savoir comment l’optimiser pour augmenter vos ventes, téléchargez notre étude gratuite Recherche : Bases de référence & Observations sur luigisbox.com/etudes-et-rapports

La recherche et les utilisateurs

Si nous nous concentrons uniquement sur la page d’accueil, nous voyons que près de 40 % des utilisateurs dans l’ensemble du trafic préfèrent utiliser la recherche plutôt que le menu de navigation.

Qu’un utilisateur qui arrive sur la page d’accueil décide de continuer ou de parcourir le menu de navigation dépend du type d’utilisateur (client) impliqué.

Chacun des utilisateurs qui visitent la boutique en ligne se comporte différemment et a des motivations différentes. Heureusement, nous pouvons répartir ces utilisateurs en 3 types principaux de visiteurs pour tirer des généralisations.

1. Les visiteurs qui veulent acheter des produits. Ils savent exactement le produit qu’ils veulent ainsi que les propriétés et les paramètres qu’il devrait avoir, et leur seul objectif est de trouver le produit aussi rapidement que possible pour le commander. Pour ce type d’utilisateur, une recherche efficace et un processus d’achat optimisé sont les moments clés.
2. Les visiteurs qui font des recherches. Ces clients savent plus ou moins ce qu’ils veulent. Leur objectif est de trouver le plus d’informations possible sur les produits pour ensuite décider d’acheter ou non. Leur processus de décision est plus long, mais ils peuvent changer d’objectif, et une recherche optimisée peut influencer leur comportement.
3. Les visiteurs qui “se promènent”. Ils se rendent souvent sur leurs boutiques en ligne préférées pour découvrir les nouveautés sans avoir l’intention d’acheter. Ils sont curieux, aiment voir les contenus et réfléchir à ce qu’ils pourraient acheter à l’avenir.

Cependant, en général, les utilisateurs ne connaissent pas le nom exact de la catégorie, mais ils savent quels produits elle contient. Ils ont ensuite tendance à utiliser la recherche pour obtenir les détails de n’importe quel produit (qui se situe dans la catégorie souhaitée ou une similaire) avec l’intention de trouver le produit désiré en suivant le fil d’Ariane.

• Le champ de recherche doit être facilement accessible et toujours visible.
• Il doit être rapide et réactif au moindre changement dans la requête.
• La saisie semi-automatique devrait afficher des résultats dès le premier caractère saisi.
• La recherche devrait automatiquement reconnaître les fautes de frappe, les différentes formes de mots et de conjugaison.
• Les variantes du produit devraient déjà être affichées dans la saisie semi-automatique.
• La recherche devrait reconnaître et recommander des synonymes et suggérer des phrases.
• Elle devrait couvrir l’intégralité du contenu du site (produits, catégories, balises, mots clés, pages de texte, articles, etc.).
• Des filtres pertinents (facettes) pour le groupe de résultats en cours devraient être disponibles dans les résultats de recherche.

Pourquoi la règle des trois clics est absurde

La règle des trois clics suggère :

“L’accès à n’importe quelle page d’un site ne devrait pas nécessiter plus de 3 clics (ou appuis sur l’écran tactile). Parallèlement, les informations les plus importantes devraient être accessibles en 3 clics.”

Cette règle part du principe que les utilisateurs sont frustrés et ne terminent pas des tâches qui nécessitent plus de clics.

Il s’agit toutefois d’une heuristique non officielle qui n’est pas étayée par des données. Néanmoins, les concepteurs appliquent souvent cette règle pour créer la navigation d’un site web, rechercher des informations, remplir un formulaire, etc.

Compter les clics ne présente aucune utilité pour plusieurs raisons :

1. Le nombre de clics dépend non seulement de la conception mais également de la complexité de la tâche. Par conséquent, nous ne pouvons pas définir un clic comme une valeur absolue spécifique.
2. Tous les clics ne se ressemblent pas, certains peuvent présenter un temps d’attente plus long, par exemple (si une nouvelle page se charge), et d’autres peuvent être immédiats (l’extension d’un accordéon).
3. Le nombre de clics n’affecte pas le comportement utilisateur. Dans le monde réel, les utilisateurs n’ont pas à tout connaître et font souvent des erreurs. De ce fait, compter les clics n’a aucun sens.

Comment optimiser le menu de navigation

Ne masquez pas la navigation si vous n’y êtes pas obligé.

En concevant la navigation, n’oubliez pas que les utilisateurs devraient toujours voir ce qui compte le plus pour eux. Cette simple règle s’applique non seulement à la navigation, mais également aux autres contenus.

Lorsqu’ils conçoivent la navigation, les concepteurs veulent souvent gagner autant d’espace que possible et ont tendance à utiliser des éléments de navigation réactifs et mobiles tels que le menu hamburger menu, même lorsque ce n’est pas nécessaire et que cela pose un risque que les utilisateurs ne se servent pas du tout de la navigation. Il faut se rappeler que les utilisateurs ne peuvent pas utiliser ce qu’ils ne voient pas. Si nous masquons la navigation, nous ne faisons que rallonger et compliquer leur parcours.

Placez la navigation et les éléments de navigation là où les utilisateurs les attendent.

Les utilisateurs supposent souvent que la navigation se trouve à un endroit précis. Facilitez-leur la navigation et placez les éléments à l’endroit attendu : dans l’en-tête, la barre latérale ou le pied de page.

Séparez visuellement la navigation du contenu

La navigation ne devrait pas ressembler au reste du contenu, elle devrait être séparée et se démarquer. Utilisez des espaces blancs, jouez avec la typographie et utilisez bien sûr la couleur. Le but est de pouvoir clairement définir où la navigation commence et se termine.

Évitez d’intégrer des éléments dans le design du bouton

Les boutons ont une fonction précise, dont nous avons déjà discuté. L’utilisation de boutons en tant qu’éléments de navigation perturbe la hiérarchie des éléments de navigation sur la page et complique la lisibilité de la navigation dans son ensemble.

Utilisez des noms d’éléments clairs et descriptifs

Le nom des éléments de navigation peuvent influencer la ‘prise de décision des utilisateurs qui parcourent un site. Les noms doivent être sans ambiguïté, sans équivoque et concis. Ils doivent indiquer précisément la destination, où ils mènent et, surtout, utiliser un langage compréhensible. Le respect des règles sémantiques est essentiel dans ce processus car il garantit que le nom de chaque élément reflète précisément son objectif et sa destination, assurant ainsi une expérience de navigation intuitive pour les utilisateurs. En élaborant le nom des éléments de l’architecture informationnelle et de la navigation, vous devrez souvent être en mesure de prendre les bonnes décisions.

Limitez le nombre des éléments de premier niveau

Limitez le plus possible le nombre des éléments de navigation de premier niveau. Les études de marché mentionnent souvent le chiffre magique de sept comme l’option idéale (max. neuf). Une autre approche pour déterminer le nombre maximal d’éléments de premier niveau est qu’ils ne doivent occuper que 50 à 70 % de l’espace sur le site web. Le reste devrait être réservé aux produits saisonniers, aux promotions ou aux nouveaux produits.

La navigation sur le site devrait minimiser la nécessité d’interaction, c’est à dire, l’effort que les utilisateurs doivent faire en interagissant avec le site. Il existe deux bonnes raisons de limiter le nombre des éléments de premier niveau dans la navigation :

• Cela va permettre aux utilisateurs de mieux comprendre l’interface de navigation. Plus vous avez d’éléments de navigation, plus les utilisateurs auront du mal à se rappeler et à traiter les informations.
• Une navigation simple et claire avec peu d’éléments a un impact positif sur la stratégie de référencement.

Toutefois, comme je l’ai déjà mentionné, tous les utilisateurs ne s’attendant pas à atteindre la page d’accueil en cliquant sur le logo, il est donc préférable d’ajouter un élément appelé “Accueil” sur le menu de navigation principal. Les informations de contact sont un autre élément de navigation essentiel et est souvent l’une des pages les plus visitées.

Les visiteurs l’utilisent souvent pour vérifier la crédibilité d’une entreprise ou d’une marque, pour découvrir où elle est située, si elle a des magasins physiques et si ces derniers sont, par exemple, proches de chez eux.

Conservez une structure concise

Le nombre d’éléments dans la navigation est primordial, ainsi que leur ordre. En concevant la navigation, il est logique de classer les éléments par priorité. Allez de la priorité la plus haute à la plus basse. Cependant, il faut aussi prendre en compte l’effet de position en série, d’après laquelle les éléments les plus performants sont ceux trouvés au début et à la fin (notre cerveau arrive à mieux gérer ces éléments que ceux qui se trouvent au milieu de la navigation). Par conséquent, les éléments au début et à la fin de la navigation prennent plus d’importance pour les utilisateurs.

N’oubliez pas la recherche

La recherche est l’un des éléments de navigation les plus importants. Les utilisateurs s’attendent à ce qu’elle soit située tout près de la navigation principale, où elle sert d’élément de navigation secondaire. Si vous masquez ou placez la recherche à un endroit peu pratique, vous pourriez perdre une partie considérable de vos revenus. Près de 40 % des visiteurs utilisent la recherche sur la page d’accueil, et ce sont principalement des utilisateurs qui savent ce qu’ils veulent et sont décidés à acheter.

N’utilisez pas de menus déroulants

Les menus déroulants ne sont pas une bonne solution pour afficher les sous-éléments du menu de navigation. Principalement parce que le nombre d’éléments change généralement souvent et grandit rapidement. Ensuite, il arrive souvent que des éléments ne s’affichent pas correctement (ils ne tiennent tout simplement pas sur l’écran.) Un autre inconvénient des menus déroulants est qu’ils ne permettent pas de parcourir facilement des sous-niveaux supplémentaires.

Une telle mise en page vous permet également d’utiliser plus efficacement l’espace, par exemple, pour afficher des produits ou des publicités, et améliore l’expérience utilisateur (plus d’espace pour les éléments, une structure et une hiérarchie claires).

Analysez la façon dont les utilisateurs consultent les éléments du menu

Le processus de conception de la navigation ne se termine pas avec sa mise en œuvre. Il est essentiel de valider si la navigation est pratique pour les utilisateurs. Vous ne pouvez le faire qu’en surveillant leur comportement à l’aide de méthodes et d’outils différents.

Même après la mise en œuvre, vous pouvez vérifier le bon fonctionnement de la navigation en utilisant la méthode de tri de cartes ou le simple test de l’arbre.

L’un des outils les plus couramment utilisés est Google Analytics (section Comportement/Flux de comportement).

L’interaction des utilisateurs avec la navigation peut être évaluée à l’aide d’outils tels que Hotjar, Smartlook ou Clarity. Ces outils vous permettent de recueillir des données aussi bien quantitatives (clics sur la page, mouvement de la souris ou défilement) que qualitatives (enregistrements vidéo). Sur la base de ces outils et de ces méthodologies, vous pouvez effectivement améliorer l’état actuel de votre navigation et sa structure et prendre d’autres mesures pour l’améliorer. Par exemple, changer l’ordre des éléments du niveau principal, modifier leurs noms, etc.

Pour toute analyse, il est bon d’utiliser d’autres méthodes et de ne pas se fier aux résultats provenant d’une seule source. Aucune d’entre elles ne sera aussi précise que ce que vous espérez et aucune d’entre elles ne vous dira pourquoi les utilisateurs se comportent comme ils le font (vous pouvez découvrir les conséquences, mais pas la cause).

N’optimisez pas le menu en vous basant uniquement sur la page d’accueil

Par défaut, la page d’accueil représente environ 30 % de l’ensemble des visites sur le site web ou la boutique en ligne. Le reste de 70 % du trafic provient d’autres sites sur lesquels les utilisateurs se rendent, par exemple, la recherche organique, les publicités, les réseaux sociaux, etc. Il est donc important que la navigation soit intuitive sur chacune des sous-pages. Le moyen le plus simple d’y parvenir est d’identifier les sous-pages les plus populaires, en utilisant Google Analytics par exemple, et d’optimiser la navigation en fonction de la façon dont les utilisateurs se comportent sur celles-ci.

Menu de navigation mobile réactif

Il existe déjà des schémas prouvés et des normes pour la navigation mobile réactive. Ils peuvent être résumés en deux mots : “icône hamburger”. Il s’agit d’une icône composée de trois courtes lignes horizontales qui représente le menu principal. Par défaut, elle apparaît dans le coin en haut à droite du site web mobile et cliquer dessus fait apparaître le menu de navigation.

Même si l’icône hamburger est devenue la norme dominante, le fait d’ajouter le mot “Menu” aide les utilisateurs à naviguer et à mieux comprendre le sens de cette navigation masquée.

Les concepteurs utilisent souvent le menu mobile inutilement, en essayant de garder le design aussi réactif que possible. La clé est de conserver les éléments de navigation présents aussi longtemps que possible et de ne pas avoir peur de les combiner avec le menu hamburger.

Vous pouvez, par exemple, garder la boîte de recherche affichée, et montrer le bouton d’appel à l’action pour l’action la plus importante, et d’autres éléments, tels que les informations de contact, peuvent rester masqués dans le menu mobile. Veillez à ce que le numéro de téléphone dans la vue mobile se change en un texte cliquable.

• Contienne des éléments de navigation assez grands, qui sont faciles à taper. Pour cela, ils devraient faire au moins 9 mm carrés de large. Les zones larges sont généralement confortables pour la plupart des utilisateurs.
• Tous les textes et les libellés devraient être lisibles. La taille du texte de 16 pixels devrait suffire dans la plupart des cas – il s’agit d’un paramètre standard. Dans le cas de polices plus petites, vous risquez d’empirer l’expérience utilisateur.

Les options du menu hamburger dépendent du type et de la complexité du site web. Un menu simple avec les éléments affichés est suffisant pour un site de présentation classique. Sur des sites riches en contenu ou des boutiques en ligne, le menu hamburger lui-même peut être plus complexe.

Il est structuré, contient généralement des éléments déroulants pour afficher des niveaux plus bas et est souvent utilisé en combinaison avec d’autres éléments de navigation mobiles.

Un élément typique de la navigation mobile, qui complète le menu hamburger est la barre de navigation du bas.

Cette barre apparaît en bas de l’écran et contient les éléments de navigation clés ou des boutons. Dans les boutiques en ligne, il peut s’agir d’un panier d’achat, des produits favoris, etc.

Sur les sites web ou les applications, ce sont les éléments pour les actions effectuées le plus fréquemment et de manière répétée (tels que les mouvements de compte ou l’envoi d’argent sur une application bancaire).

Conclusion

En premier lieu, la navigation doit être pratique. Ensuite seulement, créative. Essayez de suivre les principes directeurs décrits plus haut, et vos clients trouveront toujours ce dont ils ont besoin. La facilité d’utilisation et la clarté sont des priorités qui ne changeront pas à l’avenir.