Menus déroulants : améliorent-ils la conversion ?

Menus déroulants : améliorent-ils la conversion ?

Menus déroulants : améliorent-ils la conversion ?

Menus déroulants : améliorent-ils la conversion ?

Dans cet article, nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre votre site encore plus facile à naviguer.

Dans cet article, nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre votre site encore plus facile à naviguer.

Conseils-e-commerce

28 avr. 2021

Nick Knuppe

Head of product marketing

Il est presque impossible de penser à l'e-commerce sans penser aux menus déroulants. Ils sont essentiels dans la conception d'une page internet, peu importe le type de site. Pourtant, peu d'e-commerçants réussissent à leur apporter un niveau de convivialité optimum. Dans cet article, nous aborderons la conception de menus de navigation pour site web efficaces, sur ordinateurs comme sur smartphones. Nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre la navigation plus conviviale.

Il est presque impossible de penser à l'e-commerce sans penser aux menus déroulants. Ils sont essentiels dans la conception d'une page internet, peu importe le type de site. Pourtant, peu d'e-commerçants réussissent à leur apporter un niveau de convivialité optimum. Dans cet article, nous aborderons la conception de menus de navigation pour site web efficaces, sur ordinateurs comme sur smartphones. Nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre la navigation plus conviviale.

Il est presque impossible de penser à l'e-commerce sans penser aux menus déroulants. Ils sont essentiels dans la conception d'une page internet, peu importe le type de site. Pourtant, peu d'e-commerçants réussissent à leur apporter un niveau de convivialité optimum. Dans cet article, nous aborderons la conception de menus de navigation pour site web efficaces, sur ordinateurs comme sur smartphones. Nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre la navigation plus conviviale.

Il est presque impossible de penser à l'e-commerce sans penser aux menus déroulants. Ils sont essentiels dans la conception d'une page internet, peu importe le type de site. Pourtant, peu d'e-commerçants réussissent à leur apporter un niveau de convivialité optimum. Dans cet article, nous aborderons la conception de menus de navigation pour site web efficaces, sur ordinateurs comme sur smartphones. Nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre la navigation plus conviviale.

Qu’est-ce que la navigation web ?

La barre de navigation de votre site permet à vos visiteurs de s’orienter facilement. Elle propose des liens directs vers les principales catégories de votre site internet. C’est pourquoi on l’appelle également « menu réactif ».

Cela ne résume pas entièrement la navigation web. Voici d'autres éléments fréquents inhérents à la navigation internet :

  • Le menu principal qui répertorie l’ensemble du contenu du site en catégories hiérarchisées ;

  • La navigation secondaire qui regroupe des liens pratiques vers des fonctionnalités secondaires, comme le panier d’achat ou l’identification utilisateur ;

  • Des filtres qui permettent à l’utilisateur d’affiner les résultats de recherche ;

  • Un fil d’Ariane qui situe l’utilisateur dans l’arborescence du site internet ;

  • La navigation en pied de page qui présente des liens pratiques vers certaines pages, comme les mentions légales ou la rubrique « à propos ».

La barre de navigation de votre site permet à vos visiteurs de s’orienter facilement. Elle propose des liens directs vers les principales catégories de votre site internet. C’est pourquoi on l’appelle également « menu réactif ».

Cela ne résume pas entièrement la navigation web. Voici d'autres éléments fréquents inhérents à la navigation internet :

  • Le menu principal qui répertorie l’ensemble du contenu du site en catégories hiérarchisées ;

  • La navigation secondaire qui regroupe des liens pratiques vers des fonctionnalités secondaires, comme le panier d’achat ou l’identification utilisateur ;

  • Des filtres qui permettent à l’utilisateur d’affiner les résultats de recherche ;

  • Un fil d’Ariane qui situe l’utilisateur dans l’arborescence du site internet ;

  • La navigation en pied de page qui présente des liens pratiques vers certaines pages, comme les mentions légales ou la rubrique « à propos ».

La barre de navigation de votre site permet à vos visiteurs de s’orienter facilement. Elle propose des liens directs vers les principales catégories de votre site internet. C’est pourquoi on l’appelle également « menu réactif ».

Cela ne résume pas entièrement la navigation web. Voici d'autres éléments fréquents inhérents à la navigation internet :

  • Le menu principal qui répertorie l’ensemble du contenu du site en catégories hiérarchisées ;

  • La navigation secondaire qui regroupe des liens pratiques vers des fonctionnalités secondaires, comme le panier d’achat ou l’identification utilisateur ;

  • Des filtres qui permettent à l’utilisateur d’affiner les résultats de recherche ;

  • Un fil d’Ariane qui situe l’utilisateur dans l’arborescence du site internet ;

  • La navigation en pied de page qui présente des liens pratiques vers certaines pages, comme les mentions légales ou la rubrique « à propos ».

