Bouton “Ajouter au Panier” Sticky ? Voici pourquoi il faut le mettre en place

Au cours des 5 dernières années, nous avons remarqué que le design et l’UX de la section d’ajout au panier (boutons d’achat, options, contrôle des quantités) font l’objet de nombreux débats.

  • Le bouton “Ajouter au panier” doit-il être collant (sticky) ?
  • Devrions-nous rendre toute la section collante ?
  • Faut-il masquer certaines sélections (taille, couleur, saveur) ou les afficher toutes ?
  • Devrions-nous afficher toutes les tailles sous forme de boutons ou les placer dans une liste déroulante ?
  • Dans quel ordre devons-nous présenter les différentes options ?

Cette étude de cas porte sur la première question.

Dans cet article, nous présentons les résultats de quelques tests AB où nous avons testé le fait que toute la zone d’ajout au panier soit collante ou non collante sur les appareils de bureau pour un site de commerce électronique dans le domaine des compléments alimentaires.

La variante avec le bouton collant d’ajout au panier, qui reste fixé sur le côté droit de la page lorsque l’utilisateur fait défiler celle-ci, a enregistré 7,9 % de commandes supplémentaires. Pour les marques d’eCommerce qui réalisent un chiffre d’affaires de 10M d’euros et plus à partir du trafic de leur page produit, une augmentation de 7,9 % des commandes représenterait un chiffre d’affaires supplémentaire de 790 000 euros par an.

Cependant, tous les cas où les contrôles d’ajout au panier sont collants n’ont pas augmenté le taux de conversion, comme nous l’expliquons ci-dessous.

D’après notre expérience, les zones d’ajout au panier collantes sur les pages produits des ordinateurs de bureau sont moins courantes que sur les mobiles. Ce résultat suggère donc que de nombreuses marques d’eCommerce, équipes de marketing et propriétaires de magasins pourraient bénéficier de tests AB sur les boutons d’ajout au panier collants ou sur les zones d’ajout au panier collantes sur leurs pages détaillées de produits.

En général, ce type de test s’inscrit parfaitement dans l’objectif de “facilité d’utilisation” de notre cadre d’objectifs.

+20 Tests A/B Gagnants

Maximisez votre Taux de Conversion en téléchargeant notre guide GRATUIT.

Les tests d’utilisabilité sont des modifications de l’interface utilisateur et c’est à eux que la plupart des gens pensent lorsqu’ils entendent “AB testing”. Mais en général, ce n’est pas grâce à eux que vous obtiendrez des augmentations constantes et à long terme du taux de conversion, parce que la plupart des sites de commerce électronique modernes ont déjà une UX suffisamment bonne.

Au lieu de cela, nous suggérons : (1) de suivre et de tracer les objectifs que vous testez le plus souvent et ceux qui l’emportent et (2) d’être plus intentionnel en décidant quels objectifs sont susceptibles de faire bouger l’aiguille pour vos clients et de se concentrer systématiquement sur eux.

Nous expliquons plus en détail dans notre article sur le cadre des objectifs pour ceux qui sont curieux. Vous pouvez également voir tous les tests A/B d’eCommerce que nous avons réalisés, organisés par objectif, dans notre base de données en ligne.

Note : Si vous souhaitez effectuer des tests AB comme celui-ci pour augmenter le taux de conversion de votre site de commerce électronique ou améliorer l’expérience des utilisateurs, on peut s’en occuper pour vous; Plus d’informations en cliquant ici.

Construire une culture fondée sur les données : Les tests AB peuvent aider à résoudre un débat sans fin

La salle de conférence : Là où le bouton sticky d’ajout au panier est probablement débattu non-stop avec peu de progrès utiles.

Lorsque vous lisez des articles sur les tests AB en ligne, la plupart d’entre eux présentent un schéma prévisible : (a) Nous avions une hypothèse intéressante. (b) nous l’avons testée (c) elle a fonctionné et a permis d’augmenter les conversions !

Mais lorsque vous effectuez suffisamment de tests AB, vous finissez par apprendre que la plupart des tests ne se terminent pas de manière aussi nette et propre.

