9 conseils de conception CTA importants pour les boutons qui incitent les gens à cliquer

Publié: 2022-08-27
Temps de lecture : 10 minutes

Votre appel à l'action (CTA) est le point culminant de votre stratégie marketing. Que vous demandiez un achat, une inscription ou un téléchargement. Jusqu'à présent, tout a consisté à attirer des clients potentiels sur votre page de destination. Et parfois, vous n'avez que quelques mots pour sceller l'affaire.

C'est pourquoi votre bouton CTA est l'élément de conception le plus important de votre site. Parce qu'il peut transformer les visiteurs passifs en utilisateurs actifs.

Les boutons d'appel à l'action semblent simples. Mais ils sont faciles à gâcher. Ou être complètement raté. Ces 9 conseils de conception CTA vous permettront d'obtenir cette conversion. De plus, de nombreux exemples utiles :

  1. Rendez votre bouton cliquable
  2. Soyez descriptif avec votre copie
  3. Taillez et espacez correctement
  4. Connectez-vous à la première personne
  5. Créer de l'urgence et utiliser des verbes forts
  6. Essayez un sous-titre
  7. Variantes des tests A/B
  8. Attention à la version mobile

Rendez votre bouton CTA cliquable

Faire en sorte qu'un bouton ait l'air "cliquable" semble idiot. Mais vous ne croiriez pas combien de fois les sites se trompent. Et cela a surtout à voir avec le contour et la couleur du bouton.

Les tendances du taux de conversion vont et viennent. Comme le "bouton fantôme" transparent avec une fine bordure et du texte qui s'estompe dans la couleur d'arrière-plan. Bien qu'ils aient l'air cool, ils ont tendance à attirer moins l'attention. Le contraire de ce qu'un CTA efficace devrait faire.

La seule fois où cette conception fonctionne généralement, c'est en tant que bouton secondaire :

Un seul bouton fantôme comme CTA principal est mauvais. L'utiliser comme bouton secondaire au bouton principal est une bonne pratique.

Source : Mouvement UX

Voici un autre exemple de boutons CTA qui ne sont évidemment pas cliquables. Bien sûr, la page d'accueil de cette agence de design a l'air cool. Mais vous seriez pardonné de faire défiler cette étude de cas :

Un bouton CTA qui se fond dans un petit sous-titre sous le titre principal "Creating the world's first community-driven superbrand"

Alors, comment faites-vous pour que les gens cliquent ? Pour des taux de conversion plus élevés, votre bouton doit être grand, gras et fonctionner avec le jeu de couleurs que vous avez choisi.

Netflix utilise sa signature rouge pour attirer votre attention. Presque comme un panneau d'arrêt :

Netflix utilise un bouton CTA rouge "Commencer" à côté de sa boîte d'adresse e-mail.

Il peut également fonctionner pour avoir une couleur contrastante, de sorte qu'il se démarque. Comme ce que la plate-forme de commerce électronique BigCommerce a fait ici :

"7 stratégies de vente au détail pour surmonter un plateau de croissance" en texte blanc sur fond bleu marine. Un bouton CTA bleu vif à côté avec du texte blanc qui dit "Guide de téléchargement".

Cela s'applique également au texte de la boîte. Assurez-vous qu'il contraste afin que vous puissiez le lire correctement.

Les dégradés peuvent également fonctionner dans le même jeu de couleurs de marque. Ils donnent aux choses une touche moderne et plus jeune :

Un bouton CTA dégradé violet à lilas avec un texte blanc indiquant "Commencez" sur un fond bleu marine.

Source : lundi

Mon conseil ici serait d'essayer de garder votre conception CTA évidente. Faire quelque chose hors de la boîte peut sembler une bonne idée, mais les humains sont des créatures d'habitude. Et vous seriez étonné du nombre de personnes qui manqueront le point.

Soyez descriptif avec votre copie

L'une des tactiques les plus simples d'optimisation du taux de conversion (CRO) est une excellente rédaction. Mais pas seulement avec de gros morceaux de texte. La microcopie est tout aussi importante et couvre les moindres détails.

