Les secrets du bouton « Acheter » enfin révélés !

Comment bien faire un bouton « Acheter » (via Webmaster World.com) ?
J’ai trouvé ce post très intéressant sur un forum et il m’a paru vraiment utile non pas de le traduire, mais d’en résumer la quintessence. Pour ce qui voudraient lire la traduction par Google, cliquez par ici, mais attention, je vous préviens, vous risquez de vous exploser les zygomatiques.

Le bouton « Acheter », s’il est utilisé à bon escient, va participer très fortement à l’augmentation du taux de transformation dans une boutique. Plusieurs facteurs sont à respecter. En voici un résumé bref que tout un chacun pourra améliorer.

Votre bouton « Acheter » est-il assez grand ?

La première chose que vous devriez faire est de considérer la taille de votre bouton. Votre bouton a besoin d’être grand, énorme, très visible, en exagérant un peu, il faudrait que le bouton « Acheter » soit le deuxième plus grand élément d’une page produit après la photo du produit lui même. Cela ne signifie pas évidemment que votre bouton doit être moche pour autant. Un bon exemple de taille de bouton est celui de Target.com. Il est énorme, mais vous ne le remarquez presque pas. En réalité, il se grave inconsciemment dans votre esprit de façon à ce que vous n’ayez pas à le chercher lorsque vous voulez ajouter un produit à votre panier. C’est un gain de temps pour l’esprit de l’internaute et c’est un gain en terme de taux de transformation.

Une autre raison de faire des grands boutons acheter est que l’utilisateur lambda d’un site Internet n’a pas forcément votre habitude du web. Il ne sait pas cliquer instinctivement sur des petits boutons de 30 pixels de large, sa précision est certainement beaucoup moins grande que la votre pour des raisons qui peuvent être tout simplement médicales, des raisons d’habitude de l’ordinateur. Quelque que soit cette raison, un bouton de 30 pixels de large ne sera pas suffisant.

Votre bouton « Acheter » est-il bien placé ?

Si votre acheteur doit scroller pour trouver le bouton « Acheter », alors il est mal placé. Si votre bouton n’est pas dans la partie droite de votre page, alors il est mal placé. Si il est sous la description du produit, alors il est mal placé. Si votre bouton n’est pas relativement près de la photo du produit, alors il est mal placé.

Le scrolling est à déconseiller pour toutes les pages dont la destination finale est de vendre quelque chose. Bien sûr, les gens finissent toujours par scroller s’ils n’ont pas d’autre choix, mais le fait est qu’ils n’aiment pas cela. Voulez-vous vraiment les forcer à scroller pour acheter un produit s’ils n’aiment pas scroller ? Mais ce n’est pas tout, car il existe aussi une catégorie d’utilisateurs, soit stupides, soit fainéants, c’est au choix, à qui l’idée de scroller ne vient même pas à l’esprit. Si votre bouton est trop bas, ils ne le trouveront jamais. Et c’est dommage, car même les idiots et les fainéants ont de l’argent à dépenser. Rendez-leur donc la vie plus facile en évitant le scroll.

Autre point primordial : votre bouton « Acheter » doit se trouver dans la partie droite de l’écran. Dessinez mentalement une ligne au centre de votre page, votre bouton doit être du côté droit de cette ligne. Pourquoi ? Parce que tout le monde fait ça. Ce n’est pas une question de conformise, c’est une question de moeurs. Depuis des années, tout le monde a entraîné les internautes à trouver leur bouton acheter dans la droite de la page. Alors, n’essayez pas d’être original en ce qui concerne ce point, vous seriez voué à l’échec.

Mais ce n’est pas tout. Votre bouton doit systématiquement apparaître au-dessus du descriptif produit. Les gens qui lisent les descriptifs et ceux qui cliquent sur le bouton « Acheter » sont de deux espèces différentes. Ceux qui lisent la description ne sont pas encore prêt à acheter, mais ils sont déjà dans une phase de shopping. Ils vont lire la description du produit, quitter le site, lire la description sur d’autres sites (vos concurrents) et, si vous êtes chanceux, vont retourner sur votre site et acheter. Les gens qui lisent les description sont en mode recherche. Ils ne sont pas encore prêt à ouvrir leur porte-monnaie. Il n’est donc pas grave de les faire scroller un peu sur votre page produit. Mais lorsqu’ils reviennent sur votre site, qu’ils sont prêt à cliquez sur le bouton acheter, alors ils ne doivent pas avoir à chercher le bouton « Acheter », ni scroller tout en bas de la description produit pour le faire. Cela dit, rien n’interdit quand même d’avoir deux boutons acheter sur la même page : un en haut et un en bas.

