Comment optimiser l’apparence des boutons de PrestaShop ? (ép. 142)

Avez-vous déjà effectué une réflexion sur l’apparence de vos boutons sur votre boutique PrestaShop ? Sont-ils réellement percutants pour vos utilisateurs ? Pour le savoir, il faut effectuer une comparaison avec les leaders du e-commerce et analyser leurs pratiques.

On a souvent tendance à faire confiance au template PrestaShop

Moi le premier d’ailleurs, quand j’installe un template le design des boutons est forcément inclus et tant qu’ils s’affichent correctement je ne me pose pas forcément d’autres questions. Je pars donc du principe que c’est fonctionnel.

Pourtant une partie du secret de la puissance des boutons va se cacher dans les détails… Faut-il arrondir les coins d’un bouton ? Est-ce que le bouton doit intégrer une icône ou non ? Quelle doit être le fond de couleur du bouton ? Le label doit-il être en majuscule ? Bref, vous voyez déjà le topo des interrogations.

Comment avoir la bonne réponse à cette question ? Il faut observer les entreprises qui ont des moyens de faire des tests et des analyses. C’est pour cela que j’ai pris 6 gros sites e-commerce, Zalando, Amazon, Galaxus, Fnac, Leroymerlin, Aliexpress pour voir comment ils procédaient.

Le bouton ajouter au panier Zalando n’est pas dans les normes

Cela va vraiment vous faire rire, mais si on regarde bien le bouton ajouter au panier de Zalando on peut constater que celui-ci est un rectangle, sans arrondi alors que les 5 autres sites ont les bords du bouton arrondis .

Un bouton rectangle à l’état pur peut faire penser au premier abord à une cellule de tableau HTML, surtout si en plus le bouton est extra-large. La grande question qu’on peut se poser, c’est de savoir si Zalando à raison de le faire ainsi ?

Selon ma perception, quand je pense à un bouton, j’ai une image mentale d’une forme arrondie… (y compris dans le monde réel, que ce soit en couture ou même lors de l’apparition d’un bouton sur la peau). Zalando semble avoir choisi le rectangle pur pour des raisons de design global (en mode grille stricte), mais pas forcément par souci d’expérience utilisateur.

Mixer le bouton avec des icônes « Material Icon » ou « Font Awesome »

Quand je vous parle d’un bouton ajouter au panier, est-ce que celui-ci doit en plus intégrer dans le bouton une petite « icône panier » pour bien faire comprendre à l’utilisateur l’action que le bouton va réaliser ?

Sur ce point c’est beaucoup plus partagé, car on est à 50/50, par exemple Zalando, Amazon, Aliexpress n’ajoutent pas d’icône supplémentaire à leur bouton, pourtant ce sont des poids lourds du e-commerce. On peut donc partir du principe que si le label du bouton est percutant, l’icône n’est pas indispensable.

Sur les thèmes PrestaShop actuels, ils ont quasiment tous ces icônes intégrées au label, c’est certainement aussi une question de tendance. Cela soulève aussi la puissance des designers de templates qui pilotent les tendances graphiques et UX des sites e-commerce, sans pour autant que ce soit une norme éprouvée (on voit bien le cas avec les sliders de homepage).

Réduire le nombre de boutons et les actions d’interface

Dans la vidéo je vous montre en exemple dans le récapitulatif du panier il y a un bouton qui permet l’action « Continuer mes achats ». Sur le principe cela semble une bonne idée de proposer au client de continuer son expérience de lèche-vitrine, mais celle-ci présente aussi des lacunes.

Le 1er point freinant c’est que ce bouton sur mobile, se situe un emplacement tout autre que sur desktop. Sur smartphone, il vient se greffer avant les montants totaux au lieu de se trouver en parallèle du bouton « Commander » et donne un sentiment de non-uniformité des actions.

Ensuite, pour améliorer la conversion, il est conseillé d’établir un chemin canalisé, qui emmène vers une seule direction… l’étape du paiement ! L’utilisateur doit pouvoir revenir en arrière et se sentir libre, mais il faut idéalement limiter les portes de sortie quand cela est possible.

Est-ce qu’améliorer le design des boutons, va rendre mon site PrestaShop plus performant ?

Il faut prendre en compte le cas suivant, chaque boutique PrestaShop qui est déployée dispose d’un template… Cela peut-être le template original ou un thème premium, mais vous aurez le même rendu que beaucoup d’autres sites e-commerce.

En 2022 et dans les années à venir, cela va se jouer sur les détails qui vont faire la différence. C’est un état d’esprit « général » à avoir pour l’ensemble de votre boutique dans l’optique d’offrir la meilleure expérience possible à vos clients en limitant un maximum les frictions et cela passe par l’optimisation de chaque détail.

Le vrai secret se trouve dans le cumul de toutes ces petites optimisations, en ajustant votre site e-commerce au fil des semaines, celui-ci va se professionnaliser. Le plus important est de garder en tête cette envie d’optimiser chaque élément, qui tous ensemble cumulés, vont vous permettre d’améliorer votre taux de conversion.

Pour ce tutoriel PrestaShop vous avez à disposition :

• 1 x custom.css (pour la mise en forme de boutons)

Télécharger

Résumé de la vidéo : Améliorer le design des boutons PrestaShop pour booster l’expérience client

• On va commencer par comparer le bouton PrestaShop de la fiche produit aux autres sites leaders du e-commerce.
• Les apparences de boutons sont assez variables, mais on peut constater que certaines pratiques de l’UX sont plutôt universelles.
• Avec très peu de code CSS et en seulement quelques minutes, on peut s’aligner sur les bonnes pratiques des leaders du e-commerce.
• Dans le panier popup la remise en forme ajoute de la cohérence à la page, les actions sont plus visibles et uniformes.
• Chaque fois que vous voyez un bouton, assurez-vous qu’il soit pertinent… Testez aussi son positionnement sur les différents supports, mobile, tablette, ordinateur, car l’expérience client est à chaque fois différente.