Vous travaillez dur pour créer d’excellents produits et attirer les visiteurs vers votre boutique WooCommerce. Cependant, les gens ne peuvent acheter que les produits qu’ils peuvent trouver. Une fois sur votre site, il est essentiel que les acheteurs aient un moyen facile de se déplacer sur votre site et de trouver les articles qui les intéressent. C’est pourquoi vous devez avoir une stratégie de navigation pour WooCommerce.
Qu’est-ce qui fait un bon menu de navigation WooCommerce ?
La disposition de la navigation de votre site a un impact significatif sur la façon dont les visiteurs découvrent les produits. Les acheteurs ne veulent pas passer au crible un catalogue confus pour trouver les articles qui les intéressent. C’est pourquoi il est essentiel de disposer votre menu de manière claire et concise.
Pour créer un menu de navigation WooCommerce convivial, vous avez besoin d’un étiquetage systématique et d’une hiérarchie organisée.
Les visiteurs doivent pouvoir trouver rapidement les articles qui les intéressent.
Les visiteurs doivent rapidement savoir où aller après avoir atterri sur votre page d’accueil. Ils ne doivent pas avoir à réfléchir consciemment à la façon de se déplacer sur le site ou à l’endroit où ils doivent regarder pour cliquer.
Les visiteurs doivent savoir rapidement où aller après avoir atterri sur votre page d’accueil.
Il y a généralement deux styles qui sont les plus efficaces pour atteindre cet objectif.
Horizontalement en haut de la page
L’approche la plus courante, et la plus efficace, d’un menu de navigation de commerce électronique est un menu de navigation de haut niveau, s’étendant horizontalement sur toute la page.
Il s’agit de l’approche la plus courante et la plus efficace.
Cette disposition est la plus efficace car c’est là que les clients regardent normalement en premier lorsqu’ils déterminent où aller.
De nombreuses études d’eye-tracking ont systématiquement montré que les utilisateurs commencent par regarder le menu d’en-tête. Plus précisément, ils commencent sur le côté gauche de la page et balayent rapidement de gauche à droite.
Vers le bas du côté gauche de la page
Alors que la plupart des sites d’ecommerce optent pour le menu de navigation horizontal, d’autres ont tellement de catégories qu’ils n’ont pas assez d’espace pour toutes les couvrir.
Les sites d’ecommerce ont besoin de plus d’espace.
Pour ces sites, la meilleure approche consiste à utiliser un menu vertical sur le côté gauche de la page. L’exemple le plus courant est celui d’Amazon. Le géant du commerce électronique possède des dizaines de catégories qui ne pourraient pas tenir (de manière lisible) dans un menu de navigation traditionnel.
La page d’accueil du site d’Amazon est un menu vertical.
Lorsque vous cliquez sur l’icône Tout sur le site du détaillant, un menu s’ouvre avec différents départements. En cliquant sur l’un de ces départements, vous ouvrez un menu avec les catégories imbriquées. Ne perdez pas de vue que cette approche présente toutefois des inconvénients.
Lorsque toute la navigation du catalogue est cachée sous une étiquette Tout, les clients doivent faire plusieurs clics pour se déplacer dans le menu. Cela obscurcit également le type de produits que votre magasin propose.
Bonnes pratiques de navigation deooCommerce
Voici quelques autres bonnes pratiques pour vous aider à optimiser votre menu de navigation WooCommerce.
1. Taxonomies des catégories
Vos catégories les plus importantes devraient former les titres principaux de votre menu.
Ces produits/catégories seront visibles à tout moment lorsque votre client naviguera sur votre site web.
Cependant, il convient de noter que, même si cela peut sembler en contradiction avec les autres catégories que vous avez créées, si vous avez un produit qui dépasse tout le reste sur votre site, alors envisagez de lui allouer une partie de cet espace de navigation principal.
Selon Baymard, le site ecommerce moyen a des problèmes importants en ce qui concerne les catégories, avec 50% des sites ayant une mauvaise disposition de celles-ci. Plus précisément, la surcatégorisation est le plus gros problème de navigation des ecommerces.
2. fils d’Ariane
Les fils d’Ariane sont une autre fonctionnalité de navigation essentiel. Ils aident les clients à savoir où ils se trouvent sur votre boutique. Les fils d’Ariane permettent également aux visiteurs de revenir plus facilement aux pages précédentes ainsi qu’aux pages connectées dans votre structure hiérarchique.
Sans les fils d’Ariane, il est plus difficile pour les acheteurs de se déplacer sur votre site.
Les fils d’Ariane permettent aux visiteurs d’accéder aux pages précédentes ainsi qu’aux pages connectées dans votre structure hiérarchique.
Les fils d’Ariane présentent également un avantage en matière de référencement. Ils aident Google à comprendre la hiérarchie de votre site, ce qui permet à vos pages d’être mieux classées.
Les fils d’Ariane ont également un effet positif sur le référencement.
Un menu de fil d’Ariane typique sur une page de produit ressemble à ceci : Catégorie mère > Sous-catégorie >Produit.
Quand quelqu’un clique sur le texte cliquable pour la catégorie mère ou la sous-catégorie, il sera rapidement dirigé vers cette page. De nombreux sites de commerce électronique incluent également la page d’accueil comme base pour tous les menus de fil d’Ariane.
La page d’accueil est le point de départ de tous les menus de fil d’Ariane.
Les fils d’Ariane peuvent généralement être activés ou désactivés dans les paramètres de votre thème. En fonction du thème, vous pouvez avoir cette option pour les pages, les produits et les catégories.
Si votre thème n’a pas de breadcrumbs, il existe plusieurs plugins que vous pouvez utiliser pour les mettre en place rapidement. Jetpack, par exemple, vous permet d’utiliser des fils d’Ariane sur les pages du site Web, mais pas sur les pages de produits ou de catégories.
Chaque plugin permettra différents niveaux de personnalisation, et la configuration variera. Pour une liste complète des options, jetez un coup d’œil au dépôt de plugins de WordPress.
Il s’agit d’un outil de personnalisation.
3. N’utilisez que des icônes communes
Les icônes sont partout sur internet. Ces symboles permettent aux sites de remplacer le texte par un symbole facile à traiter et qui prend moins de place. Mais, pour que les icônes fonctionnent comme prévu, elles doivent être comprises par votre public.
Si vous utilisez des icônes que personne ne connaît, elles n’auront pas l’effet escompté, à savoir améliorer l’expérience utilisateur.
Pour vous donner un exemple, pensez à la loupe que l’on retrouve couramment sur de nombreux sites. Vous êtes probablement familier avec ce symbole et savez qu’il indique une fonction de recherche sur le site. De même, vous savez probablement que les icônes de sac, de chariot et de panier mènent à la page de panier d’achat du commerce électronique.
4. inclure un logo avec un lien vers votre page d’accueil
Pour certains, celui-ci peut sembler évident, mais il est important de ne pas le négliger. À ce stade, c’est une norme internet d’inclure votre logo dans l’en-tête de votre site, à côté du menu de navigation.
Le logo devrait également contenir un lien vers votre page d’accueil.
Avoir cet élément permet aux utilisateurs de revenir facilement au début de votre site. Tout le monde s’y attend et certains seront décontenancés si cette caractéristique commune est absente.
La position de votre logo a également son importance. Une étude a révélé qu’il est environ six fois plus difficile de revenir à la page d’accueil lorsque le logo est placé au centre d’une page que lorsqu’il se trouve dans le coin supérieur gauche.
La raison de ce phénomène a encore une fois à voir avec la façon dont la plupart des cerveaux traitent l’information de gauche à droite. Les gens ont tendance à regarder et à se concentrer d’abord sur le côté gauche de l’écran et sont donc plus susceptibles de se souvenir de ce qui se trouve sur le côté gauche de la page.
5. Rendez la navigation « STICKY »
La navigation « sticky », c’est lorsque le menu, généralement le menu supérieur, est verrouillé en place. Il ne disparaît pas lors du défilement, il est donc accessible quel que soit l’endroit où se trouve l’utilisateur sur la page. Cela rend tout simplement la navigation plus rapide et plus facile, en particulier lorsqu’un site Web contient beaucoup d’informations.
Création d’un menu de navigation WooCommerce
Avec WordPress, la configuration par défaut pour créer des menus et les remplir d’éléments est disponible en allant dans Apparence > Menu. La disposition des éléments de votre menu est déterminée par le CSS de votre thème WordPress.
Si vous voulez personnaliser ce design, vos options sont de plonger dans le CSS ou d’utiliser un plugin WordPress. Un plugin peut vous faire gagner du temps en vous évitant d’éditer des fichiers et d’écrire du nouveau code.
Il est possible de personnaliser le CSS de votre thème WordPress.
Ci-après, nous allons voir comment utiliser un plugin WordPress populaire pour créer un super menu pour votre boutique WooCommerce.
Max Mega Menu
Max Mega Menu est l’un des plugins de navigation WordPress les plus populaires. Il dispose de fonctionnalités étendues pour créer à la fois des méga menus étendus et des menus déroulants. Il est idéal pour les magasins de commerce électronique qui cherchent à créer des menus de navigation avec de nombreuses catégories et sous-catégories.
Le plugin fonctionne en tandem avec l’éditeur de menu par défaut de WordPress. Il y a aussi un éditeur facile à utiliser, par glisser-déposer, pour élaborer rapidement vos méga-menus robustes. Bien que vous définissiez toujours les éléments de votre menu avec l’éditeur de menu WordPress par défaut, vous configurerez le design de vos nouveaux menus dans les paramètres des méga-menus.
Débutez en allant dans Mega Menu > Thèmes de menu > Paramètres généraux. À partir de là, vous pouvez définir les styles de flèches, la hauteur de ligne et l’ombre facultative à appliquer à la fois aux méga menus et aux menus déroulants. Vous pouvez également activer les transitions de survol pour vos éléments de menu.
Puis, vous voudrez aller dans l’onglet Barre de menu pour définir le dimensionnement et les couleurs de votre barre de menu. Vous pouvez ajuster le rembourrage, les polices, les rayons des bordures, les arrière-plans et l’espacement.
Les emplacements des menus
Une fois que vous avez conçu vos thèmes, vous devez les affecter à l’emplacement de menu approprié. Cliquez sur l’étiquette de Lieux de menu. Vous y verrez une liste de vos menus WordPress actuels.
Trouvez le menu auquel vous voulez attribuer un thème et ouvrez la liste déroulante. Cela vous mènera aux paramètres généraux où vous pourrez activer le plugin Mega Menu pour ce menu spécifique.
Dans la section emplacement de menus, vous trouverez également des paramètres avancés
Pensées finales sur la navigation WooCommerce
Une bonne conception de la navigation WooCommerce est simple, propre et attrayante pour vos acheteurs. La mise en œuvre d’une navigation forte n’est pas excessivement difficile, mais il est facile de la négliger.
Surtout lorsque vous vous concentrez principalement sur l’optimisation de vos pages et de votre checkout pour améliorer la conversion.
La navigation WooCommerce est un élément essentiel de votre stratégie..