La barre de navigation de votre site permet à vos visiteurs de s’orienter facilement. Elle propose des liens directs vers les principales catégories de votre site internet. C’est pourquoi on l’appelle également « menu réactif ».

Cela ne résume pas entièrement la navigation web. Voici d'autres éléments fréquents inhérents à la navigation internet :

  • Le menu principal qui répertorie l’ensemble du contenu du site en catégories hiérarchisées ;

  • La navigation secondaire qui regroupe des liens pratiques vers des fonctionnalités secondaires, comme le panier d’achat ou l’identification utilisateur ;

  • Des filtres qui permettent à l’utilisateur d’affiner les résultats de recherche ;

  • Un fil d’Ariane qui situe l’utilisateur dans l’arborescence du site internet ;

  • La navigation en pied de page qui présente des liens pratiques vers certaines pages, comme les mentions légales ou la rubrique « à propos ».

En quoi une navigation web efficace améliore la conversion en e-commerce ?

En quoi une navigation web efficace améliore la conversion en e-commerce ?

Une expérience utilisateur engageante (UX) est aussi importante pour un e-commerçant que pour un magasin physique. Cela signifie que les clients doivent pouvoir facilement s’orienter sur votre boutique en ligne. Dès leur arrivée sur votre site, les informations les plus importantes doivent apparaître clairement pour faciliter les recherches. Il est donc primordial que les menus de votre page soient pratiques et simples d’utilisation. En permettant à vos clients de trouver intuitivement le contenu ou les fonctions dont ils ont besoin, vous augmentez la probabilité de réaliser une vente.

En revanche, si la navigation sur votre site est difficile, les clients risquent d’aller cliquer ailleurs. Vous augmentez votre taux de rebond et réduisez votre conversion. Nous vous montrons ci-dessous comment créer une meilleure UX avec menus déroulants et autres éléments de navigation, pour optimiser le taux de conversion de votre boutique en ligne.

En quoi une navigation web efficace améliore la conversion en e-commerce ?

Une expérience utilisateur engageante (UX) est aussi importante pour un e-commerçant que pour un magasin physique. Cela signifie que les clients doivent pouvoir facilement s’orienter sur votre boutique en ligne. Dès leur arrivée sur votre site, les informations les plus importantes doivent apparaître clairement pour faciliter les recherches. Il est donc primordial que les menus de votre page soient pratiques et simples d’utilisation. En permettant à vos clients de trouver intuitivement le contenu ou les fonctions dont ils ont besoin, vous augmentez la probabilité de réaliser une vente.

En revanche, si la navigation sur votre site est difficile, les clients risquent d’aller cliquer ailleurs. Vous augmentez votre taux de rebond et réduisez votre conversion. Nous vous montrons ci-dessous comment créer une meilleure UX avec menus déroulants et autres éléments de navigation, pour optimiser le taux de conversion de votre boutique en ligne.

En quoi une navigation web efficace améliore la conversion en e-commerce ?

Une expérience utilisateur engageante (UX) est aussi importante pour un e-commerçant que pour un magasin physique. Cela signifie que les clients doivent pouvoir facilement s’orienter sur votre boutique en ligne. Dès leur arrivée sur votre site, les informations les plus importantes doivent apparaître clairement pour faciliter les recherches. Il est donc primordial que les menus de votre page soient pratiques et simples d’utilisation. En permettant à vos clients de trouver intuitivement le contenu ou les fonctions dont ils ont besoin, vous augmentez la probabilité de réaliser une vente.

En revanche, si la navigation sur votre site est difficile, les clients risquent d’aller cliquer ailleurs. Vous augmentez votre taux de rebond et réduisez votre conversion. Nous vous montrons ci-dessous comment créer une meilleure UX avec menus déroulants et autres éléments de navigation, pour optimiser le taux de conversion de votre boutique en ligne.

En quoi une navigation web efficace améliore la conversion en e-commerce ?

Une expérience utilisateur engageante (UX) est aussi importante pour un e-commerçant que pour un magasin physique. Cela signifie que les clients doivent pouvoir facilement s’orienter sur votre boutique en ligne. Dès leur arrivée sur votre site, les informations les plus importantes doivent apparaître clairement pour faciliter les recherches. Il est donc primordial que les menus de votre page soient pratiques et simples d’utilisation. En permettant à vos clients de trouver intuitivement le contenu ou les fonctions dont ils ont besoin, vous augmentez la probabilité de réaliser une vente.

En revanche, si la navigation sur votre site est difficile, les clients risquent d’aller cliquer ailleurs. Vous augmentez votre taux de rebond et réduisez votre conversion. Nous vous montrons ci-dessous comment créer une meilleure UX avec menus déroulants et autres éléments de navigation, pour optimiser le taux de conversion de votre boutique en ligne.