Nous vous invitons donc à réfléchir à un autre cas d’utilisation des tests AB, qui n’en est pas moins intéressant:

Effectuez un test pour mieux connaître vos clients , même si vous pouvez avancer des arguments en faveur de l’une ou l’autre variante et qu’il n’y a pas de consensus sur celle qui va “manifestement gagner” (une expression que nous entendons souvent de la part de nos clients).

Utilisons l’exemple de cet article pour comprendre pourquoi ce cas d’utilisation “tests ab pour l’apprentissage” est si utile : Pour cet exemple de bouton collant d’ajout au panier, dans le processus de conception traditionnel, les personnes de l’entreprise débattraient dans une salle de conférence (ou par email, ou dans Slack), sur le fait d’avoir une zone collante ou non collante d’ajout au panier sur leur page produit.

Ils tournent en rond et se disputent pour savoir lequel est le meilleur, lequel est le plus fidèle à la marque, quels sont les concurrents qui font quelque chose de similaire, et ainsi de suite.

Ensuite, soit la personne la plus haut placée l’emporte, soit un cadre intervient et donne sa décision officielle comme César au Colisée (même si, dans 99 % des cas, le cadre n’est pas un expert UX).

Mais en réalité, aucun des deux camps ne sait lequel des deux sera le plus performant. Les deux arguments sont légitimes. Un test AB permet à vos clients de donner leur avis.

Enfin, la variante qui l’emporte est importante, mais pas autant que les enseignements tirés de la façon dont votre client pense, de ce qu’il préfère et de ce qui est le plus persuasif pour lui, autant d’éléments que vous pouvez apprendre en effectuant simplement un test.

Les variantes : Boutons fixes ou collants d’ajout au panier

Les variations étaient simples. Dans l’une d’entre elles (A), le bouton d’achat n’était pas collante et dans l’autre (B), il l’était :

(A à gauche, B à droite)

Dans ce cas, la page produit du client avait un bouton d’achat collant (variation B) au départ, et elle n’avait pas encore été testée. La raison pour laquelle nous avons décidé de faire ce test est qu’il y avait une culture axée sur le contenu autour de la marque, et nous avons pensé qu’il était important d’apprendre à quel point les utilisateurs veulent être laissés tranquilles pour lire le contenu plutôt que d’avoir une demande d’achat plus directe qui les suit tout au long de la page.

Il est possible d’avancer des arguments théoriques en faveur des deux variantes :

  • Argument en faveur de la variante A (non collante): Vous ne voulez pas que le site se comporte comme un vendeur pressant, planant au-dessus de votre épaule alors que vous essayez simplement de lire des informations sur le produit et ses avantages. Cela rebuterait les gens.
  • Argument en faveur de la variante B (collante) : les gens peuvent très bien lire des informations sur le produit, et le fait de leur rappeler la possibilité d’ajouter au panier augmentera le pourcentage de personnes qui le font.

C’est pourquoi, d’ailleurs, nous basons les tests A/B sur une série de questions plutôt que sur des hypothèses à l’ancienne où quelqu’un prétend savoir quel sera le résultat : “Le bouton collant convertira mieux, faites-moi confiance !

Dans ce test, il n’y a en réalité que deux questions principales auxquelles il faut répondre :

  • Le fait de rendre la zone d’ajout au panier collante affecte-t-il les taux d’ajout au panier ?
  • Cela affecte-t-il également le taux de conversion ? En d’autres termes, si les gens ajoutent davantage au panier, passent-ils plus souvent à la caisse ?

Résultats : Le bouton adhésif “Ajouter au panier” permet d’augmenter les commandes de 8 %.

Dans ce test, la version collante de l’ajout au panier a généré 7,9 % de commandes supplémentaires à partir des pages de produits, avec un taux de signification de 99 %. La version collante a également enregistré une augmentation de 8,6 % des ajouts au panier, avec un taux de signification de plus de 99 %. Le test a duré 14 jours et a enregistré environ 2 000 conversions (commandes) par variation.

