Comment concevoir un bouton CTA qui convertit

À quoi devrait ressembler un bouton CTA ? Où devrait-il être placé? Comment éviter les CTA agaçants ? Ce ne sont là que quelques-unes des questions qui préoccupent tout le monde, des rédacteurs et spécialistes du marketing aux concepteurs Web et UX. Aujourd’hui, nous allons les trier.

Qu’est-ce qu’un CTA ?

L’abréviation « CTA » signifie Call to Action. Un appel à l’action est un élément de conception (généralement un bouton) qui invite le visiteur à effectuer une action. Cela peut être n’importe quoi – de l’exploration du site au remplissage d’un formulaire de contact ou à l’ajout d’un produit au panier.

Lorsqu’il est bien conçu, Les CTA remplissent une double fonction – ils aident l’utilisateur à naviguer sur un site Web et représentent un élément crucial dans votre flux de conversion. En fin de compte, leur rôle est d’amener les visiteurs à faire ce que vous voulez qu’ils fassent. Tel un guide-conférencier discret, guidant un utilisateur en douceur dans votre environnement numérique.

Techniquement parlant, n’importe quel bouton peut être un bouton CTA, à condition qu’il contienne une copie qui transforme le visiteur d’un observateur passif en un utilisateur actif d’un site Web. Mais l’une des principales choses qui séparent les CTA du reste des boutons sur un site Web est qu’en plus de la copie susmentionnée, ils doivent avoir certaines caractéristiques (couleur, forme, position) qui attirent l’attention des utilisateurs et les influencer à effectuer une action.

Il est clair que les CTA sont d’une importance capitale pour une bonne expérience utilisateur et pour les résultats de votre entreprise. Dans cet article, nous allons donc partager certaines choses à garder à l’esprit lors de la création de vos CTA.

Commençons par le texte du bouton.

Comment écrire une copie CTA

Comme l’efficacité des CTA dépend grandement de la qualité et de la structure de sa copie, il est clair que ce texte doit être bien pensé. La copie CTA doit remplir deux fonctions : engager le visiteur et indiquer clairement quelle action le visiteur est censé entreprendre.

Pour atteindre la valeur engageante, le texte doit être direct, clair et sympathique, sinon carrément charmant. Parce qu’il ne peut contenir qu’un nombre limité de mots, le message de la copie CTA devrait permettre à l’utilisateur de comprendre intuitivement le plan d’action nécessaire.

Dans de nombreux cas, la copie CTA idéale indiquera simplement l’objectif de conversion du site Web. Si votre objectif est d’amener les gens à lire votre blog, le bouton devrait simplement dire Lisez maintenant ou Lire la suite. Si vous souhaitez qu’ils interagissent avec le site Web, un bouton avec le texte Entrez en contact maintenant ou même simplement Contactez-nous fera très bien l’affaire.

Pourtant, il ne suffit pas d’être bref, clair et (si possible) divertissant. Il y a un peu de psychologie à prendre en considération ici. En réalité, beaucoup de recherches et des tests ont été effectués pour déterminer le type de copie que les utilisateurs trouvent le plus attrayant et quel texte CTA convertit le mieux.

La plupart des experts s’accordent à dire que créer un sentiment d’urgence est une condition nécessaire pour une copie CTA réussie. Heureusement, cela peut être réalisé assez facilement, simplement en insérant un mot ou deux, tels que « Maintenant » ou « Aujourd’hui », peut-être combiné avec « Seulement ».

Boutons disant Obtenez votre copie gratuite maintenant ou Inscrivez-vous et obtenez 50% de réduction aujourd’hui seulement! sont très convertis, car les utilisateurs ne veulent pas manquer une occasion spéciale d’acquérir quelque chose qui, demain, ne sera plus disponible.

Une autre chose à laquelle vous devez faire attention ici est la façon dont vous vous adressez à vos visiteurs. Certains experts envisagent l’utilisation de pronoms à la première personne (Créer mon compte, obtenir ma copie) les plus efficaces, tandis que d’autres optent pour l’utilisation des pronoms à la deuxième personne (Obtenez votre copie, réclamez votre essai gratuit). Pour compliquer les choses, les deux techniques semblent avoir autant de partisans et d’arguments en leur faveur.

Quoi qu’il en soit, il est clair qu’un certain degré de personnalisation en s’adressant aux visiteurs est requis dans la copie CTA, car cela permet aux utilisateurs de se sentir plus personnellement impliqués dans le produit ou le service. Et la connexion personnelle est essentielle pour les conversions.

