Comment créer une navigation efficace pour votre boutique en ligne

Un bon système de navigation aide les clients à trouver rapidement et efficacement ce qu'ils recherchent et améliore le succès global de votre magasin. En fait, votre site Web n'a que quelques secondes pour attirer l'attention d'un visiteur du site, vous feriez donc mieux de le guider vers l'information dont il a besoin tout de suite !

Même de petites différences dans votre navigation principale peuvent avoir un impact significatif sur la capacité de vos clients à trouver des produits qui répondent à leurs besoins. S'ils ne savent pas quoi faire ou où aller lorsqu'ils arrivent sur votre site, ils partiront rapidement et feront leurs achats ailleurs.

Mais comment pouvez-vous créer une navigation efficace pour votre boutique en ligne qui augmente les ventes et diminue le taux de rebond ?

Meilleures pratiques du menu de navigation

1. Utilisez un langage clair et significatif

En ce qui concerne votre menu de navigation principal, généralement situé dans l'en-tête de votre site Web, assurez-vous que vos étiquettes sont claires et significatives. Un visiteur du site doit savoir exactement quels produits appartiennent à une catégorie ou quelles informations il trouvera en cliquant sur un menu déroulant simplement en lisant l'étiquette. Il peut sembler tentant de faire preuve de créativité avec votre formulation, mais cela pourrait simplement dérouter vos clients plutôt que de les inciter à cliquer.

Par exemple, le menu de navigation principal sur fixjeiphone.nl est à la fois clair et significatif. Vous obtenez une idée fantastique du contenu ou des produits qui figureront sur chaque page avant de cliquer sur un élément spécifique.

Les éléments du menu de navigation sont également directement liés aux besoins des clients de FixjeiPhone. Ils savent que les gens viennent sur leur site pour acheter des pièces ou des accessoires, lire des manuels de téléphone ou acheter un appareil remis à neuf. Chaque élément de menu est basé sur ces besoins spécifiques, de sorte que les visiteurs du site savent immédiatement où cliquer.

2. Rendre les éléments de niveau supérieur cliquables

Certains sites Web ont des éléments de navigation de niveau supérieur qui déclenchent uniquement une liste déroulante au lieu de créer également un lien vers une nouvelle page. Mais cela peut être déroutant pour les visiteurs du site Web, surtout s'ils ont du mal à ouvrir la liste déroulante pour une raison quelconque.

Si vous répertoriez des catégories de produits dans votre menu, envisagez de lier l'élément de niveau supérieur à votre page de catégorie principale et d'inclure des sous-catégories dans les listes déroulantes. Cela donne également aux utilisateurs plus d'options pour trouver exactement ce qu'ils recherchent ou parcourir des catégories entières.

Absoluteantibody.com fait un travail efficace à cet égard. Si vous cliquez sur "Antibody Resource" dans leur menu de navigation principal, vous accédez à toutes leurs informations sur les anticorps. Ou, vous pouvez cliquer sur des ressources plus spécifiques qui sont mises en évidence dans la liste déroulante.

3. Ajouter des indicateurs déroulants

Absolutelyantibody.com et fixjeiphone.nl implémentent également des indicateurs déroulants dans leurs menus de navigation.

En règle générale, les indicateurs déroulants ajoutent une flèche à côté de chaque étiquette de navigation pour indiquer que l'élément de menu se développe. Ils aident les visiteurs du site Web à comprendre qu'il existe plus d'options disponibles sans avoir à survoler chaque élément individuel.

Il s'agit souvent d'une option dans les paramètres de votre thème, mais vous pouvez également utiliser un plug-in tel que Menu Icons ou modifier le code de votre site Web.

4. Tenez-vous en aux emplacements standard

Faire preuve de créativité dans la conception de votre site Web est un excellent moyen de vous démarquer de la foule. Mais si la créativité crée de la confusion, vous pourriez perdre à la fois des clients et des ventes.

C'est une bonne idée de placer votre navigation à un endroit où les gens s'attendent à la trouver. Les études de suivi oculaire montrent que les visiteurs du site Web regardent d'abord le coin supérieur gauche d'une page. Gardez donc votre navigation principale dans votre en-tête et placez les éléments les plus importants, comme la page d'accueil, sur le côté gauche.