Si l’on se réfère aux arguments des deux parties ci-dessus, ce test a fourni au département marketing et à nous-mêmes des informations précieuses sur le client (et a permis d’éviter un changement futur potentiellement préjudiciable à la conversion en annulant la zone collante d’ajout au panier).

Malgré l’importance accordée par cette marque au contenu, malgré le besoin des clients de lire beaucoup d’ informations sur l’utilisation des produits, leurs avantages, leurs ingrédients et autres, le fait d’avoir une zone d’ajout au panier omniprésente semble convenir aux clients. Elle n’a pas ennuyé les clients et semble même avoir augmenté le pourcentage de ceux qui ont décidé d’acheter. Il s’agit là d’un enseignement utile.

(Remarque : ceci fonctionne pour cette boutique, mais pas nécessairement pour le vôtre. C’est pourquoi nous suggérons toujours, à la fin des études de cas, d'”envisager de tester” cette solution. Nous ne disons pas qu’il faut le faire).

Cet apprentissage peut en fait être étendu au-delà des pages de produits aux pages de contenu telles que les articles de blog où nous pouvons tester d’être plus agressifs avec les liens et les placements de produits pour voir si des résultats similaires peuvent être obtenus.

C’est pourquoi nous aimons utiliser les tests AB pour l’apprentissage.

Mise à jour : le bouton collant d’ajout au panier sur les pages de produits mobiles a également augmenté le taux de conversion

Depuis la première rédaction de cette étude de cas, nous avons testé plusieurs traitements UX pour un bouton d’ajout au panier collant de cette même boutique d’e-Commerce. L’écran étant plus petit sur les appareils mobiles, il est plus difficile de trouver des CTA comme le bouton d’ajout au panier, et le fait de rendre ce bouton collant pourrait améliorer l’expérience des utilisateurs.

Nous avons testé trois variantes : (A) Pas de bouton collant d’ajout au panier (B) Bouton collant d’ajout au panier qui fait simplement défiler l’utilisateur jusqu’à la zone d’ajout au panier sur la page du produit (C) Bouton collant d’ajout au panier qui fait glisser la zone d’ajout au panier depuis le bas de la page, comme un tiroir caché:

(A à gauche, B au milieu, C à droite)

Nous avons observé une augmentation de 4,8 % des commandes pour la variation C, où la zone d’ajout au panier se soulève comme un tiroir. Ce test a duré 14 jours et a donné lieu à plus de 3 000 événements de conversion (commandes) par variation (soit plus de 9 000 événements de conversion au total).

Les clics d’ajout au panier ont augmenté de 12,3 % pour la variante C et de 5,7 % pour la variante B. L’utilisation effective du bouton a donc été considérablement augmentée en rendant le bouton d’ajout au panier collant sur mobile.

La variante B – où le fait de cliquer sur le bouton collant d’ajout au panier fait simplement défiler les utilisateurs jusqu’à la zone d’ajout au panier – n’a en revanche montré aucune différence statistiquement significative en termes de taux de conversion par rapport à l’original. Cette différence entre la variation C, qui montre une nette augmentation, et la variation B, qui ne montre aucune différence, peut s’expliquer par les raisons suivantes :

  • Le “tiroir” coulissant de la fonctionnalité d’ajout au panier (choix d’une variante, d’une quantité, etc.) dans la variante C a peut-être permis aux utilisateurs de se concentrer sur cette étape parce qu’ils ont l’impression de se trouver dans une nouvelle “sous-page” au lieu de simplement défiler vers une autre partie de la landing page.
  • Cela signifie également que sur la page elle-même, aucun espace n’a été occupé par la fonctionnalité d’ajout au panier dans la variante C, comme le choix des variantes.

Cela suggère que des gains de conversion similaires peuvent être réalisés sur les pages de produits mobiles, mais les détails de leur mise en œuvre et l’UI/UX qui entraînera une augmentation de la conversion sont importants.

Également, si vous cherchez quelqu’un pour s’occuper de ce genre de test pour vous, et même plus encore; On peut le faire pour vous, plus d’informations en cliquant ici.

+20 Tests A/B Gagnants

Maximisez votre Taux de Conversion en téléchargeant notre guide GRATUIT.