Choisir le menu principal adéquat : quelles sont les options ?

Lorsque vous créez le site web de votre activité e-commerce, vous devez d’abord choisir entre un menu principal vertical ou horizontal.

  • Un menu vertical s’étale sur la gauche de la page, du haut vers le bas.

  • Un menu horizontal s’étale en haut de la page, de la gauche vers la droite.

Avec un menu horizontal, l'espace est limité par la largeur de l'écran. C'est pourquoi il ne contient souvent que de courts mots-clés. À l'inverse, un menu vertical peut s'étendre à loisir. Gardez à l'esprit qu'il est toutefois préférable de limiter le menu principal aux catégories les plus importantes par souci de clarté.

Voyons quelques types de menus que l’on retrouve fréquemment sur la toile. La plupart sont utilisables aussi bien horizontalement que verticalement.

Le menu sticky

Choisir le menu principal adéquat - Le menu sticky

Le menu sticky, également appelé menu fixe ou flottant, est visible en permanence. Il reste à l'écran même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage est que l'utilisateur n'a pas à revenir en haut de la page s'il veut aller dans une autre catégorie du menu. Si vous utilisez un menu fixe, faites attention à ce qu'il ne prenne pas trop de place afin de ne pas masquer de contenu important lorsque l'utilisateur fait défiler la page.

La navigation interactive

La navigation interactive est rarement une bonne solution pour les boutiques en ligne. Avec ce type de navigation, il n’y a pas de liens qui mènent vos utilisateurs de A à B. La navigation sur le site fait partie de l’expérience offerte à l’utilisateur. Les éléments interactifs rendent l’expérience de navigation ludique et guident l’utilisateur d’une section ou d’un sous-domaine à l’autre jusqu’à ce qu’il ait découvert l’ensemble du contenu.

Le menu hamburger

Choisir le menu principal adéquat - Le menu hamburger

Le menu hamburger, parfois appelé menu latéral ou menu à tiroir, s’est largement développé avec la croissance rapide des smartphones. Ce type de menu est facilement identifiable par son bouton aux trois lignes horizontales parallèles, généralement placé dans le coin supérieur droit ou gauche d’une page internet. Les lignes font penser à un hamburger et donnèrent son nom au menu.

Avec un menu hamburger, les utilisateurs ne découvrent de prime abord que le contenu de votre site et le bouton du menu hamburger. Lorsque l’utilisateur appuie sur le bouton, le menu principal s’affiche à l’écran et révèle toutes les options de navigation de votre site.

Les sites internet utilisent de plus en plus ce type de menu même pour leur version ordinateur. Cependant, du fait que les utilisateurs doivent cliquer sur un bouton supplémentaire juste pour afficher le menu, il est recommandé d’utiliser le menu hamburger uniquement pour la version mobile de votre boutique en ligne.

Menus déroulants

Choisir le menu principal adéquat - Menus déroulants

Le menu le plus utilisé par les sites e-commerce est le menu déroulant réactif. Seul un menu général avec les principales catégories s’affiche d’abord à l’écran. Ensuite, en survolant ou en cliquant sur l’une de ces catégories, l’utilisateur déroule une liste de sous-catégories. Vous pouvez d’ailleurs ajouter autant de couches de sous-catégories déroulantes que vous le souhaitez, même si nous vous conseillons de ne pas en mettre plus de deux. Si cependant votre gamme de produits est si étendue que vous avez besoin de plus de niveaux déroulants, vous pouvez utiliser un méga menu (voir plus loin).

Le menu déroulant peut être horizontal ou vertical. Peu importe son orientation, un menu déroulant garantit une très grande ergonomie pour les clients. Si vous optez pour un menu déroulant, pensez à la structure du contenu de votre site afin qu'il ne soit pas trop surchargé ou difficile à utiliser.

Lorsque vous créez le site web de votre activité e-commerce, vous devez d’abord choisir entre un menu principal vertical ou horizontal.

  • Un menu vertical s’étale sur la gauche de la page, du haut vers le bas.

  • Un menu horizontal s’étale en haut de la page, de la gauche vers la droite.

Avec un menu horizontal, l'espace est limité par la largeur de l'écran. C'est pourquoi il ne contient souvent que de courts mots-clés. À l'inverse, un menu vertical peut s'étendre à loisir. Gardez à l'esprit qu'il est toutefois préférable de limiter le menu principal aux catégories les plus importantes par souci de clarté.

Voyons quelques types de menus que l’on retrouve fréquemment sur la toile. La plupart sont utilisables aussi bien horizontalement que verticalement.

Le menu sticky

Choisir le menu principal adéquat - Le menu sticky