Vous le voyez généralement dans les formulaires de contact et les barres de mise à jour du statut des médias sociaux. Comme le fameux « What's on your mind? » de Facebook. ou "Commencer une publication" de LinkedIn.

La microcopie peut aider :

  • Dites aux utilisateurs quoi faire
  • Faire des suggestions
  • Répondre aux préoccupations
  • Fournir un contexte

La copie de votre bouton CTA est un autre exemple. Et il devrait dire aux gens exactement ce qu'ils vont obtenir/ce qui va se passer lorsqu'ils cliquent dessus.

C'était le bouton CTA d'IMPACT. "Téléchargement Gratuit". Pas très imaginatif, hein ?

Source : IMPACT

Mais en le rendant plus descriptif, ils ont augmenté les conversions de 78,5 %. "Montrez-moi comment attirer plus de clients" a clairement séduit davantage :

Il est tentant d'écrire simplement "Cliquez ici". Mais il existe tellement d'alternatives qui engageront les utilisateurs et, espérons-le, inspireront l'action souhaitée.

Alors, que faut -il écrire ? Tout d'abord, vous devez identifier l'intention de conversion. Vous souhaitez vous aligner sur l'endroit où se trouvent les utilisateurs dans l'entonnoir et d'où ils viennent (source de trafic).

L'entonnoir d'achat et les types de contenu qui s'alignent. Étrangers - attirez avec un blog, un contenu premium, des publicités. Perspectives - convertissez avec des listes de contrôle, des infographies, des webinaires eBooks, des cours. Prospects - concluez avec des essais, des démonstrations, des consultations, des audits. Clients et promoteurs - ravissez-vous des sondages, des programmes de parrainage, des modules complémentaires et des premières versions.

Source : ClientBoost

Ensuite, vous devez mettre l'accent sur la valeur de ce que vous fournissez. Et traiter toutes les objections.

Faites correspondre le sentiment, par ex. "J'ai essayé, je suis bloqué, j'ai besoin d'aide". Étape suivante réalisable, par ex. " Associez-moi à un développeur ". Traiter l'objection, par ex. "Essayez Prisma en 5 minutes". Rendez-le spécifique, par ex. "Démarrez un essai de 7 jours pour 7 $".

Source : Exemples de marketing

C'est un processus tellement unique. Et cela dépendra de votre créneau et de la voix de votre marque. Mais quelle que soit la formulation que vous choisissez, n'oubliez pas de garder le texte du bouton court et précis.

Taillez correctement et utilisez des espaces blancs

La conception des boutons CTA est bien plus que la couleur. La taille des boutons est un autre petit détail qui peut vraiment affecter le taux de clics. Et l'espace blanc est tout aussi important que le texte lui-même.

Cela dépendra en grande partie de la conception de votre site Web. L'espace négatif (blanc) attire l'attention sur certains éléments d'une page. Vous ne voulez pas une page d'accueil encombrée. Il doit y avoir un chemin évident pour le visiteur à suivre.

Airbnb est l'un des meilleurs exemples d'espace négatif bien fait. Et une couleur contrastante pour le rendre encore plus évident :

Un fond noir avec un titre blanc au milieu "Ouvrez votre porte à l'hébergement". Sous un bouton CTA rose qui dit "Essayez l'hébergement".

Buffer a un peu plus sur leur page d'accueil mais ils gardent toujours le bouton CTA près de la copie principale. De plus, un exemple d'utilisation efficace des boutons fantômes. Cela indique très clairement ce qu'il faut faire ensuite :

La page de destination de Buffer qui dit "Développez votre audience sur les réseaux sociaux et au-delà". Le bouton principal CTA (Commencez maintenant) est bleu avec du texte blanc avec un bouton transparent à côté indiquant "Regarder la vidéo".

Plus votre bouton est gros, plus il est visible. Et il doit se démarquer pour attirer l'attention. Mais pas au point de prendre le dessus sur la page et de gâcher l'UX.

