143 paniers, 35 commandes : le coupable était la bannière cookies

Une boutique en ligne que nous exploitons enregistrait 143 paniers créés sur un mois, pour 35 passages en caisse. Trois quarts des acheteurs abandonnaient entre le moment où ils ajoutaient un produit et le moment où ils devaient payer.

Les explications habituelles ne manquaient pas : frais de port découverts trop tard, prix trop élevé, tunnel trop long. Nous avons regardé les chiffres de trafic, les frais de port, les moyens de paiement. Rien d’anormal.

Le coupable était une bannière de consentement aux cookies, superposée à un pop-up de collecte d’e-mails, qui recouvrait ensemble le bouton de commande sur mobile. Pas partiellement : intégralement. Le visiteur voyait son panier, appuyait à l’endroit du bouton, et rien ne se passait, parce qu’il appuyait sur le calque du dessus.

Vous lisez la suite le mardi

Ce genre de mesure, on en publie une par semaine dans la lettre : ce qu'on a testé, ce que ça a coûté, ce qu'on a arrêté. Quatre minutes, le mardi matin.

Ne pas remplirAdresse e-mailJe m'inscris

En validant, vous acceptez de recevoir la lettre. Désinscription en bas de chaque envoi.

Pourquoi ce défaut est invisible depuis un bureau

Sur l’écran large d’un ordinateur, les deux calques s’affichent dans des zones différentes et ne gênent personne. La bannière prend le bas de l’écran, le pop-up occupe le centre, le bouton reste dégagé sur la droite. Tout le monde dans l’équipe teste depuis son ordinateur, tout le monde valide.

Sur un écran de 390 pixels de large, les deux éléments se replient l’un sur l’autre et remplissent le bas de l’affichage, exactement là où le bouton principal est fixé. C’est pour cette raison qu’un audit de tunnel se fait aux largeurs 390, 768 et 1024, et pas à celle de la machine du développeur.

Deuxième raison de l’invisibilité : ni la bannière ni le pop-up n’appartiennent au thème. Ce sont deux applications tierces installées à des dates différentes, par deux personnes qui ne se parlaient pas. Aucune des deux n’était fautive isolément. Leur superposition l’était.

Comment nous l’avons trouvé

Pas à l’œil. Nous avons fait piloter un vrai navigateur par un agent, avec pour consigne d’exécuter le parcours d’achat complet à 390 pixels de large, jusqu’à la page de paiement, et de signaler le premier clic sans effet.

L’agent est resté bloqué au même endroit que les clients, et il a rapporté quelque chose qu’aucun outil d’analyse ne dit : le nom de l’élément qui recevait réellement le clic. Une carte de chaleur montre que les gens cliquent sur le bouton. Elle ne dit pas que le clic atterrit sur autre chose.

C’est la différence entre observer un tunnel et le parcourir. Les statistiques disent où les gens s’arrêtent. Elles ne disent jamais pourquoi, et l’écart entre les deux se paie en commandes perdues.

Le second effet, sur la vitesse

En reprenant ces calques, nous avons corrigé au passage un décalage visuel : le décalage cumulé de mise en page est passé de 0,29 à 0,09 sur mobile. Le responsable était une section vide, sans contenu, étirée par une règle de grille appliquée au corps de page. Elle ne se voyait pas. Elle poussait tout le contenu vers le bas au chargement, une fraction de seconde après l’affichage.

Le piège pendant la correction : des identifiants HTML dupliqués sur la page. Une correction ciblée par identifiant s’appliquait au mauvais élément, ce qui donnait l’impression que le correctif ne marchait pas alors qu’il marchait, ailleurs.

Le protocole à appliquer une fois par trimestre

Ouvrez votre site à 390 pixels de large, en navigation privée, sur une connexion volontairement bridée. Faites le parcours complet jusqu’au paiement. À chaque étape, vérifiez trois choses : le bouton principal est visible sans défilement, il réagit au premier appui, et aucun calque n’est apparu depuis la dernière étape.

Refaites-le après chaque installation d’application tierce, sans exception. Les applications de consentement, de pop-up, de chat et d’avis clients se posent toutes en position fixe au bas de l’écran. Elles se battent pour le même espace, celui de votre bouton d’achat.