Le menu sticky, également appelé menu fixe ou flottant, est visible en permanence. Il reste à l'écran même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage est que l'utilisateur n'a pas à revenir en haut de la page s'il veut aller dans une autre catégorie du menu. Si vous utilisez un menu fixe, faites attention à ce qu'il ne prenne pas trop de place afin de ne pas masquer de contenu important lorsque l'utilisateur fait défiler la page.

La navigation interactive

La navigation interactive est rarement une bonne solution pour les boutiques en ligne. Avec ce type de navigation, il n’y a pas de liens qui mènent vos utilisateurs de A à B. La navigation sur le site fait partie de l’expérience offerte à l’utilisateur. Les éléments interactifs rendent l’expérience de navigation ludique et guident l’utilisateur d’une section ou d’un sous-domaine à l’autre jusqu’à ce qu’il ait découvert l’ensemble du contenu.

Le menu hamburger

Choisir le menu principal adéquat - Le menu hamburger

Le menu hamburger, parfois appelé menu latéral ou menu à tiroir, s’est largement développé avec la croissance rapide des smartphones. Ce type de menu est facilement identifiable par son bouton aux trois lignes horizontales parallèles, généralement placé dans le coin supérieur droit ou gauche d’une page internet. Les lignes font penser à un hamburger et donnèrent son nom au menu.

Avec un menu hamburger, les utilisateurs ne découvrent de prime abord que le contenu de votre site et le bouton du menu hamburger. Lorsque l’utilisateur appuie sur le bouton, le menu principal s’affiche à l’écran et révèle toutes les options de navigation de votre site.

Les sites internet utilisent de plus en plus ce type de menu même pour leur version ordinateur. Cependant, du fait que les utilisateurs doivent cliquer sur un bouton supplémentaire juste pour afficher le menu, il est recommandé d’utiliser le menu hamburger uniquement pour la version mobile de votre boutique en ligne.

Menus déroulants

Choisir le menu principal adéquat - Menus déroulants

Le menu le plus utilisé par les sites e-commerce est le menu déroulant réactif. Seul un menu général avec les principales catégories s’affiche d’abord à l’écran. Ensuite, en survolant ou en cliquant sur l’une de ces catégories, l’utilisateur déroule une liste de sous-catégories. Vous pouvez d’ailleurs ajouter autant de couches de sous-catégories déroulantes que vous le souhaitez, même si nous vous conseillons de ne pas en mettre plus de deux. Si cependant votre gamme de produits est si étendue que vous avez besoin de plus de niveaux déroulants, vous pouvez utiliser un méga menu (voir plus loin).

Le menu déroulant peut être horizontal ou vertical. Peu importe son orientation, un menu déroulant garantit une très grande ergonomie pour les clients. Si vous optez pour un menu déroulant, pensez à la structure du contenu de votre site afin qu'il ne soit pas trop surchargé ou difficile à utiliser.

Lorsque vous créez le site web de votre activité e-commerce, vous devez d’abord choisir entre un menu principal vertical ou horizontal.

  • Un menu vertical s’étale sur la gauche de la page, du haut vers le bas.

  • Un menu horizontal s’étale en haut de la page, de la gauche vers la droite.

Avec un menu horizontal, l'espace est limité par la largeur de l'écran. C'est pourquoi il ne contient souvent que de courts mots-clés. À l'inverse, un menu vertical peut s'étendre à loisir. Gardez à l'esprit qu'il est toutefois préférable de limiter le menu principal aux catégories les plus importantes par souci de clarté.

Voyons quelques types de menus que l’on retrouve fréquemment sur la toile. La plupart sont utilisables aussi bien horizontalement que verticalement.

Le menu sticky

Choisir le menu principal adéquat - Le menu sticky

Le menu sticky, également appelé menu fixe ou flottant, est visible en permanence. Il reste à l'écran même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage est que l'utilisateur n'a pas à revenir en haut de la page s'il veut aller dans une autre catégorie du menu. Si vous utilisez un menu fixe, faites attention à ce qu'il ne prenne pas trop de place afin de ne pas masquer de contenu important lorsque l'utilisateur fait défiler la page.

La navigation interactive

La navigation interactive est rarement une bonne solution pour les boutiques en ligne. Avec ce type de navigation, il n’y a pas de liens qui mènent vos utilisateurs de A à B. La navigation sur le site fait partie de l’expérience offerte à l’utilisateur. Les éléments interactifs rendent l’expérience de navigation ludique et guident l’utilisateur d’une section ou d’un sous-domaine à l’autre jusqu’à ce qu’il ait découvert l’ensemble du contenu.

Le menu hamburger

Choisir le menu principal adéquat - Le menu hamburger

Le menu hamburger, parfois appelé menu latéral ou menu à tiroir, s’est largement développé avec la croissance rapide des smartphones. Ce type de menu est facilement identifiable par son bouton aux trois lignes horizontales parallèles, généralement placé dans le coin supérieur droit ou gauche d’une page internet. Les lignes font penser à un hamburger et donnèrent son nom au menu.