Si vous êtes sujet aux migraines, détournez le regard maintenant. Voici un exemple de comment ne pas le faire :

Une page de destination extrêmement encombrée avec du texte et des boutons partout sur les comparaisons de vacances en croisière.

Source : Justinmind

Tant d'éléments ici ressemblent à un bouton. Je ne suis même pas sûr que ce site sache sur quoi il veut que les visiteurs cliquent.

En revanche, quelle est la première chose que vous voyez sur la page d'accueil de Spotify ?

L'énorme bouton "Go Premium", n'est-ce pas ? Voilà comment concevoir un parcours utilisateur clair.

Enfin, y a-t-il autre chose que vous avez remarqué sur les conceptions CTA pour les bons exemples ? Si vous jetez un autre coup d'œil, vous verrez quelque chose qu'ils ont à peu près tous en commun.

Les scientifiques ont découvert que les humains aiment «les formes aux courbes douces par opposition aux pointes acérées». Ils sont plus agréables à regarder et nous font nous sentir plus paisibles. Pour cette raison, les boutons d'appel à l'action les plus efficaces sont des rectangles aux coins arrondis.

Source : CleverTap

C'est le format le plus populaire pour une raison. Mais essayez différentes options. Votre public pourrait préférer autre chose.

Connectez-vous à la première personne

Une meilleure conception CTA peut être un ajustement. Parfois, un seul mot.

En rédaction, on nous apprend à utiliser le mot « vous ». Parce que cela donne au lecteur l'impression qu'on lui parle directement. Vous pensez donc que cela s'appliquerait également à la copie de votre bouton, n'est-ce pas ? Bizarrement, pas tellement.

Unbounce a découvert que le fait de changer la copie sur sa page de destination de "Démarrez votre essai gratuit de 30 jours" à "Démarrez mon essai gratuit de 30 jours" augmentait les taux de clics de 90 %.

Alors, pourquoi est-ce? Eh bien, lorsqu'une personne se sent connectée à un produit, elle est plus susceptible de se convertir. Il donne cette touche personnelle sans avoir à en connaître quoi que ce soit.

La psychologie du marketing montre que les décisions d'achat sont principalement basées sur l'émotion. Donc, vous voulez que le visiteur de votre site Web ait l'impression que c'est son choix.

Écrire « mon » aide l'utilisateur à visualiser l'action qu'il est sur le point d'entreprendre. Cela leur donne le contrôle et (espérons-le) les pousse vers la prise de décision.

De plus, cela peut montrer qu'ils vont obtenir une valeur immédiate. Comme sur la page d'accueil de Crazy Egg :

"Montre-moi ma Heatmap"

Source : Oeuf fou

1-800 Contacts est le plus grand magasin de lentilles de contact au monde. Mais ils font pareil. Ils s'assurent que leurs boutons CTA ne sont destinés qu'à une seule personne :

"Rechercher mes contacts/Réorganiser mes contacts"

Source : 1-800 Contacts

Peu d'entreprises utilisent cette technique. Ce qui signifie qu'il se démarque quand vous le voyez. Alors, pourquoi ne pas essayer ?

Créer un sentiment d'urgence et utiliser des verbes forts

Votre copie doit créer un sentiment d'urgence et attirer l'attention des utilisateurs. Cela fonctionne particulièrement bien pour les entreprises de commerce électronique. L'utilisation de mots comme « maintenant » et « aujourd'hui » peut aider à stimuler l'action. Parce qu'ils suggèrent que l'offre ne durera pas éternellement.

"Acheter maintenant" est un classique. Mais nous pouvons faire mieux que cela avec notre conception CTA.

« Commencez à voir des résultats dès aujourd'hui ! Commencez maintenant »

Source : GoSquared

Vous pouvez essayer une formulation comme :

  • "Faites-vous plaisir aujourd'hui"
  • "Débloquez la réduction maintenant"
  • "Téléchargement unique gratuit"

