Marketing & E-commerce

Conseils marketing et e-commerce pour les petits e-commerçants

clic

9 conseils pour optimiser efficacement vos boutons

Les boutons de votre site e-commerce ne payent pas de mime. Et pourtant, ils ont un pouvoir que vous imaginez à peine. Optimiser vos CTA (Call To Action) peut faire grimper votre taux de conversion de plusieurs dizaines de pourcents.

Voici quelques conseils pour améliorer vos boutons et donc votre conversion.

Le wording des boutons

Votre bouton doit contenir un verbe d’action (par exemple, « ajouter au panier » ou encore « acheter »). De cette remarque découle la question du temps à utiliser : l’indicatif est plus neutre et moins directif alors que l’impératif implique une notion d’ordre. C’est pourquoi il est souvent conseillé d’utiliser l’impératif dans le tunnel de commande.

Le texte devra être concis et clair. On parle souvent de 3 à 5 mots maximum. D’autres évoquent une longueur comprise entre 90 à 150 caractères. Si vous avez beaucoup à dire (par exemple, si vous voulez ôter un doute à vos internautes), vous pouvez mettre une seconde phrase sous le wording principal ou encore sous votre CTA.

Bouton-texte-secondaire

La taille de la typologie ne doit pas être trop petite. En responsive design, la taille des typologies ne doit pas être inférieure à 16 pixels. Pour une meilleure visibilité, il est possible d’augmenter la taille par rapport au reste de la page. Pour autant, inutile de tomber dans l’excès et de penser que votre internaute a des problèmes de vue.

Au même titre que l’utilisation de l’impératif, vous pouvez inciter au clic en créant un sentiment d’urgence ou en encore en mettant en exergue un bénéfice.

wording-bouton

La couleur des boutons

Nous avons tous entendu parler de la symbolique des couleurs : le rouge pour la passion ou l’interdit, le orange pour l’énergie, l’imagination, la richesse, le vert pour la nature ou encore l’espérance, etc. A noter d’ailleurs que parfois les couleurs ont des symboliques relativement différentes, comme par exemple, le noir qui évoque le luxe, mais aussi la mort !

Concernant les CTA, on entend souvent que la couleur orange (voire rouge) et le vert sont les deux couleurs qui convertissent le mieux…

Loin d’être un cas isolé, je ne pense pas qu’il faut être aussi catégorique avec la couleur de vos boutons. L’intérêt est qu’ils ressortent bien par rapport au reste de la page. La couleur de votre CTA doit contraster avec le fond.

Vérifiez aussi que la couleur de vos boutons ne dénote pas trop avec votre charte graphique et ne risque pas de donner la nausée ou de faire convulser vos internautes !

L’incitation au clic  

L’internaute a souvent l’habitude d’être guidé. Au passage de sa souris, quand il voit un effet, que ce soit un changement de couleur ou autre effet graphique, l’internaute sait qu’il peut cliquer. Essayez au maximum de conserver ses habitudes. Bien évidemment, votre roll-over – puisque c’est là le nom de cet effet – peut être plaisant et discret. Vous n’êtes pas obligé(e)s d’avoir les bons vieux liens bleus soulignés des débuts d’Internet 😉

La taille des boutons

La largeur de votre bouton va bien évidemment dépendre de votre wording. Il est donc difficile de parler d’une largeur fixe.

Toutefois, pour les écrans tactiles, il est recommandé que les boutons aient idéalement une hauteur de 45 pixels.

La forme des boutons

Les internautes ont l’habitude d’avoir des boutons rectangulaires. Ne les perturbez pas en changeant de forme.

En revanche, vous avez le choix entre faire un bouton à bords carrés ou arrondis.

forme-bouton

Aujourd’hui, la tendance au flat design se traduit plus par des CTA à bords carrés voire potentiellement très légèrement arrondis. Pour autant, difficile de dire lequel est le plus efficace. Encore une fois, un test A/B peut être la solution pour se décider.

L’emplacement des boutons

Votre CTA ne doit pas être placé ni trop haut, ni trop bas. Il convient de le positionner correctement. En effet, on ne peut pas espérer avoir des clics sur un bouton d’ajout au panier placé avant le prix, par exemple. De même, l’internaute s’attend, à juste titre, à trouver ce type de bouton bien avant le cross-selling.

Pour mettre votre CTA en valeur, vous devez aérer autour du bouton. Sa lisibilité ne doit pas être occultée par d’autres éléments visuels (photos, vidéos, bannières, etc.) à proximité.

L’insertion de pictogramme dans les boutons

Vous pouvez – mais il n’y a pas d’obligation – insérer un pictogramme dans vos boutons. A priori, l’insertion d’un pictogramme panier donne, en général, un meilleur taux de conversion qu’un CTA d’ajout au panier sans pictogramme. A noter, toutefois, que vos pictogrammes doivent être clairs, non confusants et apporter quelque chose.

pictogramme-bouton

Sinon, mieux vaut ne pas en mettre. De même, vous pouvez choisir d’insérer un pictogramme uniquement dans certains CTA.

La hiérarchie des boutons

Trop de boutons tue le bouton. Une page contenant trop de CTA risque de perturber l’internaute, qui ne saura plus où donner de la tête. Le cas se présente aussi quand deux boutons sont positionnés côte à côte.

Vous devez donc distinguer les boutons principaux (exemple, bouton d’ajout au panier) des boutons secondaires (exemple, bouton « retour »). La différence entre les deux types de boutons résidera dans la couleur, dans la taille de la typologie, etc. ou une distinction de plusieurs de ces éléments. Pour les CTA encore moins importants, n’hésitez pas à utiliser le lien seul.

La performance des boutons

La performance des sites est une préoccupation pour tous les e-commerçants et les internautes sont de plus en plus exigeants quant au temps d’affichage. Dans ce contexte, tout ce qui peut être optimisé doit l’être. Bannissez les images de fond des boutons et optez le CSS. Le choix du CSS est d’autant plus judicieux que les boutons se redimensionnent correctement quelque soit le périphérique.

Et, pour finir…

Ces quelques conseils peuvent vous aider à optimiser vos boutons et à augmenter votre taux de conversion. Pour autant, rien n’est figé. En cas de doutes ou de taux de conversion faible d’un bouton, n’hésitez pas à tester. Vos tests A/B peuvent porter sur différents éléments (couleur, texte, emplacement, etc.). Veillez toujours, en premier lieu, à tester chaque élément individuellement. Vous ne pourrez pas tirer de conclusion pertinente si vous testez un bouton vert aux bords arrondis et un bouton bleu aux bords carrés, par exemple. Dans ce cas, vous ne pourrez pas savoir si c’est la couleur ou la forme du bouton, qui a influencé le taux de conversion. Testez donc les deux couleurs (en conservant la même forme) puis les deux formes (en conservant la même couleur). Vous pourrez ensuite confirmer les résultats de vos tests en proposant le bouton avec la couleur et le type de bords ayant eu le meilleur taux de conversion. Les résultats de vos tests vous permettront ainsi d’en tirer des enseignements pertinents. Maintenant, à vous de jouer…

Magali • 21 juillet 2015


Article précédent

Article suivant

Laisser un commentaire

Your email address will not be published / Required fields are marked *