Les utilisateurs consultent également le pied de page et la barre latérale pour la navigation. Envisagez de créer des liens vers des pages importantes dans votre pied de page, ainsi que votre politique et vos conditions de retour. Sur vos pages de produits et de catégories, vous souhaiterez peut-être inclure une barre latérale avec des liens vers des produits connexes, des catégories supplémentaires et des questions fréquemment posées.

Alors que les menus "hamburger" (qui s'agrandissent lorsque les clients cliquent sur une icône à trois lignes) sont parfaits pour simplifier les menus mobiles, ils peuvent prêter à confusion sur les ordinateurs de bureau.

Étant donné que l'icône est si petite et généralement cachée dans un coin, elle peut facilement être perdue ou ignorée par les visiteurs du site Web. Il ne présente pas non plus vos éléments de menu les plus importants et oblige les visiteurs à faire un pas de plus avant de trouver ce qu'ils recherchent.

Comment utiliser le fil d'Ariane et pourquoi vous devriez

Les fils d'Ariane sont des systèmes de navigation secondaires qui affichent l'emplacement d'un utilisateur sur un site Web. Le nom vient de l'histoire d'Hansel et Gretel, qui laissent tomber des miettes de pain pour retrouver leur chemin à travers la forêt. Cette méthode de navigation est particulièrement utile si vous avez beaucoup de pages ou de produits.

Un menu fil d'Ariane est généralement présenté sous votre navigation principale, juste au-dessus du contenu de votre site Web. Cela permet aux visiteurs de votre site de les utiliser facilement sans avoir à faire défiler.

Le site Web Craft Can Directory utilise des fils d'Ariane pour montrer à leurs clients la page sur laquelle ils se trouvent et comment revenir à leur point de départ. Cela leur permet de revenir en arrière sur une seule page, ou même de sauter plusieurs pages, sans avoir à cliquer plusieurs fois sur le bouton "Précédent" du navigateur.

Ceci est également utile lorsqu'un acheteur parcourt des produits ou compare des articles. S'ils veulent acheter une caisse de bière, mais n'aiment pas les options de la catégorie qu'ils consultent, ils peuvent simplement revenir à la catégorie Caisses mixtes pour voir d'autres options.

Pourquoi la chapelure est importante

Les fils d'Ariane empêchent vos clients de se perdre sur votre site. Sans eux, il est beaucoup plus difficile pour quelqu'un de revenir aux pages ou catégories précédentes. Au lieu de cela, un client devrait cliquer à nouveau sur votre menu principal, rechercher une page ou utiliser le bouton "retour".

Google aime également les fils d'Ariane, car ils aident à définir la structure et la hiérarchie de votre site Web. Les fils d'Ariane peuvent même être inclus dans les résultats des moteurs de recherche, ce qui augmente les chances que des clients potentiels trouvent et cliquent sur les pages de votre site.

Comment ajouter des fils d'Ariane à votre site :

Dans de nombreux cas, le fil d'Ariane peut être activé dans les paramètres de votre thème. Par exemple, le thème gratuit WooCommerce Storefront intègre cette fonctionnalité pour les pages, les produits, les catégories, etc.

Si votre thème n'inclut pas de fils d'Ariane ou si vous souhaitez les personnaliser davantage, il existe deux façons de les ajouter à votre site :

1. Utilisez un plugin :

Il existe plusieurs plugins que vous pouvez utiliser pour activer le fil d'Ariane en un clic. 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, consultez le référentiel de plugins WordPress.

2. Ajouter un fil d'Ariane avec un code personnalisé

Pour afficher le fil d'Ariane WooCommerce, vous pouvez utiliser le <?php woocommerce_breadcrumb(); ?> extrait pour contrôler où votre fil d'Ariane sort.

Vous pouvez également utiliser des filtres et des arguments pour contrôler des éléments tels que le séparateur de fil d'Ariane, le texte et le lien d'accueil.

Cet argument personnalisé changera le séparateur de fil d'Ariane ainsi que le HTML affiché avant le fil d'Ariane :

 /* Change breadcrumbs separator */ <?php $args = array( 'delimiter' => '/', 'before' => '<span class="breadcrumb-title">' . __( 'This is where you are:', 'woothemes' ) . '</span>' ); ?> <?php woocommerce_breadcrumb( $args ); ?>

Ce filtre changera le texte d'accueil par défaut en celui que vous spécifiez :

 /* Change Home Text in Breadcrumbs */ add_filter( 'woocommerce_breadcrumb_defaults', 'mm_change_breadcrumb_home_text',20); function mm_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Store'; return $defaults; }

Ce filtre modifiera le lien de l'URL d'accueil :

 /* Replace the home link URL */ add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'http://woocommerce.com'; }