Avec un menu hamburger, les utilisateurs ne découvrent de prime abord que le contenu de votre site et le bouton du menu hamburger. Lorsque l’utilisateur appuie sur le bouton, le menu principal s’affiche à l’écran et révèle toutes les options de navigation de votre site.

Les sites internet utilisent de plus en plus ce type de menu même pour leur version ordinateur. Cependant, du fait que les utilisateurs doivent cliquer sur un bouton supplémentaire juste pour afficher le menu, il est recommandé d’utiliser le menu hamburger uniquement pour la version mobile de votre boutique en ligne.

Menus déroulants

Choisir le menu principal adéquat - Menus déroulants

Le menu le plus utilisé par les sites e-commerce est le menu déroulant réactif. Seul un menu général avec les principales catégories s’affiche d’abord à l’écran. Ensuite, en survolant ou en cliquant sur l’une de ces catégories, l’utilisateur déroule une liste de sous-catégories. Vous pouvez d’ailleurs ajouter autant de couches de sous-catégories déroulantes que vous le souhaitez, même si nous vous conseillons de ne pas en mettre plus de deux. Si cependant votre gamme de produits est si étendue que vous avez besoin de plus de niveaux déroulants, vous pouvez utiliser un méga menu (voir plus loin).

Le menu déroulant peut être horizontal ou vertical. Peu importe son orientation, un menu déroulant garantit une très grande ergonomie pour les clients. Si vous optez pour un menu déroulant, pensez à la structure du contenu de votre site afin qu'il ne soit pas trop surchargé ou difficile à utiliser.

Lorsque vous créez le site web de votre activité e-commerce, vous devez d’abord choisir entre un menu principal vertical ou horizontal.

  • Un menu vertical s’étale sur la gauche de la page, du haut vers le bas.

  • Un menu horizontal s’étale en haut de la page, de la gauche vers la droite.

Avec un menu horizontal, l'espace est limité par la largeur de l'écran. C'est pourquoi il ne contient souvent que de courts mots-clés. À l'inverse, un menu vertical peut s'étendre à loisir. Gardez à l'esprit qu'il est toutefois préférable de limiter le menu principal aux catégories les plus importantes par souci de clarté.

Voyons quelques types de menus que l’on retrouve fréquemment sur la toile. La plupart sont utilisables aussi bien horizontalement que verticalement.

Le menu sticky

Choisir le menu principal adéquat - Le menu sticky

Le menu sticky, également appelé menu fixe ou flottant, est visible en permanence. Il reste à l'écran même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage est que l'utilisateur n'a pas à revenir en haut de la page s'il veut aller dans une autre catégorie du menu. Si vous utilisez un menu fixe, faites attention à ce qu'il ne prenne pas trop de place afin de ne pas masquer de contenu important lorsque l'utilisateur fait défiler la page.

La navigation interactive

La navigation interactive est rarement une bonne solution pour les boutiques en ligne. Avec ce type de navigation, il n’y a pas de liens qui mènent vos utilisateurs de A à B. La navigation sur le site fait partie de l’expérience offerte à l’utilisateur. Les éléments interactifs rendent l’expérience de navigation ludique et guident l’utilisateur d’une section ou d’un sous-domaine à l’autre jusqu’à ce qu’il ait découvert l’ensemble du contenu.

Le menu hamburger

Choisir le menu principal adéquat - Le menu hamburger

Le menu hamburger, parfois appelé menu latéral ou menu à tiroir, s’est largement développé avec la croissance rapide des smartphones. Ce type de menu est facilement identifiable par son bouton aux trois lignes horizontales parallèles, généralement placé dans le coin supérieur droit ou gauche d’une page internet. Les lignes font penser à un hamburger et donnèrent son nom au menu.

Avec un menu hamburger, les utilisateurs ne découvrent de prime abord que le contenu de votre site et le bouton du menu hamburger. Lorsque l’utilisateur appuie sur le bouton, le menu principal s’affiche à l’écran et révèle toutes les options de navigation de votre site.

Les sites internet utilisent de plus en plus ce type de menu même pour leur version ordinateur. Cependant, du fait que les utilisateurs doivent cliquer sur un bouton supplémentaire juste pour afficher le menu, il est recommandé d’utiliser le menu hamburger uniquement pour la version mobile de votre boutique en ligne.

Menus déroulants

Choisir le menu principal adéquat - Menus déroulants