Vous souhaitez également rendre votre offre attractive et susciter la curiosité. Alors, commencez par un verbe fort. Pas quelque chose qui semble être un effort. C'est un moyen facile de décourager les gens.

Voici quelques exemples de ce que je veux dire :

Essayez ceux-ci : Plutôt que ceux-ci :
Découvrir S'inscrire
Relier Soumettre
Prétendre Payer
Rejoindre Complet
Commencer Envoyer
sauvegarder Investir
Explorer Contact
Trouver Soutien

Le côté gauche donne l'impression que vos utilisateurs obtiendront quelque chose en cliquant. Le côté droit donne l'impression qu'ils devront consacrer du temps ou de l'argent.

Vous pouvez aussi devenir vraiment créatif. Comme cette version de la page d'accueil de Huemor :

Un bouton CTA qui dit "Lancer" et "Ne pas appuyer" en dessous.

Source : FastCapital360

Ou l'ancienne page de destination du comté de Humboldt qui lui donne une touche mystique :

Un graphique d'un lapin blanc qui dit "Suivez la magie"

Source : ConEmprendimiento

Réfléchissez à des idées avec votre équipe. Aussi ridicule soit-il. Vous seriez surpris de ce que vous allez trouver et finir par utiliser. Mais quelle que soit la formulation que vous choisissez, n'oubliez pas de tenir votre promesse à l'autre bout.

Essayez un sous-titre à côté de votre bouton d'appel à l'action

Parfois, les gens ont besoin d'un petit coup de pouce. Et un peu de texte sous votre bouton CTA peut faire l'affaire. Ce n'est pas un "sous-titre" régulier. Mais c'est la façon la plus simple de le décrire.

Si nous considérons le texte du bouton comme le titre, le sous-titre le plus populaire que vous verrez est "Aucun détail de carte de crédit nécessaire". Mais le vôtre peut dire n'importe quoi. Et c'est amusant d'être un peu créatif avec ça.

La plupart du temps, ils sont utilisés pour donner confiance au client potentiel. Et ils peuvent traiter les principaux points douloureux que les gens pourraient avoir :

"Pourquoi pas ? C'est gratuit pour toujours"

Source : CoSchedule

CoSchedule comprend que les utilisateurs pourraient penser qu'il ne s'agit que d'un essai gratuit. Alors pourquoi pas? C'est gratuit pour toujours » précise.

Vous pouvez également les utiliser pour ajouter une preuve sociale :

« 2 691 entreprises se sont inscrites dans la seule semaine !

Source : Camp de base

Cela vous donne une crédibilité instantanée car les utilisateurs peuvent clairement voir que d'autres vous font déjà confiance. Cela peut également inspirer FOMO car les gens pensent qu'il doit y avoir des raisons pour tant d'abonnés.

Si vous avez une offre spéciale ou une valeur supplémentaire qui accompagne votre service, utilisez votre sous-titre pour le mettre en évidence :

"De plus, obtenez une visite guidée gratuite avec un spécialiste du référencement"

Source : Moz

La microcopie est une chance pour que la voix de votre marque brille. Même si ce n'est qu'une seule phrase. Alors, n'ayez pas peur d'être un peu effronté si cela vous convient :

"Obtenez plus de 17 nouvelles idées marketing qui sont meilleures que ce que vous avez"

Source : ClientBoost

Vous pouvez également être précis avec exactement ce qui se passera après que les gens auront cliqué. Dis leur:

  • Ce qu'ils obtiendront (nouvelles idées marketing)
  • Combien (17+)
  • Et pourquoi ils devraient s'en soucier (ils sont meilleurs que ce que vous avez)

Utilisez ces exemples comme modèles pour vous inspirer. Ou faire quelque chose de totalement différent. Assurez-vous simplement qu'il correspond à l'identité de votre marque et amusez-vous avec.

N'oubliez pas les tests A/B

La plupart des outils CRO visent à améliorer l'expérience utilisateur (UX). Et vous le faites peut-être déjà avec les principales parties de vos pages Web. Mais vous devriez aussi le faire avec les petits éléments.

