Méga menu, menu mobile et panier pop-up : augmenter la conversion en vitrine

La semaine dernière, j'ai été approché par le propriétaire d'un magasin de lubrifiants industriels - un gars qui, en cinq ans, a fait passer son catalogue de deux cents articles à dix-sept mille. Son problème semblait banal : "Les clients appellent et demandent si nous avons de l'huile hydraulique de telle ou telle viscosité. Je dis - bien sûr qu'elle existe, elle est sur le site Internet. Et ils répondent : nous ne l'avons pas trouvée." Dix-sept mille produits, des dizaines de catégories, des sous-catégories avec des caractéristiques techniques - et une personne ne trouve pas la bonne position. Pas parce qu'il est stupide. Mais parce que la navigation sur le site a été conçue de telle manière que même moi, connaissant par cœur la structure du catalogue, j'ai passé quatre ou cinq clics sur le chemin vers un produit spécifique.

Il s'agit d'une histoire typique pour les magasins WooCommerce qui sont passés de petits magasins. Tant que vous disposez de deux cents produits, un menu déroulant standard suffit. Un millier est déjà bondé, mais c'est tolérable. Cinq mille ou plus - la navigation devient un goulot d'étranglement par lequel les commandes s'écoulent. J'ai vu des analyses provenant de dizaines de magasins et je peux dire une chose : la différence entre une bonne et une mauvaise navigation n'est pas une « expérience utilisateur » abstraite. C'est de l'argent. Argent spécifique et mesurable sous forme de conversion, qui diffère d'une fois et demie à deux fois.

Et c'est là que le plaisir commence. La navigation WordPress standard est, pour le moins, un outil des années 2000. Listes déroulantes en survol, structure linéaire, aucun repère visuel. Bien pour un blog. Pour une boutique en ligne avec des milliers de SKU, non. Lorsque j’ai commencé à vraiment comprendre ce problème, j’ai réalisé que la navigation dans le commerce électronique n’est pas un élément, mais un système de trois composants interconnectés. Méga-menu pour ordinateur, qui révèle la structure du catalogue sous la forme d'un plan d'un centre commercial. Menu inférieur mobile qui conserve les actions clés sous votre pouce, comme dans Ozon ou Wildberries. Et un panier pop-up qui confirme l’action de l’utilisateur sans interrompre son parcours dans le catalogue. Supprimez l’un de ces trois éléments et vous obtenez un trou dans l’entonnoir par lequel les clients partent. Chacun d’eux résout son propre problème, mais ensemble, ils créent cette « fluidité » dont les concepteurs UX aiment parler.

En fait, c'est pourquoi nous avons intégré les trois composants dans notre plugin COS WP Woo. Non pas en tant que modules complémentaires séparés, mais en tant que système de navigation unifié, dans lequel le méga menu, le menu mobile et le panier contextuel sont configurés à partir d'un seul panneau, partagent des styles communs et fonctionnent comme un mécanisme coordonné. Mais tout d’abord, je vais commencer par expliquer pourquoi les solutions standard ne fonctionnent plus et comment y remédier.

Méga menu : quand le menu déroulant se transforme en plan de magasin

Je travaille depuis longtemps avec MaxMegaMenu, un plugin devenu le standard de facto des méga menus pour WordPress. Je ne peux rien dire de négatif sur ce produit : il fait son travail, il a un million d'installations et une communauté active. Mais lorsque vous l'intégrez dans une boutique WooCommerce, les nuances commencent. Premièrement, il s'agit d'un plugin distinct avec son propre écosystème de styles, son propre JavaScript et sa propre logique de rendu. Il ne connaît rien de vos produits, catégories, prix. Pour lui, un menu est un menu, un ensemble de liens imbriqués, et peu lui importe que ces liens mènent à la page « À propos de l'entreprise » ou à un catalogue d'huiles hydrauliques comportant une vingtaine de sous-catégories. Deuxièmement, chaque plugin supplémentaire est constitué de CSS et de JavaScript supplémentaires chargés sur chaque page. Pour un magasin où la vitesse de chargement affecte directement la conversion, ce n’est pas une mince affaire.

Mais ce n'est même pas le problème principal. Le principal problème est qu'un méga menu dans une boutique en ligne n'est pas seulement une navigation. C'est une vitrine. C'est la première chose que voit un visiteur lorsqu'il survole le « Catalogue ». Et cela dépend de la qualité de l'agencement de cette vitrine s'il approfondira le catalogue ou fermera l'onglet. J'ai vu à plusieurs reprises comment, dans un menu déroulant classique, les catégories sont disposées dans une colonne de vingt points qui s'étend sur le bord de l'écran. Une personne déplace sa souris de haut en bas pour essayer de trouver ce dont elle a besoin et glisse accidentellement hors du sous-menu - celui-ci se ferme. Il réessaye, rate encore. La troisième fois, il part à la recherche. Ou alors il s'en va.

Le méga menu résout ce problème d'une manière fondamentalement différente. Au lieu d'une liste verticale, il étend la structure des répertoires horizontalement, en plusieurs colonnes. Vous voyez toutes les catégories principales en même temps, comme les sections d'un supermarché. Huiles industrielles - première colonne. Les fluides hydrauliques viennent en deuxième position. Les lubrifiants viennent en troisième position. L'autochimie est quatrième. Chaque colonne affiche des sous-catégories, et vous vous repèrez instantanément - vous avez besoin d'huiles pour compresseurs, les voici, le deuxième élément de la deuxième colonne, en un clic. Pas quatre, pas cinq – un.