Le menu le plus utilisé par les sites e-commerce est le menu déroulant réactif. Seul un menu général avec les principales catégories s’affiche d’abord à l’écran. Ensuite, en survolant ou en cliquant sur l’une de ces catégories, l’utilisateur déroule une liste de sous-catégories. Vous pouvez d’ailleurs ajouter autant de couches de sous-catégories déroulantes que vous le souhaitez, même si nous vous conseillons de ne pas en mettre plus de deux. Si cependant votre gamme de produits est si étendue que vous avez besoin de plus de niveaux déroulants, vous pouvez utiliser un méga menu (voir plus loin).

Le menu déroulant peut être horizontal ou vertical. Peu importe son orientation, un menu déroulant garantit une très grande ergonomie pour les clients. Si vous optez pour un menu déroulant, pensez à la structure du contenu de votre site afin qu'il ne soit pas trop surchargé ou difficile à utiliser.

Méga menus déroulants : avantages et inconvénients

Un méga menu, bien qu’il ait ses limites, offre de nombreux avantages en termes d’expérience utilisateur. Encore une fois, l’élaboration de l’arborescence de votre site est très importante. Effectivement, un méga menu n’est vraiment pratique que si les catégories de la barre de navigation sont significatives. Avant la mise en place d’un méga menu, prenez le temps de réfléchir à une organisation simple et efficace de votre contenu. Le tableau suivant répertorie les principaux avantages et inconvénients d’un méga menu.

Un méga menu, bien qu’il ait ses limites, offre de nombreux avantages en termes d’expérience utilisateur. Encore une fois, l’élaboration de l’arborescence de votre site est très importante. Effectivement, un méga menu n’est vraiment pratique que si les catégories de la barre de navigation sont significatives. Avant la mise en place d’un méga menu, prenez le temps de réfléchir à une organisation simple et efficace de votre contenu. Le tableau suivant répertorie les principaux avantages et inconvénients d’un méga menu.

Un méga menu, bien qu’il ait ses limites, offre de nombreux avantages en termes d’expérience utilisateur. Encore une fois, l’élaboration de l’arborescence de votre site est très importante. Effectivement, un méga menu n’est vraiment pratique que si les catégories de la barre de navigation sont significatives. Avant la mise en place d’un méga menu, prenez le temps de réfléchir à une organisation simple et efficace de votre contenu. Le tableau suivant répertorie les principaux avantages et inconvénients d’un méga menu.

Un méga menu, bien qu’il ait ses limites, offre de nombreux avantages en termes d’expérience utilisateur. Encore une fois, l’élaboration de l’arborescence de votre site est très importante. Effectivement, un méga menu n’est vraiment pratique que si les catégories de la barre de navigation sont significatives. Avant la mise en place d’un méga menu, prenez le temps de réfléchir à une organisation simple et efficace de votre contenu. Le tableau suivant répertorie les principaux avantages et inconvénients d’un méga menu.

Conception web : 8 conseils pour améliorer la convivialité des menus déroulants

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Commerce mobile : faciliter la navigation sur smartphone de votre boutique en ligne

Les e-acheteurs utilisent de plus en plus leurs smartphones pour commander en ligne. Il est donc important d'y penser lorsque vous configurez le menu de votre boutique en ligne. Auparavant considéré comme une bonne idée, réduire le nombre d'éléments pour la version mobile n'est plus d'actualité. Après tout, les utilisateurs mobiles s'attendent à avoir accès aux mêmes informations que sur ordinateur. Abordons quelques astuces qui améliorent la convivialité et la navigation de votre site sur les appareils mobiles.

L’approche « ne rien changer »

La manière la plus simple de concevoir votre site mobile est de le rendre quasi identique à la version ordinateur. Procédez simplement à quelques ajustements pour permettre à vos utilisateurs d’actionner aisément les éléments du menu avec leur écran tactile. Par exemple :

  • Augmentez l’espace entre les éléments de navigation ;

  • Optez pour une taille de texte adaptée.

Cette approche ne fonctionne parfaitement que pour les sites aux menus concis et qui contiennent peu d’éléments. Les sites internet plus volumineux réclament une conception mobile à plusieurs niveaux pour garder une navigation conviviale.

Le menu déroulant

Les menus déroulants offrent les mêmes options que votre page internet classique, en s’adaptant mieux aux achats sur mobile. Lorsque l’utilisateur presse un élément du menu, les options de navigation se déroulent sur le contenu. C’est pourquoi ce type de menu pour sites mobiles est aussi appelé menu superposé.

Le menu glissant

Pour les sites mobiles, les menus glissants sont plus pratiques que les menus déroulants. Lorsqu’un menu glissant se déploie, il ne couvre pas le contenu de la page mais le pousse vers le bas. Le visiteur peut ainsi toujours faire défiler la page et consulter le contenu même si le menu est ouvert. Ce type de menu est un peu plus difficile à programmer mais est très apprécié des utilisateurs.

La navigation off-canvas

