CTA : les 5 détails design qui font tout

Un CTA bien designé peut aider à convertir

Ne sous-estimez pas la valeur d’un CTA bien designé

Après une introduction générale aux CTA, puis un article sur la façon de les placer sur votre page, passons à quelques remarques sur l’aspect des CTA.

Je tiens à préciser que je ne suis pas designer, et que je ne m’intéresse pas ici à l’aspect esthétique des calls to action : je rappellerai seulement les règles admises comme étant les bonnes pratiques en matière de conversion.

Ce ne sont pas des lois gravées dans le marbre, mais des idées à tester, qui ont la particularité de marcher souvent.

1. La couleur : Il paraît que les CTA vert marchent mieux ?

Faux.

Les CTA verts ne marchent pas mieux. Les rouges non plus. Ni les oranges.

Pourtant vous trouverez des tas d’articles avec des résultats de split tests qui vous montreront que les boutons rouges sont mieux que les verts, que les oranges sont encore mieux, que non finalement c’est les verts les meilleurs :

Les CTA verts sont les meilleurs... sauf quand ce n'est pas le cas

Les CTA verts sont les meilleurs… sauf quand ce n’est pas le cas

Bref, pour en finir avec ce mythe répété partout par des gens qui ne connaissent pas grand chose au sujet, il n’y a pas de « meilleure couleur » pour les boutons. La meilleure couleur c’est « ça dépend ».

En revanche, en comparant la plupart des A/B tests, on remarque que les traitements gagnants reposent sur un principe beaucoup plus fondamental du design : le contraste.

Ce qui compte n’est pas que le CTA soit rouge ou vert, mais qu’il soit différent de son environnement direct, et qu’on puisse le distinguer le plus facilement possible.

Prenons quelques exemples pour comparer :

Un CTA qui manque de contraste. Le visiteur peut facilement passer à côté.

Un CTA qui manque de contraste. Le visiteur peut facilement passer à côté.

Sur le site de SmartUp (exemple tiré de la liste des #101projets), le CTA est parfaitement dans la palette des couleurs dominantes (bleu, blanc, noir) et passe presque inaperçu.

Un CTA rouge sur un fond à dominante rouge.

Un CTA rouge sur un fond à dominante rouge.

Pareil chez Bluebee : le CTA principal reprend la couleur dominante de la photo où il est intégré. Les logos de journaux en dessous lui volent la vedette parce qu’ils se détachent mieux du fond.

Un CTA qui contraste bien avec le reste de la page.

Un CTA qui contraste bien avec le reste de la page.

Maintenant, si on regarde le site de Lingocracy, le CTA saute directement aux yeux. Mais ce n’est pas parce qu’il est orange : c’est parce qu’il contraste fortement avec le reste de la page qui est plutôt neutre.

Faites attention aux arrières-plans trop sombres ou confus où les CTA peuvent se fondre et devenir difficiles à distinguer.

Comment éviter que le CTA se fonde trop dans l'arrière-plan ?

Un traitement possible : atténuer l’arrière-plan pour éviter que le CTA s’y fonde trop.

Pour ce qui est du texte, qui peut lui aussi avoir de l’importance, essayez de choisir la couleur la plus lisible (pas de blanc sur une couleur claire).

Exemple d'un CTA rendu plus lisible

Exemple de traitement pour rendre un CTA plus visible chez Wimi.

Ne sous-estimez pas ce genre de détails, qui peuvent avoir un impact non négligeable, comme le montre cet autre test de Michael Aagaard :

Seule la couleur de la police du CTA a changé, et pourtant...

Seule la couleur de la police du CTA a changé, et pourtant…

2. Faites un bouton qui ressemble à un bouton

Le bouton doit ressembler à un bouton, à un élément sur lequel on peut cliquer.

C’est bête à dire, mais certaines modes de design ont parfois tendance à oublier ces évidences.

Les boutons en flat design, c’est mignon, mais faites attention à ce qu’on comprenne bien que ce sont des boutons.

Exemple d'un CTA rendu invisible par le flat design

Attention à ne pas rendre vos CTA inutilement difficiles à voir.

Pour ça il y a plusieurs solutions :

  • Respectez les conventions habituelles : les boutons ont souvent des coins arrondis, des effets de relief, etc.
  • Donnez un peu d’interactivité à vos boutons : un simple effet au survol peut indiquer que c’est bien là qu’il faut cliquer

Après, c’est à vous de voir comment faire ça dans le respect de la charte graphique de votre site.

3. La taille : CTA principal aussi gros que le logo

Plus un élément prend de place sur la page, plus il est visible, et moins il crée de friction quand un utilisateur va essayer d’aller cliquer dessus (c’est ce qu’on appelle la loi de Fitts).

Étant donné que votre CTA est l’élément le plus important, il ne faut pas que vos visiteurs puissent le rater.

Le bouton doit donc être visible facilement : n’ayez pas peur de faire un CTA vraiment grand. Une règle rapide : le CTA doit être d’une taille comparable à celle de votre logo.

Le CTA du site de Fasterize

Exemple d’un CTA bien visible : couleur contrastée, taille généreuse.

Si vous avez plusieurs CTA, leur taille peut aussi vous servir à les hiérarchiser visuellement :

Des CTA avec une hiérarchie visuelle chez Cookening

Des CTA correctement hiérarchisés (observez au passage la taille par rapport au logo)

4. White space : aérez votre design pour laisser de la place au CTA

Un autre moyen de rendre son CTA bien visible sans le rendre énorme, c’est de bien le séparer du reste par du vide.

Autrement dit, évitez de laissez votre CTA se perdre au milieu de votre page en l’encerclant dans le reste de votre contenu. Si en plus le CTA et trop petit, et que la police n’est pas lisible…

Où est Charlie au pays des CTA. Oui, le CTA principal est bien ce minuscule bouton perdu au milieu du texte.

Où est Charlie au pays des CTA. Oui, le CTA principal est bien ce minuscule bouton perdu au milieu du texte.

5. Pictogrammes et formes de CTA

Pour soutenir l’aspect actif du CTA, vous pouvez avoir recours à des formes plus dynamiques que le simple bouton rectangulaire.

Un bouton en forme de flèche peut être un moyen simple de faire passer l’idée de mouvement à l’étape suivante :

Un CTA principal bien contrastant en forme de flèche : une bonne idée à tester

Un CTA principal bien contrastant en forme de flèche : une bonne idée à tester

N’hésitez pas non plus à tester des formes, des couleurs ou des effets qui le rendent bien visible sans être agaçant (pas besoin d’un truc énorme qui clignote et qui fait de la musique).

Si Amazon n’utilise pas un bouton rectangulaire pour ses achats, il y a peut-être une raison. Un autre exemple Amazon intéressant, celui du CTA qui invite à feuilleter un livre :

Un CTA bien pensé qui renforce le message, sur Amazon

Un CTA bien pensé qui renforce le message, sur Amazon

Vous pouvez aussi ajouter des pictogrammes sur le CTA lui-même pour donner cette idée de direction (des flèches qui pointent vers le CTA, par exemple, des flèches vers la droite pour passer à l’étape suivante, vers le bas pour télécharger, etc.).

Un pictogramme peut rendre le CTA plus attrayant et dynamique

Un pictogramme peut rendre le CTA plus attrayant et dynamique

(Crédit photo)

Powered by WordPress. Designed by Woo Themes