Lorsque j'ai conçu le module méga menu pour COS WP Woo, j'ai été guidé par une réelle expérience avec les magasins. Trois choses étaient importantes pour moi. La première est une présentation à plusieurs colonnes qui peut être personnalisée pour un répertoire spécifique. Tous les catalogues ne sont pas identiques : certains comportent trois catégories principales avec une imbrication profonde, tandis que d'autres en ont vingt à plat. Notre méga-menu vous permet de définir séparément le nombre de colonnes pour chaque élément de niveau supérieur, et cela ne se fait pas via des hacks CSS, mais via une interface visuelle dans le panneau d'administration. La seconde concerne les images et les widgets directement dans le menu. Lorsqu'un visiteur pointe vers la catégorie « Huiles hydrauliques », il voit non seulement une liste de sous-catégories, mais aussi une image, peut-être une bannière avec une promotion ou un widget avec les best-sellers. Cela transforme le menu de navigation en un outil de merchandising à part entière. Le troisième est la vitesse. Le méga menu est rendu sur le serveur via Walker PHP personnalisé, plutôt que généré sur le client via JavaScript. Cela signifie que le menu apparaît instantanément, sans délai pour les requêtes AJAX, sans clignotement, sans « squelettes ».

Walker PHP est peut-être la chose la plus sous-estimée dans le développement WordPress. Le standard Walker_Nav_Menu affiche les menus sous forme de listes ul/li imbriquées, un format qui n'a pas changé depuis les débuts du HTML. Un méga menu nécessite un rendu complètement différent : colonnes, blocs, images, widgets - tout cela doit s'aligner correctement dans le DOM pour que CSS puisse en faire cette même « carte de magasin ». Notre Walker personnalisé analyse la structure du menu WordPress, détermine les niveaux d'imbrication et crée des conteneurs de méga-panneaux pour les éléments de premier niveau. Dans ces panneaux, les éléments de deuxième niveau deviennent des en-têtes de colonnes et les éléments de troisième niveau deviennent leur contenu. Cela semble simple, mais le diable est dans les détails : vous devez gérer correctement un nombre arbitraire de niveaux d'imbrication, des classes CSS personnalisées, des attributs de lien, des descriptions d'éléments de menu - tout cela passe par Walker et doit être enregistré.

Séparément, je veux parler des animations, car c'est le détail sur lequel butent de nombreuses implémentations de méga-menus. Le délai de survol est un paramètre qui semble insignifiant, mais en pratique, il détermine si un menu sera pratique ou ennuyeux. Si le délai est trop court, le menu apparaît à chaque fois que le curseur dépasse accidentellement la navigation. Trop grand - l'utilisateur pointe, attend, pense que de rien ne s'est passé, déplace le curseur - et le menu apparaît à un moment où il n'est plus nécessaire. Nous avons expérimenté différentes valeurs et sommes arrivés à 150-200 millisecondes - le juste milieu, dans lequel le ciblage accidentel est ignoré et les ciblage intentionnels sont traités rapidement. De plus, ce délai est réglable : pour les magasins avec une structure de catalogue simple, il peut être réduit à 100 millisecondes, pour les plus complexes, il peut être augmenté à 250. L'animation de fermeture a également son propre délai, et il doit être légèrement supérieur au délai d'ouverture afin que l'utilisateur puisse déplacer le curseur de l'élément de menu vers le panneau du méga-menu sans le perdre. Ce modèle est appelé le « triangle Amazon » - Amazon a déjà breveté un algorithme qui calcule le vecteur de mouvement du curseur et ne ferme pas le sous-menu si le curseur se déplace vers le panneau. Nous avons implémenté une version simplifiée de cet algorithme : si le curseur quitte l'élément de menu, mais se trouve dans la zone du méga-panneau, le panneau ne se ferme pas.

Il existe également une nuance avec le z-index et le chevauchement du contenu. Un méga menu est, par définition, un élément qui se trouve au-dessus du contenu principal d'une page. Si la page comporte un curseur, un lecteur vidéo, des fenêtres modales d'autres plugins, vous avez besoin que le méga menu soit affiché par-dessus tout cela. Cela semble simple : augmentez le z-index et oubliez-le. Mais dans la pratique, la « guerre des z-index » est l’un des problèmes de mise en page les plus courants. Un plugin définit le z-index à 9999, un autre à 99999, le troisième à 999999. Nous avons abordé cela avec prudence : nous utilisons un z-index fixe, qui est exactement supérieur aux éléments WordPress et WooCommerce standard, mais inférieur aux fenêtres d'administration modales. De plus, nous avons ajouté un paramètre qui vous permet de modifier manuellement le z-index dans les cas où le site dispose de plugins avec des valeurs agressives.