Cette solution exclut le menu de la mise en page du site, il ne prend donc aucune place sur l’écran. L’utilisateur doit simplement appuyer sur le bouton du menu pour le faire apparaître sur la page. L’arborescence du site est alors la seule chose qui apparaît à l’écran. C’est une option très intéressante pour les sites aux nombreuses sous-catégories.

Les e-acheteurs utilisent de plus en plus leurs smartphones pour commander en ligne. Il est donc important d'y penser lorsque vous configurez le menu de votre boutique en ligne. Auparavant considéré comme une bonne idée, réduire le nombre d'éléments pour la version mobile n'est plus d'actualité. Après tout, les utilisateurs mobiles s'attendent à avoir accès aux mêmes informations que sur ordinateur. Abordons quelques astuces qui améliorent la convivialité et la navigation de votre site sur les appareils mobiles.

L’approche « ne rien changer »

La manière la plus simple de concevoir votre site mobile est de le rendre quasi identique à la version ordinateur. Procédez simplement à quelques ajustements pour permettre à vos utilisateurs d’actionner aisément les éléments du menu avec leur écran tactile. Par exemple :

  • Augmentez l’espace entre les éléments de navigation ;

  • Optez pour une taille de texte adaptée.

Cette approche ne fonctionne parfaitement que pour les sites aux menus concis et qui contiennent peu d’éléments. Les sites internet plus volumineux réclament une conception mobile à plusieurs niveaux pour garder une navigation conviviale.

Le menu déroulant

Les menus déroulants offrent les mêmes options que votre page internet classique, en s’adaptant mieux aux achats sur mobile. Lorsque l’utilisateur presse un élément du menu, les options de navigation se déroulent sur le contenu. C’est pourquoi ce type de menu pour sites mobiles est aussi appelé menu superposé.

Le menu glissant

Pour les sites mobiles, les menus glissants sont plus pratiques que les menus déroulants. Lorsqu’un menu glissant se déploie, il ne couvre pas le contenu de la page mais le pousse vers le bas. Le visiteur peut ainsi toujours faire défiler la page et consulter le contenu même si le menu est ouvert. Ce type de menu est un peu plus difficile à programmer mais est très apprécié des utilisateurs.

La navigation off-canvas

Cette solution exclut le menu de la mise en page du site, il ne prend donc aucune place sur l’écran. L’utilisateur doit simplement appuyer sur le bouton du menu pour le faire apparaître sur la page. L’arborescence du site est alors la seule chose qui apparaît à l’écran. C’est une option très intéressante pour les sites aux nombreuses sous-catégories.

Les e-acheteurs utilisent de plus en plus leurs smartphones pour commander en ligne. Il est donc important d'y penser lorsque vous configurez le menu de votre boutique en ligne. Auparavant considéré comme une bonne idée, réduire le nombre d'éléments pour la version mobile n'est plus d'actualité. Après tout, les utilisateurs mobiles s'attendent à avoir accès aux mêmes informations que sur ordinateur. Abordons quelques astuces qui améliorent la convivialité et la navigation de votre site sur les appareils mobiles.

L’approche « ne rien changer »

La manière la plus simple de concevoir votre site mobile est de le rendre quasi identique à la version ordinateur. Procédez simplement à quelques ajustements pour permettre à vos utilisateurs d’actionner aisément les éléments du menu avec leur écran tactile. Par exemple :

  • Augmentez l’espace entre les éléments de navigation ;

  • Optez pour une taille de texte adaptée.

Cette approche ne fonctionne parfaitement que pour les sites aux menus concis et qui contiennent peu d’éléments. Les sites internet plus volumineux réclament une conception mobile à plusieurs niveaux pour garder une navigation conviviale.

Le menu déroulant

Les menus déroulants offrent les mêmes options que votre page internet classique, en s’adaptant mieux aux achats sur mobile. Lorsque l’utilisateur presse un élément du menu, les options de navigation se déroulent sur le contenu. C’est pourquoi ce type de menu pour sites mobiles est aussi appelé menu superposé.

Le menu glissant

Pour les sites mobiles, les menus glissants sont plus pratiques que les menus déroulants. Lorsqu’un menu glissant se déploie, il ne couvre pas le contenu de la page mais le pousse vers le bas. Le visiteur peut ainsi toujours faire défiler la page et consulter le contenu même si le menu est ouvert. Ce type de menu est un peu plus difficile à programmer mais est très apprécié des utilisateurs.

La navigation off-canvas

Cette solution exclut le menu de la mise en page du site, il ne prend donc aucune place sur l’écran. L’utilisateur doit simplement appuyer sur le bouton du menu pour le faire apparaître sur la page. L’arborescence du site est alors la seule chose qui apparaît à l’écran. C’est une option très intéressante pour les sites aux nombreuses sous-catégories.