Amazon est notoirement pointilleux sur ses conceptions de boutons CTA. Surtout avec une utilisation par des tiers. Alors, assurez-vous de ne pas enfreindre les règles avec le vôtre.

Après cela, de petits changements dans la conception de votre bouton peuvent avoir un impact énorme. Alors, comparez différents types de boutons CTA. Ensuite, testez les variantes A/B de :

  • Couleur du bouton
  • Copie de l'incitation à l'action
  • Police de caractère
  • Placement dans la conception de la page
  • Pop-up
  • Formulaires de contact
Changer la couleur d'un bouton "Essayer maintenant" du bleu à l'orange a augmenté le taux de clics de 25 % à 38 %.

Source : Snov

Comme je l'ai mentionné plus tôt, changer parfois un seul mot peut augmenter le taux de conversion ou de clics. Mais avant de vous lancer, vous devez comprendre comment les visiteurs naviguent sur votre site.

Vous voulez découvrir des choses comme :

  1. Avec quels éléments ils essaient d'interagir
  2. D'où ils viennent
  3. Le parcours utilisateur/l'entonnoir d'achat de votre site
  4. La motivation des gens à être là

Source : GIPHY

Une fois que vous avez ces informations, vous pouvez expérimenter des choses basées sur des faits et non sur des conjectures.

Il est généralement plus facile de comparer une version A et B avec la conception CTA. Mais vous pouvez augmenter cela et essayer des tests multivariés. Plus simple est généralement mieux au début. De cette façon, vous aurez un gagnant clair.

Mais rien ne vous empêche de tester ce gagnant contre une autre version par la suite. Vous devriez toujours tester et comparer. Même lorsque vous avez trouvé quelque chose qui fonctionne. C'est ce que font les marques qui réussissent.

Attention à la version mobile

Une petite astuce pour finir. Vos éléments de conception seront très différents sur un écran mobile. Vous travaillez avec un écran beaucoup plus petit et moins de pixels. Ainsi, l'encombrement devient beaucoup plus facile.

Tout ce que nous avons couvert devient plus répandu dans votre version mobile. Les couleurs contrastées doivent se démarquer davantage :

Page de destination mobile de Spotify - fond dégradé violet avec bouton vert "s'inscrire".

L'espace négatif devrait être une priorité :

Airbnb utilise l'espace négatif pour aider le bouton "en savoir plus" à se démarquer

Et même votre sous-titre peut se trouver à un endroit différent. Comme les utilisateurs mobiles peuvent ne pas faire défiler assez bas pour le voir ci-dessous :

"Passez à Premium et déverrouillez plus de fonctionnalités maintenant" se trouve au-dessus du bouton "En savoir plus" sur la page d'accueil mobile de Pocket.

Bravo à CleverTap pour ces graphismes

Il faut réfléchir davantage à votre UX en général sur mobile. Parce que le mobile représente plus de la moitié du trafic de recherche mondial. Vous ne pouvez pas vous attendre à ce que votre version de bureau soit traduite. Et un peu d'effort pourrait entraîner un taux de clics beaucoup plus élevé.

Conclusion

Un design CTA efficace est composé de beaucoup de ces petits détails. Je l'ai dit tant de fois tout au long, mais le plus petit ajustement pourrait suffire. Même quelque chose d'aussi insignifiant que la couleur ou la forme du contour.

Les tests A/B sont le seul moyen de le savoir. Et vous n'avez même pas besoin d'un outil CRO coûteux pour le faire. Suivez simplement vos conversions. Faire un changement. Et voyez s'il y a une augmentation ou une diminution par rapport au nombre habituel.

Donnez simplement à votre bouton d'appel à l'action l'attention qu'il mérite. Cela pourrait faire la différence entre un nouveau client ou une opportunité perdue.

Avez-vous vu des designs CTA originaux récemment ? Avez-vous fait un petit changement qui a augmenté les conversions ? Faites-le nous savoir dans les commentaires ci-dessous.