Savez-vous ce qui m'a le plus surpris lorsque j'ai commencé à mesurer les résultats ? Il ne s'agit pas du temps moyen passé sur le site ni de la profondeur de navigation : ces mesures se sont bien sûr améliorées. J'ai été surpris par la conversion sur les appareils mobiles. Il semblerait que le méga-menu soit une affaire de bureau ; vous ne pouvez toujours pas l’afficher dans son intégralité sur un appareil mobile. Mais le fait est qu’un méga-menu correctement structuré sur un ordinateur de bureau définit un modèle mental du catalogue. Celui qui a vu la structure une fois sur grand écran, puis sur son téléphone portable, sait déjà où aller. Il rappelle que les huiles pour compresseurs sont une sous-catégorie des huiles industrielles, et non des huiles hydrauliques. Et même dans la version mobile, où le méga-menu se transforme en accordéon, cette carte mentale fonctionne.

Une autre histoire est la conception visuelle. J'ai vu des méga menus qui ressemblent à une feuille de calcul Excel : fond gris, texte noir, pas de séparation visuelle. Et j'ai vu des méga-menus qui ressemblent à une page de destination distincte : bannières, animations, blocs promotionnels. La vérité, comme d’habitude, est au milieu. Le menu doit être visuellement attrayant, mais pas surchargé. Icônes de catégorie - oui. Une image d’accent pour la promo principale – oui. Animation de l'apparence de chaque élément - non, cela ralentit simplement. Dans notre module, le style est configuré à partir d'un seul panneau : couleurs d'arrière-plan, texte, couleurs de survol, tailles de police, retraits, arrondis - le tout via une interface visuelle familière, sans avoir besoin d'entrer en CSS.

Mais regardons les choses avec pragmatisme. Le méga menu est une histoire de bureau. Sur un écran de 1 200 pixels de large ou plus, il se révèle dans toute sa splendeur, affichant des colonnes, des images et des widgets. Mais que se passe-t-il sur la tablette ? Au téléphone ? Selon SimilarWeb et nos propres analyses, 60 à 75 % du trafic des boutiques en ligne en Russie provient d'appareils mobiles. Et c’est ici que commence la deuxième partie de l’histoire.

Menu inférieur mobile : leçons du marché

Lorsque j'ai installé l'application Ozon pour la première fois - je ne me souviens plus de l'année - j'ai été étonné de voir à quel point les commandes étaient naturelles. Catalogue, recherche, panier, profil, tout est en bas de l'écran, tout est sous votre pouce. Pas besoin de chercher le « burger » dans le coin supérieur gauche, pas besoin de faire défiler vers le haut pour revenir au catalogue. Les actions de base sont toujours disponibles, sur n'importe quelle page, à tout moment. Ensuite, j'ai vu la même chose dans Wildberries. Puis sur Yandex.Market. Le patron est devenu le standard du e-commerce mobile, et pour cause : il repose sur l'ergonomie. La zone où votre pouce peut atteindre confortablement est le tiers inférieur de l’écran. C’est là que doivent être placés les contrôles les plus importants.

Que propose WooCommerce standard ? Menu hamburger dans l'en-tête. Petit, imperceptible, nécessitant une pression précise. Le panier se trouve également dans l'en-tête, une icône mesurant 20 x 20 pixels. Rechercher - une icône en forme de loupe qui reste à trouver. Et tout cela se trouve en haut de l'écran, là où sur les smartphones modernes dotés d'un écran de 6,5 pouces, il est physiquement gênant de l'atteindre d'une seule main. Je n'exagère pas : certaines études montrent que 49 % des utilisateurs de smartphones tiennent leur téléphone d'une seule main. Cela signifie que le haut de l’écran est une zone morte pour près de la moitié de votre audience mobile.

C'est pourquoi nous avons intégré un menu de pied de page mobile à notre plugin. Il ne s'agit pas d'un module complémentaire distinct, ni d'une fonctionnalité premium - un composant de base du système de navigation. Cinq icônes fixes en bas de l'écran : « Accueil », « Catalogue », « Recherche », « Panier », « Profil ». Les icônes sont personnalisables - vous pouvez remplacer « Accueil » par « Promotions », « Profil » par « Favoris », ajouter « Appeler » pour les magasins où les commandes téléphoniques sont importantes. Chaque icône n'est pas seulement un lien, mais un élément avec un badge. Le panier affiche le nombre d'articles et le profil affiche les notifications, le cas échéant. Cliquer sur « Catalogue » ouvre non seulement une page de catalogue, mais un panneau rétractable avec une arborescence de catégories - la même structure du méga-menu, adaptée au format mobile vertical. En cliquant sur « Rechercher », la barre de recherche se concentre avec la saisie semi-automatique.

Voici le problème : le menu inférieur du mobile n'est pas simplement « un autre menu ». Il s’agit d’un changement dans tout le modèle d’interaction des utilisateurs avec le site sur mobile. Sans le menu du bas, le chemin de l'utilisateur ressemble à ceci : est allé à la page principale - a fait défiler jusqu'à la section qui l'intéresse ou est allé au hamburger - a trouvé une catégorie - a sélectionné un produit - ajouté au panier - a fait défiler vers le haut pour trouver l'icône du panier - est allé à la page du panier - a passé une commande. Avec le menu du bas : entré - cliqué sur « Catalogue » - sélectionné une catégorie dans le panneau déroulant - trouvé le produit - ajouté au panier - cliqué sur « Panier » dans le menu du bas - retiré. La différence ne réside pas seulement dans le nombre d’actions, mais aussi dans la charge cognitive. Une personne n'a pas besoin de se rappeler où se trouve tel ou tel contrôle. Il est toujours en bas. Toujours pareil. Toujours disponible.

