C’est Pascal. Bienvenue dans cette vidéo.
Aujourd’hui, je vais te montrer les Stratégies d’achat N°2.
C’est une vidéo qui est déjà faite dans le passé, il n’y a pas si longtemps que ça, cela date d’un mois environ.
Je suis allé au bout de mes essais.
Je vais te partager toutes les nouveautés ou toutes les réglages intéressants que tu peux aussi reproduire de ton côté, si tu le souhaites.
Pour la démonstration de cette vidéo, je vais utiliser mon site Tout Chapinou.
De base, le site Tout Chapinou est un Mono-Produit.
La logique voudrait que j’active le bouton de paiement, la redirection vers le Checkout, mais là on va considérer qu’il s’agit d’un shop Multi-Produits de niche.
Cela peut marcher également avec une boutique généraliste.
Un petit rappel. Si tu te souviens, la dernière fois, j’étais parti sur une redirection vers la Cart page, lorsque l’utilisateur clique vers le bouton d’ajout au panier.
Ensuite, je lui laisse une possibilité de sortie au cas où il s’est senti un petit peu brusqué.
Cela lui permet de revenir vers le « Continuer mes achats ».
Cette redirection impliquait que je n’avais plus besoin que le Cart Header, le Dropdown soit présent.
Je désactivais le Sticky Header pour mettre en avant le Sticky Add to Cart.
C’était le réglage sur lequel on était resté.
Customiser les boutons CTA : icones, flèches, etc
Maintenant, je peux te faire un petit détail aussi sur quelques autres réglages que je t’avais aussi brièvement mentionnés.
Dans le Cart Header, j’avais tendance à non seulement désactiver cette icône de panier, parce que je préférais mettre l’accent vers cette icône de paiement qui est l’étape qu’on veut.
Le client avance plus en cliquant sur ce bouton.
Je désactivais au moins l’icône de l’ajout au panier sachant que dans cette configuration le client a déjà eu accès à la page Panier, il a en plus tous les réglages qu’il lui faut ici.
Ce n’était pas forcément intéressant qu’il repasse vers le panier.
On pourrait même dire que dans la configuration que j’avais configurée, étant donné qu’il était déjà venu dans la page Panier, il n’y avait pas besoin de le faire revenir dans la page Panier. Dans ce cas-là, on peut même carrément supprimer le bouton.
En tout cas, j’aimais bien ne serait-ce que juste de mettre en avant ce bouton de paiement. C’est quelque chose qui fonctionnait bien.
Le bouton va carrément se supprimer.
J’avais même aussi pour optimiser complètement.
Je vous l’avais dit, si j’allais dans la Cart Page, je n’étais pas trop satisfait de l’affichage ici, de l’icône.
Autant quand les boutons sont les uns autour des autres, ça passe bien.
En mobile, c’est le cas d’ailleurs. Mais là, l’icône ne ressortait pas bien.
À la place, je supprime complètement l’icône, je désactive complètement l’icône du Checkout. Finalement à la place, je mets les petites flèches qui redirigent vers la droite.
C’est quelque chose qui se voit à peu près partout sur tous les shops généralistes, les Amazon etc.
Vous avez toujours cette idée de progression vers la droite. C’est logique en plus.
Déjà les boutons de panier, d’ajout etc. sont toujours vers la droite.
Vous pouvez également mettre ces flèches juste ici.
Je préfère mettre ces petites flèches plutôt que de mettre des icônes qui alourdissent. Je préfère que ce soit comme ça.
C’était les petits ajouts mineurs. C’est très bien comme ça.
Si jamais vous souhaitez malgré tout que l’utilisateur revienne par la page Panier, on peut réactiver ce bouton-ci.
Dans cette configuration qui est assez standard, il y avait quelque chose que je n’aimais pas quand même, c’était que l’utilisateur est déjà passé par la page Panier, il fait le choix de revenir dans la page d’accueil, il est dans cette configuration où il y a ces deux boutons qu’il n’a a jamais vus, puisqu’il était là, il avait cliqué sur Ajouter au panier, il n’y a jamais eu ces deux boutons.
C’est un petit peu le surprendre.
Cycle d’Achat Monochrome
Mais admettons, vous souhaitez qu’il repasse vers la page Panier, c’était le parcours qu’il avait vu.
Ce que je fais, c’est que j’enlève le bouton du Checkout. Je garde mon panier.
Mon panier, comme ce sera le seul parcours, j’ajoute les fameuses petites flèches.
Je n’ai jamais trop aimé ce bleu ou avoir ces deux couleurs.
Tout simplement, je vais recopier le design du bouton de Checkout dans les boutons d’ajout au panier.
L’avantage que cette stratégie a, c’est que le cycle d’achat est retranscrit complètement par les boutons verts.
Que ce soit dans l’ajout au panier, que ce soit lorsque l’utilisateur arrive dans la page Panier, il a ce fameux bouton vert qui va le rediriger vers le Checkout.
Là, je continue mes achats.
Admettons qu’il ressorte. Il peut ré-accéder à mon panier juste ici.
C’est une première méthode que j’aime bien.
La deuxième méthode que je vais vous montrer, j’ai changé pas mal de choses à nouveau et ça n’a rien à voir de tout ça.
Mais déjà ce n’est pas mal. J’aime bien l’idée d’enlever le bouton du Checkout, c’est un peu contre intuitif, et de mettre cette couleur verte pour le bouton de mon panier.
Passer au Cart Slide pour augmenter vos conversions
La deuxième stratégie que je vais vous montrer, c’est une stratégie que maintenant j’utilise et qui a un gros avantage.
La direction vers la Cart Page, je la faisais parce que je voulais désactiver ce Sticky Header et j’avais besoin qu’on ne voie pas ce Cart Header, ce cart Dropdown ça s’appelle, n’apparaît que si vous avez le Sticky Header activé.
Ça implique que si vous voulez désactiver le Sticky Header, vous êtes obligé de mettre des redirections ici.
Même si la redirection en Cart Page, je trouve que ce n’est pas trop agressif, cela reste une redirection.
Votre client peut ne pas aimer et ça peut faire baisser votre taux de conversion.
Par rapport à ça, il y a une parade, c’est qu’au lieu que votre Cart Header soit en Dropdown, vous le mettez en slide.
Le slide, je ne sais pas si vous vous souvenez de ce que c’est.
Au lieu d’avoir cet élément qui est un petit peu flottant, qui peut gêner aussi pour cliquer sur les ajouts ou pour ajuster les quantités, vous avez un slide complet qui est tout à fait statique. C’est complètement statique, la personne peut faire sa vie.
Il a cliqué dessus, ça restera comme ça.
Petit aparté : Ce réglage existe déjà que vous soyez en Dropdown ici ou pas.
En mobile, c’est déjà en slide, vous avez ça qui s’affiche.
C’est là où je me suis dit : “Pourquoi forcer une redirection alors que vous pouvez avoir cet élément qui s’affiche directement”.
C’est-à-dire si je reprends le cycle d’achat normal, j’enlève la redirection, que ce soit en mobile ou en desktop, vous aurez ce slide qui apparaîtra sur le côté droit.
C’est un petit peu incitatif mais pas autant qu’une redirection.
Cela peut être un entre-deux qui est bien sympathique.
J’ajoute au panier. Il y a ça.
Bien sûr dans cette configuration, le slide se suffit à lui-même.
Il n’y a plus du tout besoin de rediriger uniquement vers la page Panier.
J’enlève ce premier bouton et par contre j’affiche directement le Checkout.
Cela permet quand même de faire gagner des étapes, de ne plus avoir la redirection.
L’avantage majeur de cette fonctionnalité, c’est que vous pouvez avoir désactivé le Sticky Header mais avoir quand même ce slide qui apparaît.
Il n’y a plus besoin de redirection.
C’est un réglage que j’aime beaucoup et je reste comme ça dorénavant.
Pour l’optimiser, on va faire un peu de webdesign.
Là, vous avez le style du background.
Tout simplement, je mets une couleur un petit peu plus grisée. Cela se dénote du reste du site. L’utilisateur voit qu’il y a une couche qui s’est rajoutée.
Par contre, attention, cela ne fonctionne pas en mobile.
Il y a un autre réglage qui est dédié au mobile, c’est juste ici : Cart Slide Mobile.
Vous mettez un petit F1. Cela ira très bien.
Je trouve que c’est très bien. On voit directement qu’il y a un slide qui s’est ajouté.
Il n’y a absolument pas besoin d’aller vers la Cart Page dans ces cas-là, puisqu’il y a les quantités, il y a le sous-total, maintenant il y a le paiement.
Vraiment cela se suffit à soi-même.
Cela fait gagner des étapes et vous avez cette même expérience qu’on soit sur desktop ou sur mobile.
Je trouve cela très bien.
C’est un réglage que je fais maintenant.
Le Header en bandeau noir ?
Peut-être un petit aparté aussi : Je vois qu’il y a des personnes qui mettent le Header tout en noir, c’est tout à fait OK.
Les textes sont en blanc, le logo est également de couleur claire pour qu’il y ait un bon contraste. Je suis tout à fait d’accord.
Si vous avez un logo de couleur claire, ça peut se valoir tout à fait ou si vous voulez un style un peu élégant, un peu sobre, c’est bien.
À l’époque, j’avais tendance de tout mettre en noir non seulement le Cart Header en Dropdown ou le Cart Header en slide, mais finalement je vous conseillerai malgré tout de garder cette teinte grisée même si vous avez ce Header en couleur sombre.
Si malgré tout vous souhaitez le faire, ajustez également cette icône, puisqu’elle ne ressortira pas bien, c’est-à-dire mettez des teintes claires, des teintes en blanc ou alors trouvez une nouvelle image, voire même supprimez-la.
C’est ce que je faisais à l’époque quand je mettais tout en élément sombre.
Je vous ai montré ces deux méthodes. Actuellement, je suis sur celle-ci.
Personnalisez vos appels à l’action
Peut-être un dernier aparté, ce sera sur le vocabulaire que vous pouvez utiliser sur vos boutons. Évidemment, le « Ajouter au panier », historiquement, ça a été des gros tests qui ont été faits qui avaient montré que le « Ajouter au panier » convertissait mieux que le « Acheter » ou toute sémantique qui incite à l’achat, parce que l’utilisateur a toujours peur de passer à l’acte d’achat. Le « Ajouter au panier » est une façon de le désengager, de lui dire : “Tu as juste ajouté au panier, tu ne fais pas autre chose”.
Historiquement, cela marche mieux.
Ce sont des tests qui ont été faits par des grosses sociétés, des grosses boîtes.
N’oubliez pas de faire vos tests de votre côté sur votre boutique surtout si vous êtes sur des niches un peu spécifiques, vous ne connaissez pas le comportement de vos clients et ils peuvent beaucoup mieux réagir à une autre sémantique.
Par exemple, si vous êtes sur une niche un petit peu musclée, un peu plus agressive, vous pouvez tout à fait mettre « Acheter maintenant en majuscule », je pense que cela convertira très bien avec une icône qui presse un petit peu.
Si vous êtes sur un marketing un petit peu incitatif à l’urgence où vous mettez des stocks qui s’épuisent très vite, vous pouvez tout à fait faire ça.
J’ai tendance à mettre le « Ajout au Panier », la majuscule sur le P et la majuscule sur le A et c’est très bien.
Mais maintenant, je fais aussi autre chose, j’ai changé mon vocabulaire.
Au lieu du « Ajouter au panier », je mets « Commander ».
C’est plus court, je trouve. On ne tourne pas autour du pot non plus.
Je commande tout simplement.
Le paiement également fait peur aussi aux utilisateurs.
Ils savent que maintenant il n’y a qu’un seul bouton, que s’ils vont cliquer sur « Paiement », c’est parti, ils vont devoir dégainer la CB.
Pareil, pour compenser cela, je mets « Finaliser ma commande ».
L’avantage, c’est que ça ressemble beaucoup à Commander.
C’est tout simplement j’ai commandé, maintenant je finalise.
Vous allez voir qu’il y a une petite manipulation en plus de CSS à faire, parce que le texte va s’afficher trop gros, parce qu’il y a quand même un long texte.
Ça apparaît sur deux lignes.
Comme d’habitude, je fais un clic droit, Inspecter.
On arrive directement sur l’élément, ça se voit direct.
On est sur du font size qui est à 17 pixels, on va le passer à 14.
Le double avantage de ce réglage, c’est que non seulement le bouton est sur une ligne c’est le réglage évident, c’est plus sympa, ça ne sert à rien de grossir vos boutons et de dire : « He ! Regarde, tu peux cliquer ici ».
Pareil, le vert fluo, abandonnez. Gardez ces couleurs.
Ça me met sur une ligne, mais en plus de ça c’est plus sympa, vous le mettez de manière plus discrète.
L’utilisateur ne va pas réfléchir, il va mettre Commander, il va voir que ça s’affiche Finaliser ma commande et il va cliquer.
Ça va aller beaucoup plus vite.
Il y a les flèches vertes à droite qui lui indiquent qu’il passe à l’étape suivante.
Il n’y a pas cette notion d’achat.
Maintenant, je suis sur cette configuration-là.
Je résumé cet Épisode 2
Je récapitule. Avec le Sticky Header désactivé, j’ai enlevé la redirection lorsque je clique sur cet ajout.
J’ai remplacé les boutons par Commander et par Finaliser ma commande.
J’ai enlevé toute trace d’icônes dans le Cart, j’ai préféré mettre cette petite flèche.
Si jamais vous avez encore accès au Cart Page, je le mets ici, j’ai enlevé les icônes, j’ai mis les flèches également ici.
Pour rappel, la première méthode, c’était de cacher le bouton de Checkout et d’imiter le design vert le bouton Mon panier. Comme ça, vous ne laissez pas le choix au client.
Vous avez un parcours qui est très clair, c’est-à-dire il était redirigé vers la Cart Page, il avait la possibilité de revenir en page d’accueil.
S’il revenait en page d’accueil, il cliquait sur le bouton Mon panier.
Il y avait ce système de bouton vert avec des flèches vertes à droite qui l’amenaient à l’étape suivante.
Conclusion
J’espère que cette vidéo vous a plu.
Je pense que je suis vraiment allé au bout des essais.
Je vous ai montré beaucoup de méthodes, beaucoup de réglages, d’ajustements.
Cela ira avec votre préférence personnelle ou pas, mais en tout cas ça ne doit jamais être le cas, ça doit être selon le comportement de vos clients ou de vos utilisateurs, qu’est-ce qui convertit le mieux.
Vous avez toute une batterie de tests à faire.
Partez du principe que vous ne savez rien.
Mettez en place ces tests et voyez si vous avez des changements qui s’opèrent.
Bien entendu, vous devez avoir une valeur statistique assez importante.
Essayez au moins sur 1000 personnes à chaque fois.
Si vous avez 100 visiteurs par jour, essayez toutes les périodes de 10 jours, des réglages différents et voyez si vous voyez un réglage qui se dénote du reste.
Je pense que celui-là est vraiment le best.
Vous avez le meilleur des deux mondes : un Sticky Header désactivé, ce qui permet de mettre l’accent sur le Sticky Add to Cart.
Ensuite, vous avez cette option qui s’affiche, qui offre une expérience client qui fait avancer dans le processus d’achat sans forcer la main non plus avec une redirection.
La sémantique « Commander » et « Finaliser ma commande », je trouve que ça va très bien, ça offre des très bons compléments.
Je pense que c’est le meilleur que vous pouvez trouver.
Si vous voulez en essayer d’autres, partagez dans les commentaires, partagez votre travail, c’est comme ça qu’on fait avancer la communauté.
Vous voyez qu’avec Fastlane on peut faire plein de choses.
Un dernier aparté : ce que vous pouvez faire, c’est que vous allez sur mon site pascaldegut.com et là vous pouvez à nouveau commander un Audit Stratégique.
Je vous fais cet audit gratuit pendant ce mois-ci.
S’il y a des choses à améliorer au moins sur votre concept e-commerce, vous avez le temps de les corriger. Comme ça, au mois de décembre, on travaille ensemble.
J’espère que cette vidéo vous a plu.
Je vous dis à la prochaine.
Faites bien décoller vos shops.
Salut !
