Le bouton CTA est peut-être le plus petit élément de votre site, mais il peut avoir un impact considérable sur vos taux de clics et de conversion. Découvrez ici comment concevoir des boutons CTA plus efficaces.
Il est facile de considérer les boutons de site Web comme acquis. Après tout, chaque page Web en comporte, qu’il s’agisse de simples appels à l’action comme “En savoir plus” ou d’appels plus pressants comme “Obtenez 75 % de réduction aujourd’hui”. Ce n’est donc pas comme si les visiteurs ne savaient pas ce que font les boutons CTA ou comment les utiliser.
Mais prenez l’exemple d’une manette de PlayStation. Les utilisateurs finiront par se fier à leur mémoire musculaire pour effectuer leurs actions les plus courantes et ils n’auront même pas besoin de réfléchir à ce qu’ils font. C’est devenu une seconde nature.
Mais que se passe-t-il lorsqu’ils se rendent chez quelqu’un qui a une Xbox ? La disposition des manettes est plus ou moins la même, mais certains boutons et sticks sont positionnés, dimensionnés et conçus différemment. S’ils n’ont jamais utilisé de manette de Xbox auparavant, ils risquent d’être désavantagés en jouant, ce qui peut les frustrer et les décevoir.
Cela s’applique aussi bien à la conception de boutons sur des objets physiques qu’à celle de boutons sur des sites Web.
La seule différence est que les gens doivent généralement s’habituer à une mauvaise conception des boutons physiques parce qu’ils ont déjà acheté et utilisé le système de jeu, la télévision ou le smartphone dont ils font partie. Sur les sites Web, la mauvaise conception des boutons ne sera pas considérée comme un inconvénient mineur jusqu’à ce qu’ils réapprennent à trouver et à utiliser vos boutons. Au contraire, ils quitteront le site pour se rendre sur un site dont l’utilisation n’est pas difficile ou déroutante.
C’est donc ce que nous voulons examiner aujourd’hui : Comment concevoir des boutons d’appel à l’action qui soient attrayants, utilisables et qui augmentent les taux de clics et de conversion de votre site Web. L’article sera également rempli d’exemples de boutons CTA qui inspirent l’action.
Qu’est-ce qu’un bouton d’appel à l’action ?
Un appel à l’action (ou CTA) est un lien sur un site Web qui comprend une commande ou une invitation à passer à l’étape suivante. Bien qu’il puisse être écrit sous forme de texte, la façon la plus courante de concevoir l’appel à l’action est sous forme de bouton.
La page d’accueil d’IKEA, par exemple, présente les deux types de CTA :
“En savoir plus” est un appel à l’action courant sur un site web. Toutefois, sur cette page particulière, il est conçu comme un simple lien hypertexte.
“Voir tous les services”, en revanche, est encapsulé dans un bouton noir arrondi. Il s’agit de l’approche la plus typique de la conception d’un CTA.
Cela dit, les boutons existent dans toutes sortes de formes, de tailles et de styles. Par exemple, voici à quoi ressemble le bouton “Ajouter au panier” sur les pages de produits de Home Depot :
Le bouton de Home Depot est de couleur orange vif, comporte une icône de panier devant les mots “Ajouter au panier” et se présente sous une forme rectangulaire et biseautée.
À quoi servent les boutons CTA ?
En général, les sites Web comportent de nombreux liens hypertextes, du haut de la page à la navigation, en passant par le pied de page. Les liens informatifs ne nécessitent pas un design particulier.
Ce sont les prochaines étapes importantes de votre site Web qui doivent être mises en évidence. Par exemple :
Continuer à lire
S’inscrire aujourd’hui
Acheter maintenant
Ajouter au panier
Commencez votre essai gratuit
Regardez maintenant
Inscrivez-vous et bénéficiez de 5 % de réduction
Les CTA ont également leur place à la fin des formulaires de sites Web – formulaires de contact, de recherche, de paiement, etc. Comme cet exemple “Trouver de la nourriture” de Seamless :
Les boutons CTA apparaissent sur chaque page d’un site Web. Si l’on espère et attend des visiteurs qu’ils cliquent sur ces boutons, il ne faut pas se concentrer uniquement sur l’action. Concevoir un bouton pour qu’il soit cliquable ne va pas inciter plus de visiteurs à cliquer dessus.
Pour inciter les visiteurs à agir, nous devons comprendre ce qui les pousse à le faire, puis concevoir des boutons qui les aident à atteindre leurs objectifs. Les boutons CTA doivent donc servir l’un de ces objectifs :
Éducation:
Fournir plus de contexte ou d’informations sur des points brièvement abordés sur la page.
Comme le bouton “Rencontrez-moi” sur la page d’accueil de Social Catering Co :
Orientation:
Indiquer aux visiteurs ce qu’ils doivent faire ensuite et comment s’y rendre.
Sur le site Web de Modernaweb Studio, par exemple, il y a toujours un bouton d’appel à l’action en haut de la page qui dirige les visiteurs vers la page ou l’étape suivante :
Assistance:
Donnez aux visiteurs des options s’ils sont partagés sur ce qu’ils doivent faire ensuite, comme ajouter un produit au panier ou l’enregistrer pour plus tard.
Ce point est particulièrement important pour les entreprises possédant des magasins, comme Bed Bath & Beyond, qui souhaitent offrir à leurs clients plusieurs options de paiement :
Convertissez-vous:
Donnez aux visiteurs une voie rapide vers la conversion lorsqu’ils sont prêts.
Yankee Candle, par exemple, utilise le même design de CTA sur chaque page de son processus de paiement – de “Ajouter au panier” jusqu’à “Commander” :
19 meilleures pratiques pour concevoir des CTA à fort taux de conversion + exemples
La conception d’un bouton CTA ne se limite pas à la couleur et à la taille, même si celles-ci ont aussi leur importance. Bien qu’il n’existe pas de formule secrète pour concevoir le bouton CTA parfait, il y a certaines règles à suivre si vous voulez concevoir des boutons qui captent l’attention des visiteurs et les incitent à agir.
Jetons un coup d’œil aux 19 meilleures pratiques qui vous aideront à concevoir des appels à l’action efficaces :
1. Choisissez un appel à l’action principal
Pensez à tout ce que nous pouvons faire sur le Web.
Lire des articles, communiquer avec des amis, acheter des produits, s’abonner, regarder des vidéos, consulter ses e-mails, et ainsi de suite… C’est pourquoi tant de personnes souffrent aujourd’hui de lassitude face aux décisions à prendre. Cette lassitude n’affecte pas seulement le décideur. Elle peut avoir un impact négatif sur le processus de décision.
Selon Medical News Today :
“Les effets psychologiques de la fatigue décisionnelle peuvent varier, entraînant potentiellement des difficultés à prendre les bonnes décisions, des achats impulsifs ou d’autres comportements d’évitement.”
En tant que tel, un appel à l’action est plus efficace lorsqu’il s’agit de la seule décision (ou l’une des peut-être une petite poignée de décisions) que vous demandez aux visiteurs de prendre.
Si chaque page de votre site peut proposer d’autres liens et boutons, vous ne devriez avoir qu’un seul appel à l’action principal. Comme Basecamp le fait ici :
Le gros bouton jaune “Essayez Basecamp” est l’appel à l’action principal. C’est également le seul élément de la page conçu de cette façon, ce qui permet aux visiteurs de savoir facilement ce qu’ils doivent faire ensuite.
2. Utilisez une couleur forte et mémorable
Il fut un temps où le plus grand débat autour de la conception des boutons CTA se résumait à savoir si vous deviez les faire rouges ou verts. HubSpot, par exemple, a consacré un article entier aux tests A/B de ces deux couleurs:
Si la couleur joue toujours un rôle important dans l’optimisation des boutons CTA pour les clics et les conversions, ce n’est pas aussi simple que le rouge ou le vert.
Vous devez tenir compte d’un certain nombre de facteurs :
L’image de marque
L’harmonie des couleurs
Le contraste des couleurs
Le bouton “Ajouter au panier” de Chewy est un bon exemple de la façon de choisir une couleur qui contraste bien avec son environnement tout en étant bien intégrée aux éléments de marque du site.
Si la psychologie des couleurs peut être utile lors de la conception de boutons, il ne s’agit pas d’une science exacte, d’autant plus qu’Internet permet aux entreprises, même les plus petites, de s’internationaliser. Les couleurs ont une signification différente selon les personnes et les cultures, la psychologie des couleurs n’est donc pas toujours la meilleure solution. La théorie des couleurs est un outil plus précieux.
3. Choisissez une police simple avec ou sans empattement
Vous n’aurez pas beaucoup de place pour la créativité lorsqu’il s’agira de choisir la police des boutons. Vous devez faire en sorte que les visiteurs puissent lire rapidement ce qui s’y trouve, afin qu’ils puissent agir en toute confiance.
Pour ce qui est des polices de caractères les plus lisibles sur le Web, restez-en aux serifs et sans serifs d’apparence simple, avec des caractères distinctifs. Scentbird, par exemple, utilise Proxima Nova :
Ce n’est pas une police sans empattement très intéressante, mais elle est propre, facile à lire et s’accorde avec le texte environnant. Elle permet également au design et au message du bouton d’avoir un impact plus important, car ils ne sont pas éclipsés par la typographie.
4. Le texte doit être légèrement plus grand que le corps du texte qui l’entoure.
C’est la conception de votre bouton qui doit attirer le regard des visiteurs, et non sa taille démesurée. Cela dit, vous devez tout de même tenir compte de la hiérarchie des tailles lorsque vous concevez des boutons CTA.
Prenez la page d’accueil de Netflix :
Les visiteurs vont naturellement être attirés par les plus gros morceaux de texte en premier lieu – car un texte plus gros signifie une plus grande importance.
Ce que ce design suggère, c’est que le H1 “Films illimités, émissions de télévision et plus encore” dans une police plus lourde de 27 pixels est la chose la plus importante à regarder. Le deuxième élément le plus important est le grand champ blanc “Adresse électronique” et le bouton rouge “Get Started >”.
Vous pouvez utiliser une combinaison de taille et de poids de police pour aider à diriger les yeux des visiteurs à travers votre contenu et pour les amener au CTA beaucoup plus rapidement, aussi.
C’est à vous de décider de l’importance à accorder à votre bouton CTA. Pour les CTA primaires, leur taille doit être plus proche de celle de vos H1 et H2 que de celle du corps du texte. Pour les CTA secondaires et tertiaires, en revanche, ils peuvent être plus petits tant qu’ils restent lisibles et cliquables.
5. Laissez un espace suffisant autour des lettres et du bouton
L’espace blanc permet à vos éléments de conception les plus importants de respirer, ce qui aide les visiteurs à les trouver plus facilement et à s’y concentrer. Et autour du texte, en particulier, l’espace blanc peut contribuer à améliorer la lisibilité ainsi que la possibilité de cliquer.
C’est pourquoi l’espace doit être pris en compte lors de la conception des boutons CTA. Ce sont des éléments importants qui font passer les visiteurs d’une page ou d’une étape à l’autre. Ils ne doivent pas se perdre dans la masse ni être difficiles à lire ou à utiliser.
Prenons l’exemple de la page d’accueil promotionnelle de la prochaine tournée mondiale (virtuelle) de Muse :
L’image du héros est un véritable spectacle. Si le concepteur avait placé un bouton CTA à cet endroit, il aurait été difficile de le trouver.
Mais au fur et à mesure que les visiteurs font défiler la page, le design s’estompe et s’ouvre sur une tonne d’espace blanc. Et cela les conduit finalement au bas de la page où ils trouvent deux appels à l’action pour “WATCH LIVE EVENT” ou “ENTER WEBSITE”.
L’espace entourant les CTA est une bonne chose, car il permet de les trouver facilement, de les distinguer les uns des autres et de cliquer sans erreur sur le bon CTA.
6. Restez en phase avec les tendances de conception modernes
Lors de la conception des boutons CTA, il faut qu’ils correspondent au style de la marque et qu’ils s’alignent sur les tendances actuelles en matière de design.
Par exemple, le néomorphisme gagne lentement en popularité. Cependant, vous ne voulez pas utiliser un bouton néomorphe si le reste de votre site et de votre marque est plat. Dans ce cas, il serait préférable de donner à votre bouton un design plat, mais d’y intégrer une tendance comme les dégradés.
Si les dégradés ou d’autres tendances en matière de couleurs ne sont pas adaptés à votre design, suivez l’exemple de Het Blok et ajoutez une micro animation accrocheuse au bouton :
Les micro-animations seront toujours à la mode en ce qui concerne la conception de boutons, car elles améliorent leur convivialité.
7. Choisissez des boutons pleins plutôt que des boutons à contours
Depuis quelques années, la tendance est de donner aux boutons un design transparent. Ces types de boutons sont également appelés boutons “fantômes”.
Le plus gros problème de cette tendance est que les recherches ont prouvé à maintes reprises que les boutons aux contours transparents ont des taux de clics plus faibles et des taux d’erreurs plus élevés que les boutons pleins. Bien qu’ils puissent paraître plus minimaux ou élégants, ils ne sont tout simplement pas aussi conviviaux.
Ainsi, lorsque vous concevez vos boutons CTA primaires, optez toujours pour des boutons pleins (remplis). Ensuite, si vous devez ajouter des boutons secondaires ou tertiaires à la page, faites-en des boutons fantômes si vous souhaitez leur donner moins d’importance.
Cette tactique de conception peut également être utile si vous souhaitez placer plusieurs CTA côte à côte et montrer aux visiteurs quelle option est la meilleure, comme le fait ici America’s Test Kitchen :
Le regard des visiteurs se portera naturellement sur le bouton “Accès gratuit” qui est rempli et placé en premier dans la séquence. Même s’il n’y avait pas la mention “Le plus populaire” en haut, je suis prêt à parier que cet abonnement obtiendrait plus de clics et d’achats, simplement parce que le design fantôme suggère que les autres n’ont pas autant de valeur.
8. Donnez-lui un design “cliquable
Il y a une chose que vous voulez que les visiteurs fassent lorsqu’ils voient un bouton : Cliquer dessus. Il faut donc qu’il ait l’air d’être cliquable lorsqu’il est entouré d’éléments non cliquables.
Le moyen le plus simple d’y parvenir est de lui donner la forme rectangulaire ou ovale que les gens ont l’habitude d’associer aux boutons.
Si cela correspond à votre image de marque, vous pouvez faire plus pour que vos boutons se démarquent. Par exemple, le bouton Jumpin hero image fait deux choses pour indiquer aux visiteurs qu’il est cliquable :
La première est qu’il donne l’impression de projeter une lumière dans ses coins. La seconde est qu’il s’agrandit lorsque l’utilisateur le survole.
D’autres moyens de faire apparaître un bouton cliquable consistent à ajouter une ombre à l’arrière-plan ou à lui donner un bord biseauté.
En concevant vos boutons de cette manière, vous réduirez les erreurs de clic et aiderez les visiteurs à trouver et à utiliser plus rapidement vos appels à l’action.
9. Créez un design de bouton spécifique aux utilisateurs mobiles
Ce qui fonctionne bien pour les utilisateurs d’ordinateurs de bureau et de portables n’est pas toujours le cas pour les utilisateurs de smartphones. Et nous ne parlons pas seulement de la taille ou de la couleur du bouton CTA.
Prenez, par exemple, le bouton “Tickets” d’Eventbrite sur un ordinateur de bureau :
Il est placé sur le côté droit de la page, directement sous les détails de base de l’événement. Il est similaire à la conception que nous voyons et attendons des pages de produits de commerce électronique.
Sur un mobile, ce type de conception n’a pas de sens. Si le concepteur doit conserver autant que possible l’aspect du bouton, son emplacement et sa fonctionnalité doivent être adaptés à l’expérience mobile.
C’est exactement ce qu’ont fait les concepteurs d’Eventbrite :
Le bouton vert “Tickets” apparaît d’abord sous les détails principaux de l’événement sur la page mobile. Lorsque l’utilisateur fait défiler la page, il se colle au bas de la page pour être toujours présent.
10. Incluez un CTA au-dessus du pli sur certaines pages clés
Si chaque page de votre site doit comporter un appel à l’action, il n’est pas toujours indispensable de le présenter à vos visiteurs en premier lieu. Les pages internes “Services” ou “À propos” sont informatives. Les visiteurs se rendent sur ces pages pour en savoir plus, alors donnez-leur une chance de lire avant de les inviter à “Nous contacter” ou “Explorer notre travail”.
Il existe cependant certaines pages où le CTA doit être placé au premier plan :
les pages d’accueil
Pages d’atterrissage
Pages de produits
La page produit de 23andMe en est un bon exemple :
Avec un tel design, les visiteurs ont une vue d’ensemble du produit et savent instantanément quelle est la prochaine étape : Ajouter au panier. Ils peuvent prendre leur temps pour parcourir la page et déterminer si le produit leur convient. Ensuite, lorsqu’ils seront prêts, ils se souviendront de l’endroit où se trouve le bouton CTA pour convertir.
En le plaçant en haut de la page dans un design sans distraction, la conversion devient rapide et sans douleur.
11. Placez les boutons dans le parcours de vos visiteurs
Lorsque vous concevez un site Web en fonction du parcours de l’utilisateur, vous ne devez pas seulement penser à la façon dont il se rend d’une page à l’autre. Vous devez également tenir compte de la manière dont ils vont se rendre du haut de la page au bas de la page – et où ils vont s’arrêter en cours de route.
Les recherches menées par NNG révèlent que les gens parcourent le texte avec leurs yeux de plusieurs façons. Le modèle F, par exemple, est l’un des modèles de lecture les plus courants :
En anticipant l’endroit où les yeux de vos visiteurs vont se diriger sur la page, vous pouvez placer vos boutons sur leur chemin.
Ces études d’eye-tracking suggèrent également que certains éléments attirent davantage l’attention des utilisateurs que d’autres – comme les en-têtes et les images. Si vous parvenez à concevoir vos boutons CTA de la bonne manière, cela n’aura pas trop d’importance s’ils s’écartent légèrement des sentiers battus.
Le site Web de Casper utilise ces deux principes d’eye-tracking :
La majorité des CTA de cette page se trouve près du bord gauche de la page – là où se concentrent les yeux de la majorité des visiteurs. Mais nous voyons également un certain nombre de boutons CTA placés plus loin sur la page. Ils sont tous intégrés à une image accrocheuse, ce qui, nous le savons, attirera l’attention des visiteurs. Ainsi, même s’ils ne sont pas placés sur le chemin naturel, les visiteurs sont toujours susceptibles de les rencontrer.
12. Ne mettez pas vos boutons en concurrence pour attirer l’attention
Cette meilleure pratique a trait aux distractions. Ou plutôt, l’absence de distractions, de sorte que les visiteurs ne puissent s’empêcher d’être attirés par vos CTA.
Lorsque vous regardez la page d’accueil du site Web de Merrill Lynch, quelle est la première chose que vous remarquez ?
Si vous n’êtes pas client de Merrill Lynch et que c’est la première fois que vous visitez le site, le bouton rouge vif “Get started” est probablement celui qui attire votre regard.
Cela s’explique en partie par la couleur du bouton et l’espace blanc important qui l’entoure. Mais le design environnant est également en partie responsable.
Le bleu foncé de la marque est une couleur sûre et stable, qui ne risque pas de détourner l’attention du bouton rouge. L’image au centre de la page est également un choix sûr. Si vous aviez une image de personnes faisant la fête et jetant de l’argent en l’air, cela pourrait accaparer une partie de l’attention. Mais ce n’est pas du tout le cas de cette photo d’archives. Au contraire, elle laisse la place au CTA.
13. Créez un état de survol
Nous avons déjà vu quelques exemples de boutons avec des transformations de l’état de survol. Il y a une bonne raison à cela.
Pour les boutons plats, une micro animation déclenchée par le survol confirme instantanément que oui, vous pouvez utiliser cet élément. Pour les boutons non plats, l’animation peut ajouter un petit élément de surprise aux visiteurs lorsqu’ils s’y attendent le moins.
Tout comme la conception des boutons elle-même, il existe de nombreuses façons d’animer un bouton en mode survol :
changer la couleur
Modifier le texte
modifier le style du texte
ajouter ou supprimer une icône
modifier la forme ou la taille du bouton.
Voici un article du site Delish qui fait la promotion des meilleurs cocktails en boîte :
Certains des cocktails de cette liste sont accompagnés d’un bouton CTA, qui dirige les lecteurs vers un lien sur Drizly. Lorsque le lecteur survole le bouton, celui-ci change de couleur, passant du noir au bleu sarcelle (avec un léger décalage), et le texte passe d’uni à incliné.
Il y a tellement de façons de transformer le design de votre bouton. Assurez-vous simplement qu’il s’accorde avec le reste de votre image de marque.
14. Le résultat du clic doit être parfaitement clair
Les mots qui figurent à l’intérieur du bouton sont tout aussi importants que son design.
La première règle à garder à l’esprit lors du choix du texte du bouton est que le résultat doit être clair comme de l’eau de roche. Un bouton qui dit “Cliquez ici” ne va pas contribuer à augmenter le nombre de clics.
En revanche, un bouton indiquant “Planifier un essai routier”, comme celui de la page d’accueil de MINI USA, augmentera le nombre de clics :
Toute personne qui voit ce bouton rouge sait exactement ce qu’elle va trouver sur la page suivante : Un formulaire de réservation.
Gardez simplement à l’esprit que l’attente doit correspondre à la réalité. Ainsi, tout bouton qui dit “Planifier” doit diriger les visiteurs vers une page où ils peuvent planifier en ligne. S’il tente d’ouvrir l’application Facetime ou l’application téléphone de leur appareil, cela peut entraîner une augmentation du taux de rebond, qui peut à son tour nuire à la capacité du site à se classer.
Conclusion : Assurez-vous que la commande ou l’invitation décrit avec précision ce qui va suivre.
15. Incluez des mots d’action dans vos boutons
Une autre bonne règle à suivre pour le texte des boutons est d’inclure des mots qui inspirent l’action.
Une façon d’y parvenir est de commencer le texte de votre bouton par un verbe. Au lieu d’un bouton qui dit :
“Téléchargement de l’Ebook”
Faites-le dire :
“Télécharger votre Ebook”
C’est une tournure de phrase plus forte et cela ressemble à un appel à l’action plutôt qu’à un autre lien sur lequel ils doivent cliquer.
Une autre façon d’inciter à l’action est de rendre l’appel à l’action plus personnel. Vous n’avez pas nécessairement besoin de l’imprégner d’un tas de mots chargés d’émotion.
Prenez, par exemple, cette barre de notification sur le site Web de The Bump :
Tant qu’un visiteur ne la quitte pas, c’est la première chose qu’il voit sur chaque page.
“Rejoignez-nous maintenant” n’est pas en soi un appel à l’action unique. L’utilisation du point d’exclamation, en revanche, en fait une action unique.
Dans le domaine de la rédaction, nous n’utilisons généralement pas de ponctuation à la fin des en-têtes et autres courtes chaînes de texte, comme les boutons. L’une des raisons est que chaque caractère compte et que nous n’avons pas beaucoup d’espace à gaspiller. Mais c’est aussi parce que la ponctuation a pris une connotation pas très positive pour certaines personnes.
Si l’on tient compte du public cible d’un site Web comme The Bump et du contexte dans lequel il apparaît, le point d’exclamation prend tout son sens. Les parents et les futurs parents viennent sur ce site pour obtenir des informations sur la grossesse et l’éducation des enfants. C’est quelque chose d’excitant, mais aussi d’accablant par moments. L’appel à “rejoindre” la communauté The Bump – composée de personnes qui vivent exactement la même chose ! – est une raison d’être enthousiaste.
16. Utilisez des mots qui ont un sens dans le contexte de la page.
Il existe des exceptions aux deux meilleures pratiques ci-dessus – pas pour les CTA primaires, mais certainement pour les secondaires et tertiaires. Tout dépend du contexte fourni autour du bouton.
Examinons cet exemple sur la page d’accueil de Tuft & Needle :
Les zones supérieures de la page d’accueil appellent à “Acheter maintenant”. C’est logique en haut de la page. Mais ici, plus près du pied de page, nous n’avons pas besoin de ce type de texte de bouton.
Regardez le CTA sur la gauche. Tout ce qu’il dit est “Allons-y !”. En soi, cela n’a pas beaucoup de sens. Mais les visiteurs qui lisent le texte ci-dessus savent que le bouton va “m’amener à la” page cible.
Ne vous sentez donc pas obligé de toujours rédiger un texte d’action pour le bouton si le texte environnant se charge d’appeler les visiteurs à l’action.
17. Ne stressez pas sur le nombre de mots du bouton
Il n’y a généralement pas de règle concernant le nombre de mots dont votre bouton a besoin pour augmenter le nombre de clics. Cela dépend simplement de l’objectif du bouton et du contexte.
Par exemple, les CTA les plus courants que nous utilisons sont courts et faciles à comprendre :
Contactez-nous
Ajouter au panier
S’abonner
Nous n’avons pas besoin de fournir plus d’informations autour ou à l’intérieur des boutons car il n’y a pas de mystère sur ce qui se passe ensuite. Mais pour les appels à l’action totalement personnalisés, vous pouvez trouver qu’un bouton plus long est nécessaire.
Le blog Sumo, par exemple, a récemment publié un article sur la réalisation d’un audit des médias sociaux. Dans cet article, on trouve ce long CTA :
Il se lit comme suit : “Obtenez une copie du modèle d’audit des médias sociaux de Sumo”.
Ce type de CTA aurait pu être ajouté à l’article sous la forme d’un lien hypertexte ordinaire, mais le gros bouton vert le rend beaucoup plus facile à repérer. Et l’explication plus longue à l’intérieur du bouton permet aux visiteurs de savoir ce qu’ils trouveront de l’autre côté du bouton.
Il faut toutefois garder à l’esprit l’effet de l’ajout de texte sur la taille du bouton. Si vous devez réduire la taille de la police pour faire tenir le texte sur une seule ligne, c’est peut-être qu’il est trop long.
18. Faites attention à la directionnalité
Lorsque vous concevez une page Web, vous savez que les visiteurs se déplaceront automatiquement d’une certaine manière d’un bout à l’autre de la page. Vous savez également que si vous concevez la page d’une certaine manière, vous pouvez activement faire bouger leurs yeux dans la direction que vous souhaitez.
Vos boutons peuvent également jouer ce rôle.
Sur le site Web de Visit Music City, nous voyons plusieurs façons de mettre cela en pratique :
Tout d’abord, une flèche orientée vers la droite avec le mot “Suivant” en dessous.
Nous constatons également que les CTA textuels “En savoir plus” comportent des flèches orientées vers la droite. Cependant, lorsque quelqu’un les survole, les pointes de flèche sont orientées plus à droite.
Enfin, il y a le bouton CTA rouge. De l’extérieur, le design du bouton ne semble pas avoir de caractère directionnel. Mais lorsque vous le survolez, il passe du rouge vif au rouge foncé, le changement de couleur commençant à gauche et se déplaçant vers la droite.
Ces indices directionnels contribuent à créer un site Web plus actif, comme s’il était constamment en mouvement et vous entraînait avec lui.
19. Utilisez des conceptions d’état inactif sur vos formulaires
Plutôt que de laisser vos boutons actifs s’ils dépendent du bon remplissage d’un formulaire, créez un état inactif pour vos boutons.
Minted nous montre une façon de le faire :
Le formulaire d’abonnement en bas de la page comporte un bouton “S’inscrire” estompé. Il ne s’allume pas en vert tant qu’une adresse électronique n’a pas été fournie.
VSP a une autre façon de gérer ce problème :
Les visiteurs ne peuvent pas cliquer sur “Voir les plans” ou “En savoir plus” avant d’avoir fourni une réponse dans le formulaire. Lorsqu’ils le font, le bouton inactif devient bleu et ils peuvent soumettre leur demande.
Ce type de conception de bouton CTA oblige les visiteurs à ralentir un tout petit peu, ce qui signifie moins de messages d’erreur et de frustration à gérer.
Comment effectuer un test A/B sur votre CTA
Le bouton CTA est un élément important qui conduit les visiteurs de différentes parties de votre site à d’autres – et idéalement jusqu’à la conversion. La seule façon de s’assurer qu’il maximise les clics et les conversions pour votre public spécifique est d’en tester des variantes.
Voici quelques étapes de base à suivre lorsque vous effectuez un test A/B sur la conception de votre bouton :
Étape 1: Créez votre hypothèse
Tout test doit commencer par une hypothèse.
Même si votre page et votre bouton obtiennent des clics, pensez-vous qu’il y a quelque chose qui retient les gens ? Si oui, pourquoi ?
Vous pouvez utiliser Google Analytics et des outils de cartographie thermique comme Hotjar pour formuler votre hypothèse.
Avec Google Analytics, vous devrez définir des objectifs afin de pouvoir suivre les clics sur les boutons individuels. Une fois que vous avez isolé l’activité du bouton, segmentez les utilisateurs et déterminez si certaines personnes ne convertissent pas.
Hotjar vous aidera à visualiser ce qui se passe avec vos boutons grâce à des cartes thermiques et des enregistrements de session :
Vous n’aurez pas la possibilité de segmenter autant que vous pouvez le faire avec Google, mais les données peuvent toujours être utiles.
Étape 2: Choisissez un élément à tester
Une fois que vous avez une idée de ce qui pourrait améliorer vos taux de clics, choisissez un élément à tester. Par exemple :
Couleur
Type de police
Taille de la police
Icône ou pas d’icône
Bordure ou pas de bordure
Taille du bouton
Emplacement du bouton
Conception de l’état de survol
Copie
En testant un élément à la fois, vous serez en mesure d’affiner la conception de votre bouton petit à petit et de l’obtenir aussi près de la perfection que possible. Il n’y aura pas non plus de doute après le test quant à savoir si les changements de conception ont amélioré ou détérioré votre taux de conversion.
Étape 3: Assurez-vous que votre bouton CTA est dans un format facile à éditer.
Cela peut sembler anodin, mais vous allez effectuer de nombreux tests A/B sur vos boutons CTA. Vous voudrez donc qu’ils soient créés dans un format facile à modifier – et qui vous donne la possibilité de tester toutes les variations que vous voulez.
Le widget Call-to-Action d’Elementor est une bonne solution pour cela si vous voulez créer un bloc avec un bouton CTA à l’intérieur. Vous pouvez également utiliser le widget Bouton pour placer un bouton dans votre conception ou votre texte.
Étape 4: Configurer et exécuter votre test A/B
Nous avons un guide entier dédié aux tests A/B. Dans ce guide, nous vous donnerons quelques outils différents que vous pouvez utiliser pour tester vos designs à l’intérieur et à l’extérieur de WordPress.
Vous obtiendrez une description des étapes à suivre pour les deux options. Pour Google Optimize :
Créez votre variante originale
Ajoutez Google Analytics et Google Optimize à votre site Web.
Configurez un test A/B dans Google Optimize.
Pour Elementor et le plugin Split Test for Elementor :
Créez un nouveau test
Configurer le test dans Elementor
Afficher les résultats du test
À propos, si vous essayez de ne pas adopter trop d’outils externes pour créer et gérer votre site Web, Elementor offre un ensemble complet de conception et de marketing, et pas seulement en ce qui concerne les tests A/B.
Étape 5: Contrôlez les résultats de votre test A/B et mettez votre bouton à jour
Avant de lancer votre test, fixez une date de fin et/ou une taille d’échantillon à laquelle vous souhaitez vous arrêter. Sans point final définitif, votre test A/B ne vous donnera pas de résultats précis.
Vérifiez le trafic moyen de votre page Web ainsi que les taux de clics (CTR) actuels pour ce bouton pendant la période que vous avez choisie. Par exemple :
Délai : 4 semaines (1er décembre – 31 décembre)
Volume de trafic moyen : 3 000 visiteurs
CTR moyen : 3 % (90 visiteurs)
L’objectif de votre test doit correspondre à la même période, et vous devez viser à tester à peu près le même nombre de visiteurs pendant cette période. 50 % verront votre bouton original et 50 % verront votre variante.
Lorsque le test est terminé, vous pouvez commencer à examiner les résultats.
Vous comparerez le nombre de conversions et le taux de conversion de votre variante à ceux de la conception originale. L’espoir est que la variante surpasse le design original, prouvant ainsi votre hypothèse qu’il s’agissait d’un design plus efficace pour l’utilisateur. Ce n’est pas grave si cela ne se produit pas. Vous en tirerez une leçon précieuse dans tous les cas.
Cela dit, un taux de conversion plus élevé ne signifie pas à lui seul que la variante est gagnante. Il faut qu’il y ait une différence significative entre les chiffres. C’est l’une des raisons pour lesquelles vous avez besoin d’un large échantillon de visiteurs.
Disons que voici notre test A/B :
Nombre de visiteurs Nombre de conversions Taux de conversion
Original 50 5 10
Variante 50 7 14
Avec un taux de conversion supérieur de quatre points de pourcentage, la variante semble être la grande gagnante. Mais si l’on examine les données de plus près, une différence de deux conversions dans un groupe de 50 visiteurs n’est pas très significative.
Ce test A/B, par contre, vous donnerait un vainqueur clair en termes de conception de bouton :
Nombre de visiteurs Nombre de conversions Taux de conversion
Original 5000 500 10
Variante 5000 700 14
Faites donc très attention au contexte de vos résultats. Si vous ne le faites pas, vous risquez de mettre en place un nouveau modèle de bouton CTA qui nuira au taux de clics et au taux de conversion de votre page.
Conclusion
Les boutons CTA font peut-être partie des éléments les plus petits de votre site Web, mais ils peuvent facilement entraîner une grande frustration de la part de l’utilisateur s’ils sont difficiles à trouver ou à utiliser. Cette frustration peut faire baisser vos taux de clics et de conversion et augmenter vos taux de rebond.
Si vous voulez minimiser les risques et maximiser les avantages de vos boutons CTA, assurez-vous que chaque centimètre est bien conçu. Puis modifiez cette conception jusqu’à ce que vous trouviez la combinaison parfaite d’éléments – de la couleur du bouton au texte – pour votre public cible.