Comment concevoir vos boutons CTA

L’aspect strictement visuel des boutons CTA est tout aussi important (sinon plus) que la copie elle-même. Les règles semblent simples – les boutons doivent attirer l’attention et inviter les utilisateurs à cliquer. Mais ce n’est pas toujours facile à réaliser. Pour se démarquer sur la page, la forme, la taille, la couleur et l’emplacement des boutons CTA doivent être en contraste net avec le reste de leur environnement.

La forme des boutons CTA

Vous avez probablement remarqué que la plupart des CTA (et la plupart des boutons sur le Web, d’ailleurs) sont rectangulaires. Bien sûr, il existe d’excellents exemples de CTA circulaires, carrés ou d’une autre forme encore moins courante, mais la majorité d’entre eux sont rectangulaires. Pourquoi est-ce?

Les rectangles et les carrés sont les formes que nous rencontrons le plus souvent, que ce soit sur le web ou dans notre vie de tous les jours. Les rectangles, en particulier, nous mettent à l’aise car ils transmettent un sentiment de stabilité et d’assurance.

D’autre part, il a été prouvé que les humains ont une affinité pour les courbes. Les formes rondes sont tout simplement plus agréables pour les yeux que les formes nettes et audacieuses. Sans oublier que le cercle est une forme qui dégage un sentiment de paix, de complétude et d’harmonie.

Compte tenu de ces deux faits, il est logique que la forme la plus efficace pour les boutons CTA s’est avérée être un rectangle aux coins arrondis. Cette forme est devenue très populaire parmi les spécialistes du marketing et peut être trouvée dans un grand nombre de sites et d’applications.

Bien sûr, ce ne sont que des directives générales dérivées de l’expérience et de certaines meilleures pratiques bien documentées en UX. Il existe des boutons CTA qui se présentent sous toutes sortes de formes peu orthodoxes, mais ceux-ci font généralement partie d’un environnement de conception marqué par l’expérimentation, une esthétique très spécifique, etc. En d’autres termes, ils ne représentent pas la norme.

L’importance de la couleur pour les boutons CTA

Le rôle des couleurs dans la formation de notre perception et de notre expérience de tout contenu visuel fait l’objet de recherches depuis des décennies. Les psychologues d’aujourd’hui s’accordent à dire que nous avons tendance à interpréter et à ressentir émotionnellement les couleurs selon certains modèles, et c’est quelque chose que les spécialistes du marketing exploitent depuis très longtemps.

Des couleurs spécifiques peuvent être associées à des messages spécifiques, les transmettant automatiquement, à un niveau subconscient. Pensez simplement aux feux de circulation – les couleurs elles-mêmes communiquent le message souhaité. Vert – allez, rouge – arrêtez.

Mais en ce qui concerne ces deux couleurs et leur utilisation dans les CTA, la situation n’est pas aussi claire qu’il y paraît. On pourrait penser que la couleur rouge, en tant que couleur d’alarme, de prudence et d’avertissement, éloignerait les gens et entraînerait moins de clics. Mais en plusieurs tests a/b indépendants, le rouge l’a emporté sur le vert. Ainsi, lorsqu’il s’agit de communiquer via les couleurs, il est préférable de prendre tous les conseils avec précaution et de faire vos propres tests pour obtenir des informations exploitables.

Gardez à l’esprit, cependant, que même après avoir trouvé la palette de conversion élevée pour vos messages visuels, votre travail est loin d’être terminé. La couleur du bouton ne sera à son maximum efficace que lorsqu’elle sera en synergie avec son environnement visuel. La relation entre le bouton et le reste de la mise en page doit être harmonieuse et équilibrée, mais aussi suffisamment contrastée pour attirer l’attention des utilisateurs. Des combinaisons de couleurs complémentaires méritent également d’être envisagées – elles sont agréables à l’œil et offrent le contraste nécessaire.

L’importance des couleurs dans la conception des boutons CTA devient encore plus claire dans situations qui justifient deux boutons, dont l’un est un CTA classique et un autre qui conduit à des informations complémentaires sur le sujet.

Dans ce cas, le bouton strictement de type CTA doit être surligné et accentué, afin que les utilisateurs se concentrent d’abord dessus. Ceci peut être réalisé avec une couleur de signalisation audacieuse, telle que le rouge, l’orange ou toute variation de celles-ci.