Votre bouton « Acheter » ressort-il bien?

Voilà qui va faire grincer des dents les graphistes et web designer, mais pour qu’un bouton « Acheter » soit un bon bouton « Acheter », il faut qu’il ressorte de la page, quitte à ne pas respecter la charte graphique générale du site. En anglais, cela se traduit par le terme « to pop ». Votre bouton « poppe-t-il » bien ? C’est un facteur un peu subjectif, mais lorsque vous regardez une page, notez ce qui ressort tout de suite en plissant des yeux. Ca devrait être toujours le bouton « Acheter ». Si, par exemple, il utilise les mêmes couleurs que le reste de la page, il ne ressortira pas. Il n’y a pas de règle en la matière. Il faut faire des essais pour trouver le bon accord.

Votre bouton « Acheter » est-il facile à lire ?

Alors maintenant, qu’allons-nous écrire dans notre bouton « Acheter » ? Quel texte est censé le rendre le plus clair possible ? Là, il n’y a rien de très original en la matière : « Acheter », « Ajouter au panier » sont des standards et ce n’est pas la peine de chercher à inventer quelque chose de nouveau. Faites juste attention à ce que ce texte soit bien lisible, n’utilisez pas de police de caractères exotiques, de préférence, supprimez l’antialiasing afin d’avoir un texte encore plus net, et surtout, faites bien attention à ce que la couleur de la police de caractère contraste bien avec la couleur de fond du bouton.
Important, mais pas indispensable, l’utilisation d’un pictogramme. Croyez-le ou pas, un certain nombres de vos acheteurs ne lisent pas (ne veulent pas lire), un simple petit caddie ou panier les aidera à percevoir instinctivement le pourquoi du comment du bouton.

Toutes ces excellentes remarques proviennent du forum cité ci-dessus. Il y a sûrement beaucoup de choses à ajouter encore sur le sujet, un sujet qui ne me semble pas du tout futile.
Et vous, vos boutons, ils sont comment ?

9 commentaires

  1. Super article : bravo !
    Et ça met en avant toute la problématique des "nouvelles interfaces" qui, si elles ne veulent pas simplement être là "pour décorer", doivent permettre de garder ces fondamentaux que tu présentes.

    François

  2. Oui, sauf que ça manque un peu de référence : la vente en ligne est tout sauf est une science exacte. Seuls les tests peuvent confirmer ou infirmer. J’ai un tas d’exemples ou le scrolling n’a aucun effet sur la vente, bien au contraire…

  3. Le bouton Acheter, un vrai casse tête. Pour nous permettre d’améliorer notre taux de conversation, nous avons fait un effort sur le bouton acheter ou ajouter au panier. Avec une présentation de celui-ci dans un listing produit tel que http://www.pro-outillage.com/per... ou encore directement dans le fiche produit : http://www.pro-outillage.com/per...
    Il nous semble que celui-ci reste encore un peu trop petit, mais la forme est importante illustrant son action et avec une orientation fuyante vers la droite favorisant le clic. Pour les internautes indécis, nous avons également ajouter le numéro de téléphone dessous pour leur permettre de nous appeler afin de nous demander conseil avant d’initier leur achat.

    Je pense que c’est une bonne approche, et ça a amélioré notre taux de conversion, mais nous ne détenons pas encore le bouton ultime et sommes ouvert à vos retours.

  4. Quelques bons conseils même si je suis assez d’accord avec Splitch : les tests des variantes de page sont le seul moyen d’obtenir le meilleur taux de conversion. Jeter un oeil sur Google Website Optimizer serait un bon début pour les e-commerçants qui veulent expérimenter leurs pages d’ajouts au panier.

  5. Ca semble être des bons conseils. Du coup je l’ai fait pour les pages du site , un bouton à droite, assez gros, avec une icone de panier.
    L’article ne précise pas quelle est la meilleure couleur, indépendamment du contraste.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.