Découvrez tous les extraits de code personnalisés dans les documents WooCommerce pour vous aider à effectuer encore plus de personnalisations.

Qu'en est-il des méga menus ?

Les méga menus sont une option populaire pour les magasins en ligne. Ils vous permettent de donner à vos clients beaucoup de choix dans votre menu principal, et même d'ajouter des photos ou des vidéos.

Mais la façon dont vous catégorisez votre contenu et vos produits est extrêmement importante. Vous devez utiliser les catégories parentes, les sous-catégories et les hiérarchies de manière à regrouper les produits pertinents. Cela permet aux clients potentiels de trouver plus facilement ce qu'ils recherchent et de voir les différents segments de produits et d'options en un coup d'œil.

Par exemple, The Craft Can Directory fait un bon travail en utilisant un méga menu d'une manière qui aide à guider les personnalisateurs vers les produits qu'ils souhaitent voir.

Si vous survolez "Craft Beer Shop" dans leur menu principal, vous verrez que les catégories parentes sont mises en évidence dans une police en gras, tandis que les sous-catégories sont affichées dans une police de corps, sous chaque catégorie parente.

Si les catégories n'étaient pas regroupées de cette manière, le méga menu pourrait être encore plus déroutant pour les clients qu'un menu de navigation standard.

Pour les utilisateurs du thème Storefront, WooCommerce propose une extension de méga menu pour simplifier le processus.

Utilisation efficace de la navigation dans le pied de page

Votre pied de page doit faire partie de la stratégie de votre site Web, pas une réflexion après coup. Puisqu'il est affiché sur chaque page et chaque produit de votre site, c'est un endroit précieux pour présenter vos pages les plus importantes.

Vous ne devriez pas créer un pied de page massif et écrasant qui comprend des dizaines de liens, mais il est important de tirer le meilleur parti de l'espace disponible. Considérez votre pied de page comme un fourre-tout. Si un visiteur du site Web lit tout le contenu d'une page et fait défiler vers le bas, quelles informations trouveraient-ils les plus utiles ?

Dans certains cas, il peut être similaire aux liens qui se trouvent dans votre menu principal. L'ajout de ces options à votre pied de page aide les utilisateurs à trouver ce qu'ils recherchent sans revenir en haut.

Mais n'oubliez pas les pages et le contenu que les utilisateurs du site Web s'attendent à voir dans le pied de page d'une boutique en ligne. Par exemple:

• Informations sur la livraison
• Politiques de retour et de remboursement
• Une politique de confidentialité
• Termes et conditions
• Coordonnées du service client
• FAQ
• Informations de contact
• Une barre de recherche
• Liens vers les réseaux sociaux

Yubico.com est un excellent exemple de pied de page efficace. Semblable à son menu de navigation principal, Yubico organise les liens et le contenu importants en catégories pour permettre aux visiteurs de leur site Web de trouver facilement des informations.

Selon la taille de votre boutique en ligne, vous n'aurez peut-être besoin que de certaines de ces options. Il ne s'agit pas du nombre de liens ; il s'agit de la stratégie derrière eux.

N'oubliez pas votre navigation

La navigation sur un site Web est l'un des aspects les plus négligés d'une boutique en ligne et est souvent tenue pour acquise. La première étape pour créer une navigation efficace consiste à déterminer quels éléments sont les plus importants pour vos clients.

Comment leur faciliter la navigation dans votre contenu, vos produits et vos offres ? Quelles informations leur seraient les plus utiles ? Si vous avez un large catalogue de produits, un méga menu aurait-il un sens ?

N'oubliez pas que si un client potentiel ne trouve pas rapidement ce qu'il recherche, vous risquez de le perdre au profit d'un concurrent.

Vous souhaitez tester différentes versions de votre menu ? Découvrez comment tester A/B votre navigation.