Dans l’exemple ci-dessus, vous remarquerez que l’autre bouton, celui invitant les visiteurs à en savoir plus sur le service en question, est beaucoup plus sobre (dans ce cas, vient d’être décrit), assurant que le CTA reçoive toute l’attention.

Animation et détails sur les boutons CTA

Le troisième aspect de la conception CTA est l’animation des boutons. Avec des icônes, des illustrations discrètes et d’autres éléments graphiques, l’animation peut apporter une autre couche de valeur visuelle et communicative. Lorsqu’elle est utilisée correctement, l’animation fonctionnelle en tant qu’outil UX peut rendre les boutons plus intuitifs et directs, et donc améliorer considérablement leur efficacité.

Lors de la conception des CTA, l’animation est principalement utilisée pour les effets de survol. Ces animations ne doivent pas être trop interactives ou trop bruyantes, car nous ne voulons pas qu’elles détournent l’attention du message. Trop d’animation peut dérouter l’utilisateur et créer un effet émotionnel négatif.

Cependant, les boutons subtilement animés sont toujours une grande contribution à la conception CTA, l’enrichissant et s’assurant que le focus est clair.

En plus des effets de survol animés, les concepteurs optent parfois pour éléments et icônes supplémentaires, en particulier pour les boutons qui invitent les utilisateurs à ajouter au panier, télécharger, télécharger, supprimer, etc. Dans ce cas, il est essentiel de s’assurer qu’il y a suffisamment d’espace vide entre le texte du bouton et ces éléments supplémentaires, ainsi qu’entre les éléments et les bordures du bouton. Le bouton, avant tout, doit être facile à lire et ne doit pas paraître encombré.

Le positionnement des boutons CTA

Le dernier aspect qui détermine le succès d’un bouton CTA est son timing ou, plus précisément, son positionnement. Bien qu’il n’y ait pas de « règle d’or » quant à l’endroit où placer le bouton, une chose est claire : il doit être servi au visiteur au bon moment.

Cela signifie que vous devez réfléchir très attentivement à quel moment pendant le séjour du visiteur sur la page il ou elle devrait voir le bouton. Lorsque le visiteur est bien préparé pour l’action en utilisant du contenu et des informations visuels et textuels, la chance d’effectuer l’action souhaitée devient réelle.

Toute la page – sa conception et son contenu – doit donc être structurée et conçue de manière à conduire le visiteur vers l’objectif final (action), qu’il s’agisse d’un abonnement, d’un achat ou autre.

Placer un CTA au dessus du pli (la partie de la page qui est visible pour la première fois lors du chargement) était un standard, mais comme le défilement est une action que nous effectuons maintenant si naturellement et automatiquement, le « contenu au-dessus de la ligne de flottaison » a perdu une partie de son « prestige ». En fait, mettre un CTA juste en haut, avant même que l’utilisateur n’ait la chance de s’installer et d’explorer le contenu peut souvent être contre-productif.

Si vous placez le bouton sous le pli, cela signifie que le visiteur doit effectuer un chemin pour l’atteindre. Si vous avez bien planifié la structure de votre page, ce chemin sera plein d’indices visuels et textuels qui pousseront doucement le visiteur vers le bas, le préparant à l’action.

Une fois que vous avez trouvé l’emplacement idéal pour le bouton, vous devez vous assurer qu’il reste concentré. Pour ce faire, vous devez vous assurer qu’il y a suffisamment d’espace négatif autour de lui. Cela permet au visiteur de « reposer son œil » et permet au bouton d’être clairement visible et son message d’être compris.

Dernières pensées

Propre, simple, ciblé et engageant – ce sont les principales qualités d’un bon bouton CTA de conversion. Nous avons vu que beaucoup de ces qualités viennent de la conception. Bien que les directives générales et les suggestions pour concevoir le bouton CTA parfait soient claires, une approche individuelle est toujours conseillée. Bien sûr, il peut être prouvé que la couleur rouge fonctionne très bien, mais si elle entre en conflit avec le ton et la palette de votre site Web, vous ne devriez pas l’utiliser. Il en va de même pour les directives concernant la forme, la taille et la position du bouton. Une fois que vous avez conçu un bouton qui correspond à votre image de marque et que vous lui avez trouvé un endroit idéal, assurez-vous de le tester avec quelques versions légèrement différentes. Et n’oubliez pas de soutenir vos CTA avec un contenu à forte valeur ajoutée et une excellente copie.