5 conseils pour créer des boutons d'action qui convertissent ! | Selldorado, réseau de partenaires digitaux

Ecrit par Olivier Sauvage le 1 février 2017

call to action e-commerce

5 conseils pour créer des boutons d’action qui convertissent !


Une des mesures les plus importantes à observer dans ses web analytics est le taux de rebond. Comme vous le savez, plus il est bas, meilleur est l’engagement de vos visiteurs. Un taux de conversion élevé (hormis sur les blogs) traduit un manque d’intérêt du visiteur pour votre contenu, mais plus encore, est la traduction même que quelque chose ne fonctionne pas sur votre page.

Obtenir un clic est donc primordial, et quand je dis un clic, encore faut-il que ça soit le bon clic. Celui pour lequel votre page a été conçue et qui améliorera la valeur de la visite.

Obtenir un bon clic veut donc dire obtenir la bonne action de la part du visiteur de votre site desktop ou mobile. Et pour cela, hors le fait qu’il reste primordial de travailler son offre et son argumentaire, la nécessité de jouer sur des caractéristiques visuelles et émotionnelles de vos boutons d’action est extrêmement importante. 

Il ne doit y avoir qu’un bouton d’action principal sur votre page

C’est simple. Une page ne peut avoir qu’un objectif majeur et il ne peut donc n’y avoir qu’un bouton d’action principal. Non pas qu’il ne puisse pas y avoir plusieurs boutons d’action sur une page, mais tout simplement que vous devez montrer à votre utilisateur, en utilisant une hiérarchisation visuelle des boutons où regarder et où cliquer. Et pour que ce soit simple, un seul bouton, le principal, doit apparaître au dessus des autres, comme un roi sur son trône parmi ses nobles 🙂

cta e-commerce
La page d’accueil d’Air Canada. Il y a beaucoup de liens et de boutons sur cette page, mais un seul ressort clairement. Saurez-vous le trouver ? 😉

De l’air, de l’air, de l’air

Votre bouton d’action principal pour être visible doit ressortir clairement. Pour cela, première technique, donnez-lui de l’air. Dégagez l’espace autour de lui, faites qu’il se détache du fond de la page et soit isolé des autres contenus. C’est le premier moyen d’attirer l’attention dessus.

cta e-commerce
Sur Airbnb, tout est simple, limpide, clair. Notez l’espacement entre tous les éléments qui permettent de donner une sensation de légèreté et de facilité.

Donnez-lui de belles couleurs

Une rumeur voudrait que les boutons verts ou oranges convertissent mieux. Ce n’est pas tout à fait vrai. Ce qu’il faut surtout retenir, c’est qu’un bon bouton d’action principal doit ressortir de la page en utilisant une couleur « tranchante » avec le reste de la page. Et il est vrai que, dans beaucoup de cas, le vert et le orange ressorte mieux. Le vert parce qu’il est une couleur permissive. Le orange parce qu’il a tendance à exciter la pupille. Cela dit, d’autres couleurs peuvent aussi être utilisées, et même le rouge, si votre charte graphique fait un usage intensif de cette couleur.

L’important à retenir, c’est que votre bouton doit attirer et exciter l’attention. Un bouton avec une couleur terne qui se mélangerait aux autres couleurs de la page verrait sa capacité à convertir notablement diminuée.

cta e-commerce
Sur le site mobile de Voyages-SNCF, le bouton n’est ni vert ni orange, mais adopte la couleur de la charte graphique du site. Il reste néanmoins très visible.

 

Des libellés qui « engagent »

Le libellé du bouton joue évidemment un rôle important dans sa capacité à convertir. D’abord, il doit être court. Deux mots maximum. Ensuite, il doit être lisible. Evitez les polices de caractères fantaisie ou bien les cursives. Mieux vaut une bonne police de caractère bien droite, en capitales, qui s’imposera plus facilement visuellement et donnera plus d’importance au libellé.

Le texte du libellé lui même doit être injonctif, il doit engager l’utilisateur, comme s’il lui donnait un ordre. Si besoin, ajoutez-y un point d’exclamation !

cta crédit
Sur la page d’accueil de cet organisme de crédit, le bouton d’action possède un libellé « injonctif ».

Soignez son environnement

Quelques lignes ne suffiront pas à expliquer comment préparer l’utilisateur à cliquer sur un bouton, mais je me suis toujours mis personnellement comme règle :

  • 1 image
  • 1 texte
  • 1 bouton

C’est la base. Le bouton doit toujours recevoir la réaction de l’utilisateur que le texte et l’image proposent. C’est vrai pour le bouton « Ajouter au panier » d’une fiche produit (Titre-descriptif-prix + image + bouton), et c’est vrai aussi pour un formulaire de souscription.

cta e-commerce
Sur le site de Bouygues Telecom, on distingue très nettement la trilogie : texte + image + bouton

_____________________________________

olivier sauvage capitaine commerce

Olivier Sauvage est fondateur et dirigeant de Wexperience, agence d’ergonomie digitale pour le ebusiness, Olivier est également conférencier et blogueur à travers son site capitaine-commerce.com, élu meilleur blog e-commerce en 2009.