Les e-acheteurs utilisent de plus en plus leurs smartphones pour commander en ligne. Il est donc important d'y penser lorsque vous configurez le menu de votre boutique en ligne. Auparavant considéré comme une bonne idée, réduire le nombre d'éléments pour la version mobile n'est plus d'actualité. Après tout, les utilisateurs mobiles s'attendent à avoir accès aux mêmes informations que sur ordinateur. Abordons quelques astuces qui améliorent la convivialité et la navigation de votre site sur les appareils mobiles.

L’approche « ne rien changer »

La manière la plus simple de concevoir votre site mobile est de le rendre quasi identique à la version ordinateur. Procédez simplement à quelques ajustements pour permettre à vos utilisateurs d’actionner aisément les éléments du menu avec leur écran tactile. Par exemple :

  • Augmentez l’espace entre les éléments de navigation ;

  • Optez pour une taille de texte adaptée.

Cette approche ne fonctionne parfaitement que pour les sites aux menus concis et qui contiennent peu d’éléments. Les sites internet plus volumineux réclament une conception mobile à plusieurs niveaux pour garder une navigation conviviale.

Le menu déroulant

Les menus déroulants offrent les mêmes options que votre page internet classique, en s’adaptant mieux aux achats sur mobile. Lorsque l’utilisateur presse un élément du menu, les options de navigation se déroulent sur le contenu. C’est pourquoi ce type de menu pour sites mobiles est aussi appelé menu superposé.

Le menu glissant

Pour les sites mobiles, les menus glissants sont plus pratiques que les menus déroulants. Lorsqu’un menu glissant se déploie, il ne couvre pas le contenu de la page mais le pousse vers le bas. Le visiteur peut ainsi toujours faire défiler la page et consulter le contenu même si le menu est ouvert. Ce type de menu est un peu plus difficile à programmer mais est très apprécié des utilisateurs.

La navigation off-canvas

Cette solution exclut le menu de la mise en page du site, il ne prend donc aucune place sur l’écran. L’utilisateur doit simplement appuyer sur le bouton du menu pour le faire apparaître sur la page. L’arborescence du site est alors la seule chose qui apparaît à l’écran. C’est une option très intéressante pour les sites aux nombreuses sous-catégories.

Conclusion : est-il facile de naviguer sur votre boutique en ligne ?

De nombreuses solutions s’offrent à vous pour adopter un menu convivial à votre boutique en ligne. En fonction de la plateforme e-commerce que vous utilisez, vous pouvez choisir parmi de nombreux designs. Peu importe votre choix, il est important de commencer par structurer précisément le contenu de votre site. Si votre gamme de produits est très importante, la meilleure option consiste à utiliser des menus déroulants pour la version desktop de votre site web et des menus coulissants pour la version mobile. Utilisez la checklist suivante pour vous assurer de suivre l’ensemble de nos conseils lorsque vous concevez le menu de votre site internet.

Liste de contrôle pour créer des menus déroulants conviviaux

  1. Les noms de catégories sont courts et faciles à comprendre.

  2. Les catégories principales sont disposées dans l'ordre d'importance pour l'utilisateur.

  3. Il y a un indice visuel (comme une petite flèche) à côté du nom du menu pour indiquer que le menu se déroule.

  4. Le menu déroulant s'ouvre entre 0,1 et 0,5 secondes lorsque l'utilisateur le survole dans la barre de navigation.

  5. Le menu déroulant s'ouvre entièrement dès le départ. Les clients n'ont pas à cliquer sur une catégorie pour voir ses sous-catégories.

  6. Des indices visuels, tels que des icônes et des couleurs de texte différentes, sont utilisés pour faciliter la navigation dans le menu déroulant étendu.

  7. Le menu ne se ferme pas si l'utilisateur éloigne son curseur de la barre de navigation et passe dans le menu déroulant étendu.

  8. Les menus déroulants sont tous de la même taille, quel que soit le nombre de sous-catégories qu'ils contiennent.

  9. Il n'y a pas de fonctions interactives (comme l'inscription à une newsletter) à l'intérieur des menus déroulants.

  10. Le menu déroulant étendu ne recouvre pas le champ de recherche ou d'autres contenus importants.

  11. Les fonctions secondaires sont répertoriées dans des menus séparés (par exemple, dans le pied de page).

Restez à jour

Ne manquez jamais une mise à jour. Recevez des mises à jour de produits, des actualités et des témoignages clients directement dans votre boîte de réception.

Connectez chaque paiement. Améliorez chaque aspect de votre entreprise.

Ne manquez jamais une mise à jour. Recevez des mises à jour de produits, des actualités et des témoignages clients directement dans votre boîte de réception.

Form fields

Table of contents

Table of contents

Plus de mises à jour

MolliePerspectivesMenus déroulants : améliorent-ils la conversion ?
MolliePerspectivesMenus déroulants : améliorent-ils la conversion ?