Et si nous regardions les choses différemment – ​​non pas du point de vue de la commodité, mais du point de vue de la concurrence ? Votre utilisateur se connecte quotidiennement à Ozon, Wildberries, Yandex.Market. Il est habitué au menu du bas. C'est la norme pour lui. Et lorsqu’il vient dans votre boutique WooCommerce et ne voit qu’un hamburger en haut, il perçoit inconsciemment votre site comme obsolète. Non pas parce que votre design est mauvais – peut-être que votre design est génial. Mais le modèle d’interaction indique au cerveau : « ce n’est pas un vrai magasin, c’est quelque chose d’amateur ». Le menu du bas n'a pas pour objectif la commodité en vase clos, il s'agit de répondre aux attentes des utilisateurs formées par les plus grands marchés. Vous êtes en compétition non seulement sur l'assortiment et les prix, mais aussi sur la qualité de l'interface. Et si votre interface est en retard d’une génération par rapport à celle à laquelle l’utilisateur est habitué, cela vous coûte de l’argent.

Un autre aspect rarement évoqué est la compatibilité PWA du menu de pied de page. Si votre boutique WooCommerce est ajoutée à l'écran d'accueil du smartphone en tant qu'application Web progressive, le menu du bas devient critique. En mode PWA, il n'y a pas de barre d'adresse du navigateur, il n'y a pas de bouton « Retour » à l'endroit habituel - l'application fonctionne en mode plein écran, comme en mode natif. Et si vous n'avez pas de menu du bas, l'utilisateur est littéralement bloqué : il n'y a pas de moyen évident de revenir à la page principale ou d'accéder au répertoire. Notre menu inférieur détecte automatiquement le mode PWA (via une requête multimédia en mode d'affichage) et ajuste le remplissage afin de ne pas entrer en conflit avec la navigation du système de l'appareil.

J'ai mesuré l'impact du menu du bas sur un magasin qui vend des matériaux de construction - environ huit mille SKU. Avant la mise en œuvre, le taux de rebond sur mobile était de 62 %. Après - 47 pour cent. La conversion vers l'ajout au panier est passée de 3,8 à 5,1 pour cent. Ce ne sont pas des chiffres révolutionnaires, mais pour un magasin avec un chiffre d'affaires d'un million et demi par mois, la différence entre 3,8 et 5,1 pour cent représente une somme d'argent importante. Et il suffisait d'activer le module, de sélectionner les icônes et les couleurs.

Techniquement, le menu de pied de page mobile est implémenté comme un élément fixe en bas de la fenêtre, qui n'apparaît que sur les écrans plus petits qu'une certaine largeur - la valeur par défaut est de 768 pixels, mais le seuil est configurable. Une nuance importante : le menu ne doit pas chevaucher le contenu de la page. Par conséquent, lorsqu'il est activé, un fond de rembourrage est automatiquement ajouté au corps, égal à la hauteur du menu. Cela semble trivial, mais j'ai vu des implémentations où le menu du bas couvrait le bouton « Passer une commande » lors du paiement. Nous nous en occupons : sur la page de paiement, le menu du bas est automatiquement masqué ou déplacé afin de ne pas interférer avec le processus d'achat.

Un autre point qui passe souvent inaperçu est l'interaction du menu du bas avec le défilement. Si le menu est toujours visible, il grignote un espace vertical précieux, déjà rare sur mobile. C'est pourquoi nous avons l'option "Masquer lors du défilement vers le bas, afficher lors du défilement vers le haut" - le même modèle que Chrome et de nombreuses applications utilisent. L'utilisateur fait défiler le catalogue - le menu s'éloigne doucement du bord, donnant plus d'espace au contenu. Commence à défiler vers le haut - le menu revient. Le comportement est familier, habituel et ne soulève aucune question. Vous pouvez également configurer un affichage complètement statique - pour les magasins où un accès rapide au panier est plus important que des pixels d'espace supplémentaires. Le choix de la stratégie appartient au propriétaire du magasin ; nous proposons uniquement les deux options.

Il convient de mentionner séparément l'adaptabilité dans les tailles intermédiaires - tablettes, petits ordinateurs portables. Sur les appareils d'une largeur comprise entre 768 et 1 024 pixels, le menu inférieur est masqué par défaut, mais vous pouvez forcer son activation. Sur certains sites, cela a du sens : par exemple, si le public principal est constitué d'employés d'entrepôt qui utilisent des tablettes pour commander des fournitures. Pour eux, le menu inférieur de la tablette n'est pas une « béquille mobile », mais un outil pratique d'accès rapide.

Popup panier : empêcher l'utilisateur de quitter la page

Parlons maintenant du troisième élément du système - et peut-être le plus sous-estimé. Chariot pop-up. Le comportement par défaut de WooCommerce après l'ajout d'un produit au panier est de rediriger vers la page du panier. Ou, si vous désactivez la redirection dans les paramètres, un signe quelconque « Article ajouté au panier » apparaîtra avec un lien « Aller au panier ». Dans les deux cas, le parcours utilisateur est rompu. Il a feuilleté le catalogue, a trouvé un produit approprié, a cliqué sur « Ajouter au panier » et a été renvoyé sur la page du panier. Pour continuer la sélection, vous devez cliquer sur « Retour », rappeler où vous vous êtes arrêté et continuer. Ou, pire encore, recommencer.

C'est comme dans un supermarché, après chaque article mis dans votre panier, vous êtes automatiquement transféré en caisse. Absurde? Oui. Mais c’est ainsi que fonctionnent la plupart des magasins WooCommerce. Et c’est ce qui tue le nombre moyen de marchandises dans un chèque.

Le panier contextuel fonctionne différemment. Cliquez sur « Ajouter au panier » - un mini-panier apparaît dans le coin de l'écran : une liste des produits ajoutés, la quantité, le montant total, les boutons « Passer à la caisse » et « Continuer les achats ». La fenêtre contextuelle dure trois à cinq secondes et disparaît progressivement. Ou ne disparaît pas si l'utilisateur le survole. La personne voit une confirmation - "oui, le produit a été ajouté, le voici dans la liste" - et continue de feuilleter le catalogue. Aucune redirection, aucune perte de contexte, aucune perte d'attention.

J'ai expérimenté différents formats de popup. La notification toast dans le coin supérieur droit est minimaliste, mais ne fournit pas d'informations sur le contenu du panier. Une superposition plein écran est informative, mais trop intrusive ; cela ne brise pas le flux plus mal qu'une redirection. La barre latérale coulissante est un bon compromis pour les écrans plus grands, mais occupe la totalité de l’écran sur mobile. Finalement, j’ai opté pour une approche hybride. Sur le bureau, il y a un panneau coulissant sur la droite, d'environ 380 pixels de large. Il montre le contenu du panier, chaque article avec une vignette, son nom, son prix et sa quantité. Vous pouvez modifier la quantité directement dans la popup, supprimer un produit et voir le total. Sur les appareils mobiles, il y a une fenêtre modale en bas (feuille inférieure), qui occupe les deux tiers inférieurs de l'écran et se ferme en glissant vers le bas. C’est le modèle que les utilisateurs ont l’habitude de voir dans les applications mobiles, et il semble natif.

Honnêtement, c'est le panier pop-up qui a donné l'augmentation la plus notable du chèque moyen dans les magasins où nous l'avons mis en œuvre. Un magasin de pièces automobiles a constaté une augmentation du nombre moyen d'articles par commande de 2,3 à 3,1 après avoir activé la fenêtre contextuelle. Un autre magasin, un magasin de produits chimiques industriels, a vu son taux de conversion passer de 4,2 à 5,8 pour cent. La logique est claire : lorsque l'utilisateur reste dans le catalogue après avoir ajouté un produit, il continue d'acheter. Lorsqu’il est renvoyé sur la page du panier, il évalue si « c’est trop cher » et part réfléchir.

Il y a un autre point subtil lié au panier pop-up. Il s’agit de vente croisée. Dans la popup, en plus du contenu du panier, vous pouvez afficher le bloc « Acheter avec ce produit » ou « Cela pourrait vous être utile ». WooCommerce stocke déjà des données sur les produits de vente croisée et incitative – notre popup les utilise simplement. J'ai vu des implémentations où la vente croisée dans une pop-up générait jusqu'à 12 % de revenus supplémentaires. Mais il est important de ne pas en faire trop : si une popup se transforme en une page séparée avec cinq blocs de recommandations, elle cesse d’être une « confirmation rapide » et devient un irritant. Nous avons limité les ventes croisées dans le pop-up à deux ou trois positions – suffisamment pour suggérer, pas assez pour imposer.

Et si vous avez des produits variables ? Comportement standard de WooCommerce pour les produits variables - sur la page du catalogue, le bouton « Ajouter au panier » est remplacé par « Sélectionner les options » et cliquer dessus mène à la page du produit. C'est une autre lacune : une personne feuilletait le catalogue, voyait le produit qu'elle voulait, voulait l'ajouter rapidement - mais non, elle était envoyée sur une page séparée pour choisir la taille ou la viscosité de l'emballage. Notre popup peut fonctionner avec des variantes à vue rapide : lorsque vous cliquez sur un produit variable dans le catalogue, vous pouvez afficher un mini-sélecteur directement dans la popup - sélectionnez la variante souhaitée, ajoutez-la et continuez à faire défiler. Ce n'est pas une solution universelle : elle fonctionne bien lorsqu'il y a peu de variantes (deux ou trois packagings), et moins pratique lorsqu'il y a vingt variantes avec deux axes de choix. Mais pour un catalogue B2B typique, où les variations sont des volumes de conditionnement (1 litre, 5 litres, 20 litres, 200 litres), cela fait mouche.

Un autre scénario que nous avons proposé est le comportement d'une popup lorsque le panier est vide. Le premier produit ajouté est le moment où la popup doit être particulièrement informative. En plus du produit lui-même, nous affichons la livraison gratuite (si elle est configurée en fonction du seuil de montant) : "Ajoutez 3 200 roubles supplémentaires. pour la livraison gratuite." Cet élément - une barre de progression pour la livraison gratuite - est l'un des facteurs de motivation les plus efficaces pour augmenter le chèque moyen. Selon nos données, cela ajoute 8 à 15 % au montant moyen des commandes, simplement parce que cela crée une motivation de « jeu » : « juste un peu plus et la livraison est gratuite ». Tous les magasins n'offrent pas la livraison gratuite, mais ceux qui le font bénéficient d'un effet notable grâce à cet élément.

L'implémentation technique du panier contextuel est liée à l'ajout au panier WooCommerce AJAX. Lorsque l'utilisateur clique sur « Ajouter au panier », une requête AJAX pour ajouter un produit est déclenchée. Notre JavaScript intercepte l'événement d'ajout réussi - l'événement add_to_cart, que WooCommerce envoie via jQuery - et affiche une fenêtre contextuelle avec le contenu réel du panier. Le panier est mis à jour via l'API WooCommerce Cart Fragments, ce qui signifie que les données sont toujours à jour, même si l'utilisateur a ouvert le site dans plusieurs onglets. Cela fonctionne sans requêtes AJAX supplémentaires au serveur - les fragments du panier sont déjà mis à jour par WooCommerce après chaque ajout, nous utilisons simplement ces données pour afficher la fenêtre contextuelle. Pas de double requête, pas de charge de serveur au-delà de la norme - la popup est intégrée au flux de données WooCommerce existant, plutôt que de créer son propre flux parallèle. Pour les magasins à fort trafic, cela est d'une importance cruciale : chaque requête AJAX supplémentaire à ajouter au panier représente une charge supplémentaire sur PHP, sur la base de données et sur le cache de session Redis.

Trois en un : pourquoi un seul système vaut mieux que trois plugins distincts

Regardons maintenant tout cela de l'autre côté - du côté de l'administrateur du magasin, qui doit configurer et maintenir tout cela. Supposons que vous décidiez d'ajouter séparément un méga menu, un menu de pied de page mobile et un panier contextuel. Trois plugins, trois interfaces de paramètres différentes, trois ensembles de styles CSS, trois files d'attente JavaScript. MaxMegaMenu – 79 $ par an pour la version Pro. WP Mobile Bottom Menu (ou équivalent) – 39 à 49 dollars supplémentaires. Popup de panier - WooFunnels ou spécialisé - de 49 à 99 dollars. Total de 170 à 230 dollars par an pour la navigation uniquement. Plus incompatibilité de styles : chaque plugin utilise sa propre palette, ses propres polices et ses propres indentations. Vous configurez le méga menu dans les tons bleus, et le menu mobile d'un autre plugin avec des accents verts, car il a une interface différente et une logique de style différente. Un panier pop-up est généralement dessiné dans le troisième style. L'intégrité visuelle va en enfer.

Dans COS WP Woo, les trois composants sont stylisés à partir d'un seul panneau. Vous définissez les couleurs principales - arrière-plan, texte, accent, survol - et elles sont automatiquement appliquées aux trois éléments. Le méga menu, le pied de page mobile et le panier contextuel semblent faire partie de la même conception, car ils font partie de la même conception. Une feuille de style, un fichier JavaScript, un ensemble de paramètres. Il n'est pas nécessaire de jongler avec trois panneaux d'administration : tout est au même endroit, dans la section « Showcase » de notre plugin.

Mais il ne s'agit pas seulement de facilité d'installation. Un système unifié offre des avantages techniques qui ne sont pas possibles lors de l’utilisation de plugins séparés. Le menu inférieur mobile « connaît » le panier contextuel. Lorsque l'utilisateur clique sur l'icône du panier dans le menu du bas, la même fenêtre contextuelle avec un mini-panier s'ouvre, plutôt que d'accéder à une page séparée. Le méga-menu « connaît » le menu mobile : sur le bureau, un méga-panneau à part entière est rendu ; sur mobile, la même structure se transforme en accordéon, accessible via le menu du bas. Le pop-up cart « connaît » le méga-menu : si le pop-up est ouvert et que l'utilisateur survole le méga-menu, le pop-up est correctement masqué pour ne pas bloquer la navigation. Toutes ces interactions ne peuvent pas être réalisées lorsque les trois éléments sont trois plugins indépendants qui ne se connaissent pas.

Un autre aspect important est la performance. Les trois plugins distincts sont trois fichiers CSS distincts et trois fichiers JS distincts chargés sur chaque page. Notre module combine tout en un seul CSS et un JS. Sur les appareils mobiles dotés de connexions lentes, la différence entre le téléchargement de six fichiers et le téléchargement de deux peut être de 200 à 400 millisecondes, ce qui n'est pas un nombre énorme, mais dans le contexte de Core Web Vitals et de PageSpeed ​​​​Insights, chaque centaine de millisecondes compte. Google a depuis longtemps fait de la vitesse de chargement un facteur de classement, et pour le commerce électronique, cela est particulièrement critique : chaque seconde de retard réduit la conversion de 7 % - cette statistique est fournie par Amazon, et je n'ai aucune raison de douter de leurs données.

Je voudrais m'attarder spécifiquement sur la migration depuis MaxMegaMenu, car c'est une question qui se pose pour un utilisateur potentiel sur deux. Vous avez déjà mis en place un méga-menu via MaxMegaMenu, passé des heures à configurer des colonnes, des icônes, des widgets - et maintenant quoi, tout refaire ? Non. Nous avons mis en place une migration automatique. Notre module peut lire les métadonnées MaxMegaMenu - paramètres des éléments de menu, nombre de colonnes, widgets liés - et les importer dans son format. Je ne dirai pas que la migration est à cent pour cent : les styles CSS personnalisés de MaxMegaMenu ne sont pas transférés automatiquement car le balisage est différent. Mais la structure - colonnes, imbrications, icônes - est entièrement transférée. En pratique, cela signifie qu'au lieu de passer plusieurs heures de configuration manuelle, vous passez cinq minutes à importer automatiquement et vingt minutes supplémentaires à peaufiner les styles.

Honnêtement, la question de la migration a été l'une des plus douloureuses lors de la conception du module. J'ai longtemps réfléchi à la question de savoir si cela valait la peine de s'inquiéter de la compatibilité. MaxMegaMenu stocke ses paramètres dans wp_postmeta sous la forme d'un tableau sérialisé - l'analyser est un plaisir. Mais ensuite j'ai fait le calcul : notre client principal compte dix-sept mille produits répartis en douze catégories principales, chaque catégorie est configurée dans MaxMegaMenu avec des colonnes, des icônes et des descriptions individuelles. Transfert manuel - deux à trois jours de travail. Automatique - cinq minutes. Le choix est évident. De plus, MaxMegaMenu est l'un des plugins de méga-menu les plus populaires, et une partie importante des utilisateurs potentiels de notre plugin en migreront.

Je souhaite m'attarder sur un autre point qui peut paraître technique, mais qui en pratique détermine la qualité de la navigation : l'adaptation réactive. Le méga menu devrait fonctionner correctement sur n’importe quelle taille d’écran. À 1920 pixels, il y a des colonnes pleines d'images. 1366 a les mêmes colonnes, mais un peu plus étroites. À 1024, il peut y avoir un nombre réduit de colonnes ou d'images masquées. A 768 et moins - transformation au format mobile. Il ne s’agit pas simplement de « masquer sur mobile » : il s’agit d’une dégradation intelligente, lorsque le contenu s’adapte à l’espace disponible tout en conservant la fonctionnalité.

Notre implémentation de méga menu utilise CSS Grid pour la disposition des colonnes. Cela vous permet de restructurer avec élégance via des requêtes multimédias sans JavaScript. Sur grands écrans - un nombre spécifié de colonnes. Sur celles du milieu, les colonnes sont combinées ou réorganisées en deux. Sur les petits, tout se transforme en accordéon vertical. Les transitions entre formats sont fluides, sans à-coups, sans redessinage de page. Pour un menu inférieur mobile, l'adaptatif est également important : hauteur du menu, taille des icônes, taille du badge - tout cela évolue en fonction de la taille de l'écran. Sur le petit iPhone SE, les icônes sont un peu plus compactes, sur le grand Samsung elles sont un peu plus spacieuses. Pas de pixels fixes, mais des unités relatives qui s'adaptent au contexte.

Par ailleurs, il convient de parler de compatibilité des thèmes - un problème qui inquiète tous ceux qui ont déjà rencontré des conflits de plugins dans WordPress. Les boutiques WooCommerce fonctionnent sur des centaines de thèmes différents : Astra, OceanWP, Flatsome, Porto, The7, Woodmart, Storefront - et chacun d'entre eux implémente la navigation différemment. Certains thèmes utilisent le wp_nav_menu standard, d'autres utilisent leurs propres moteurs de rendu personnalisés. Certaines personnes connectent leurs propres méga-menus, qui entrent en conflit avec ceux des plug-ins. Notre module de navigation est conçu pour fonctionner sur n'importe quel thème sans casser ses styles ni entrer en conflit avec son JavaScript. Le méga menu est connecté via le filtre standard wp_nav_menu_args, qui intercepte le rendu d'un emplacement de menu spécifique (généralement le menu principal ou principal) et remplace le Walker standard par notre personnalisé. Le CSS est écrit avec une grande spécificité et des sélecteurs de portée afin que les styles de thème ne s'infiltrent pas dans le méga panneau et vice versa. JavaScript utilise son propre espace de noms et n'entre pas en conflit avec les gestionnaires de thèmes jQuery.

Nous avons testé la compatibilité avec douze des thèmes WooCommerce les plus populaires, et je peux dire que sur dix sur douze, tout a fonctionné immédiatement. Deux paramètres minimaux requis - spécifiez l'emplacement correct du menu et ajustez un sélecteur CSS. Pour Porto, que nous utilisons sur notre propre projet, la compatibilité est parfaite - nous avons littéralement migré de MaxMegaMenu vers notre module sur un magasin de dix-sept mille produits, et les utilisateurs n'ont même pas remarqué la différence. Plus précisément, ils l'ont remarqué - mais pour le mieux : le menu a commencé à s'ouvrir plus rapidement, car le JavaScript supplémentaire MaxMegaMenu, chargé sur chaque page, a disparu.

Un autre point que j'aimerais aborder est l'aspect SEO de la navigation. Google est depuis longtemps capable de contourner les méga-menus et les liens d'indexation. Mais il existe une différence entre la façon dont le bot voit le menu JavaScript côté client et le menu HTML côté serveur. Notre méga menu est rendu sur le serveur - tous les liens sont présents dans le HTML avant le chargement du JavaScript. C'est une situation idéale pour les robots de recherche : ils voient la structure de navigation complète, toutes les catégories et sous-catégories, sans avoir à exécuter JavaScript. Ceci est particulièrement important pour les jeunes magasins qui commencent tout juste à gagner en masse de liens : une navigation bien structurée permet de répartir le PageRank de manière uniforme dans toutes les catégories. Chaque lien du méga menu est un lien interne qui transfère du poids. La structure correcte du méga-menu est, en fait, une architecture de liens internes bien pensée qui fonctionne automatiquement, sans qu'il soit nécessaire de placer manuellement des liens dans les textes.

Savez-vous ce que je pense être la chose la plus importante dans toute cette histoire de navigation ? Il ne s'agit pas de détails techniques de mise en œuvre - ils peuvent être résolus d'une douzaine de manières différentes. Et pas même de chiffres précis de croissance des conversions : ils varient d’un magasin à l’autre. Le plus important est une approche systématique. Naviguer dans une boutique en ligne ne se résume pas à trois tâches distinctes (méga menu, menu mobile, panier). C'est un seul objectif : guider l'utilisateur depuis la connexion au site jusqu'à la passation d'une commande avec le minimum de frictions. Le méga menu révèle la structure des répertoires et donne un aperçu. Le menu inférieur mobile offre un accès constant aux fonctions clés. Le panier pop-up confirme l'action et vous permet de continuer sans interruption. Trois composants - un système. Et lorsqu’ils fonctionnent ensemble comme un seul mécanisme, l’effet est supérieur à la somme de leurs parties.

J'entends souvent les commerçants dire : « Nous avons de bons produits, des prix normaux, mais les ventes n'augmentent pas. » Et quand je commence à m’y pencher, la moitié du temps, le problème ne vient ni du produit ni des prix. Le problème est qu'une personne ne peut pas naviguer normalement sur le site. Il vient, voit un mur de catégories dans un menu déroulant standard, fouille au hasard, ne trouve pas ce dont il a besoin et s'en va. Soit il le trouve, l'ajoute au panier, et est projeté de la page du catalogue à la page du panier, il perd le contexte et oublie qu'il voulait commander deux articles supplémentaires. Ou bien, sur son téléphone portable, il essaie d'accéder au catalogue, rate un petit hamburger, se met en colère et le ferme.

Ce sont tous des problèmes résolubles. De plus, ils peuvent être résolus sans repenser le site, sans changer de thème, sans faire appel à une agence pour un demi-million de roubles. Activez trois modules dans un seul plugin, trente minutes pour configurer les styles et la structure - et la navigation de votre boutique fonctionne au niveau Ozon. Pas parce que je veux vous vendre une solution miracle : il n’y a pas de solution miracle. Mais parce que la navigation n’est pas compliquée. Ce sont des modèles éprouvés qui doivent simplement être mis en œuvre correctement. Un méga menu avec des colonnes et des visuels, un menu miniature mobile, un panier contextuel sans interruption - trois éléments qui, ensemble, transforment un « site avec des marchandises » en un « magasin où il est pratique d'acheter ».

J'ai récemment parlé avec un propriétaire de magasin d'électricité qui utilisait la navigation WooCommerce standard depuis trois ans. Lorsque je lui ai demandé pourquoi il n'avait pas encore installé de méga menu, il a répondu : « J'ai essayé MaxMegaMenu il y a un an, mais cela était en conflit avec le thème, j'ai dû le désactiver. L’histoire classique : j’ai essayé, ça n’a pas marché, et j’ai décidé que le méga-menu n’était pas pour lui. Mais le problème ne résidait pas dans le concept du méga-menu, mais dans la mise en œuvre spécifique, qui ne prenait pas en compte les particularités de son thème. Nous avons installé notre module - tout a fonctionné du premier coup, car nous testons la compatibilité avec les thèmes populaires et résolvons les conflits au niveau architectural, et non avec des béquilles.

Si votre boutique WooCommerce s'est développée au-delà de la navigation standard et que la conversion sur mobile laisse beaucoup à désirer, jetez un œil aux modules Mega Menu, Footer Menu et Cart Popup dans COS WP Woo. Essayez-le sur un serveur intermédiaire, comparez le comportement des utilisateurs avant et après. Les chiffres diront tout eux-mêmes. Et si vous utilisez déjà MaxMegaMenu, la migration automatique rendra la transition indolore. Un plugin au lieu de trois, un style uniforme, un fonctionnement coordonné de tous les composants. La navigation est la base de la conversion, et cette fondation doit être transparente. Et si vous avez des questions sur l’installation ou la migration, écrivez-nous et nous étudierons votre situation. En sept ans de travail avec les magasins WooCommerce, je n'ai jamais vu un catalogue qui ne puisse être rendu pratique. Parfois, cela nécessite une refonte complète. Mais le plus souvent - une navigation correcte, qui permet à l'acheteur de trouver ce qu'il cherche en ces trois mêmes clics. Et si votre magasin en nécessite désormais cinq ou six, alors il est temps de changer quelque chose.