Comptez cette action en haut de la page. Où placer les appels à l’action ? Types de boutons d'appel à l'action

24.04.2019

La question semble assez évidente. Mais qu’est-ce qu’un Call-to-action ou CTA ? Trop souvent, nous ne l’examinons pas plus en profondeur et le considérons comme une occasion perdue d’attirer davantage les lecteurs ou les auditeurs dans votre marque.

Qu’est-ce que l’appel à l’action ? C'est généralement la partie de l'écran qui encourage le lecteur à cliquer pour l'entraîner plus loin dans le processus d'achat/de branding. Parfois, il peut s'agir d'une image, parfois simplement d'un bouton ou simplement d'un champ contenant des informations appelant à l'action. À propos, Call-to-action en traduction signifie un appel à l'action. En fait, non seulement les sites Web proposent des appels à l’action, mais tout type de contenu peut être considéré comme un appel à l’action.

Par exemple, les webinaires doivent comporter des appels à l'action, les infographies doivent avoir un CTA efficace et, bien sûr, les présentations doivent en contenir. Par exemple, lors de certaines présentations, ils offrent un cadeau gratuit pour échanger des cartes de visite, ce qui fonctionne à merveille. Amener quelqu'un à télécharger, à s'inscrire ou même à cliquer sur un article pertinent est déjà considéré comme un bon CTA.

Est-ce que tout doit vraiment avoir un appel à l'action ? Vous ne trouverez pas beaucoup de contenu doté de son propre Call-to-action et en général il n’y en a pas beaucoup sur le réseau. Tout ce que vous faites ne devrait pas avoir pour objectif de vendre, une partie de votre contenu doit néanmoins renforcer la confiance et l'autorité auprès des prospects et des clients. Toujours vendre est peut-être le mantra de nombreuses sociétés de vente et de marketing, mais c'est l'accent mis sur les ventes qui peut décourager de nombreux utilisateurs de se convertir. La règle principale est de toujours avoir un Call-to-action lorsque votre objectif est de motiver le visiteur à aller plus loin dans son implication dans votre produit.

Comment créer des appels à l’action efficaces ?

Il existe des méthodes éprouvées pour utiliser efficacement les stratégies CTA. En voici quelques-uns.

Gardez toujours l’appel à l’action en vue. L'emplacement du CTA doit être proche ou aligné avec l'endroit où le lecteur se concentre. Le plus souvent, les appels à l'action sont insérés sur le côté droit du contenu, de sorte que le mouvement naturel des yeux de l'utilisateur autour de la page l'accroche. Certains sites créent des CTA flottants afin que lorsque l'utilisateur fait défiler, le CTA lui-même reste avec eux.

Gardez votre appel à l’action simple. Qu'il s'agisse d'une image ou d'une phrase dans votre discours, assurez-vous que les détails sont expliqués de manière très claire. Plus vous expliquez l'essence de manière simple et claire à l'utilisateur, plus le nombre de ceux qui cliquent ou appellent se convertiront sur votre CTA.

Soyez toujours clair lorsque vous rédigez votre CTA. Utilisez des mots tels que : appeler, télécharger, cliquer, s'inscrire, démarrer, etc. Ces mots doivent être utilisés. S'il s'agit d'une image sous forme de CTA, vous les verrez souvent sur des boutons comme ceux-ci. Les utilisateurs du réseau sont habitués à cliquer sur des boutons et ces images sont automatiquement associées à l'action à effectuer.

Ajoutez un sentiment d’urgence. Le temps presse-t-il ? L'offre expire-t-elle ? Reste-t-il des places limitées ? Tout ce qui contribue à convaincre le lecteur d’agir maintenant plutôt que plus tard améliorera vos taux de conversion. Ajouter un sentiment d’urgence est un élément essentiel de chaque CTA.

Concentrez-vous sur les avantages plutôt que sur la fonctionnalité. De nombreuses entreprises sont fières de ce qu’elles font pour apporter de la valeur à leurs clients. Ce n’est pas ce qui fait vendre, c’est le bénéfice qui incite le client à acheter. Offrez-vous la possibilité de simplifier les choses ? Obtenir des résultats instantanés ? Bénéficier de conseils gratuits ?

Planifiez votre chemin vers les conversions. Par exemple, pour les articles de blog, le chemin est souvent simple. Lire -> voir le CTA -> inscrivez-vous sur la page de destination -> Conversion. Votre chemin vers la conversion peut être différent, mais visualiser et planifier le chemin qu'un utilisateur doit suivre dans votre contenu vous aidera à mieux visualiser la situation et à augmenter les conversions grâce à une stratégie d'appel à l'action.

Testez vos CTA. Développez plusieurs versions de vos CTA pour identifier celle qui apporte les meilleurs résultats commerciaux. Une seule version ne suffit pas, de nombreuses entreprises ne passent pas de temps à développer des designs alternatifs, des slogans, en utilisant différentes couleurs et tailles. Parfois, la simplicité est idéale, et parfois un gif animé flashy peut être la meilleure solution.

Testez vos propositions. Essai gratuit, livraison gratuite, satisfaction 100% garantie, remise, etc. Vous devriez toujours essayer plusieurs offres attrayantes différentes qui augmenteront vos conversions. Assurez-vous de pouvoir mesurer la pleine efficacité de chaque offre, en tenant compte de la fidélisation des clients et des conversions ultérieures. De nombreuses entreprises offrent une remise incroyable dès les premières pages, pour ensuite perdre l'acheteur à la fin du parcours d'achat. Les spécialistes du marketing inexpérimentés s'appuient souvent sur cette approche, estimant qu'au moins un certain pourcentage d'acheteurs seront convertis en achats. Cependant, cette opinion est fausse ; non seulement le site perdra un acheteur au stade de la conversion. Il ne reviendra plus jamais vers elle. Cela tue tout simplement la réputation et la confiance dans la ressource.

Nous vous présentons une infographie visuelle sur ce qu'il faut faire et ne pas faire afin de créer efficacement des Call to action.

Toute personne impliquée dans la vente en ligne connaît le terme « Call-to-action », qui signifie « appel à l'action ». Chaque page d'un site Web qui vend quelque chose devrait avoir cet élément. Vous apprendrez dans cet article comment le créer correctement, où le placer pour qu'il fonctionne efficacement.

Qu'est-ce qu'un CTA ou un appel à l'action ?

Un CTA est un élément graphique qui motive et incite les visiteurs d'un site à réaliser une action précise, par exemple : acheter, télécharger, s'abonner à une newsletter, etc. Le CTA vous indique exactement ce que le visiteur doit faire et ce que le développeur de cette page attend de lui. Le bouton peut « proposer » de passer une commande pour un service ou un produit, de s'inscrire ou de recevoir des analyses gratuites : par exemple, avec de l'aide (sur les sites de services marketing), etc.

Une action ciblée augmente la conversion, augmente les ventes et facilite la promotion des produits.

Les éléments du site, sous la forme d'un bouton CTA, doivent être visibles sur la page, se démarquer pour qu'une personne y tourne immédiatement son attention.

Les éléments CTA les plus populaires sont les boutons comportant un texte expliquant ce qui se passera après avoir cliqué dessus. Par exemple : « S'inscrire », « Télécharger », « Bénéficier d'une réduction » ou le bouton « Acheter », etc. L'action d'appel peut rediriger le client vers une autre page où il peut obtenir des informations plus détaillées. Ensuite, l'inscription « En savoir plus », « Se renseigner », etc. est appropriée.

Comment rédiger correctement un CTA

C’est l’appel à l’action qui motive le lead à devenir un véritable acheteur. Si l'acheteur n'a pas osé passer commande et a quitté le site, il deviendra un outil de retour (10 fois moins cher que d'attirer de nouveaux leads).

Comment formuler correctement un appel CTA, où le placer et comment tester son efficacité ?

Idéalement, le site contiendra plusieurs appels qui guideront l'acheteur séquentiellement depuis le choix jusqu'à l'achat d'un produit.

Tout d’abord, vous devez décider sur quels objets vous effectuerez une incitation à l’action.

Il peut s'agir de biens ou de produits, de biens exclusifs ou de services uniques.

Vous pouvez également étudier le comportement des utilisateurs, où ils vont après avoir visité votre page et leur proposer ces informations dans le CTA. Ces statistiques peuvent être consultées dans Google Analytics. Vous pouvez placer un bouton CTA proposant un abonnement aux actualités du site ou des informations sur les réductions sur la page où vous remerciez le client d'avoir effectué un achat.

Vous pouvez également rappeler les remises et les promotions, par exemple en utilisant .

Il existe certaines règles sur la façon de développer un CTA efficace :

L'appel doit être clair et concis, ne faire appel qu'à une seule action (acheter, télécharger, commander, etc.) ;
L'appel doit être différent du reste du contenu de la page et mis en évidence par un bouton lumineux, un texte, un lien ou une bannière.
Le CTA doit être dans le champ de vision du visiteur. Il n’est donc pas recommandé de le placer en bas ou à droite ;
L'appel doit être pertinent par rapport à l'étape d'achat de l'utilisateur.

Il est important de rédiger correctement votre texte CTA. Comment faire cela ?

Le texte du CTA doit indiquer la valeur du produit et expliquer pourquoi l'utilisateur en a besoin ;
Le texte doit être « urgent », c'est-à-dire indiquer la saisonnalité et la période d'expiration de l'offre. Par exemple : « Seulement aujourd'hui », « Seulement jusqu'à fin décembre », etc.
Dans le texte, écrivez combien de personnes ont déjà utilisé vos services et incluez les avis de clients satisfaits ;
Remplacez certains appels par d'autres. Par exemple : un utilisateur s'est inscrit. Envoyez un e-mail vous remerciant de votre inscription et de la possibilité de télécharger quelque chose gratuitement ;
Utilisez des actualités, des photographies de célébrités, des chroniques de potins et donnez tout cela comme exemple dans le CTA (il est plus facile de vendre des jeans dans lesquels Angelina Jolie marche dans la rue sur la photo) ;
Écrivez le texte avec respect, ne demandez ni ne commandez. Vous donnez à une personne ce dont elle a besoin.

Où placer les appels à l’action ?

Vous devez placer au moins trois CTA sur la page principale de votre site Web. C'est également une bonne idée de placer un CTA sur la page de destination où vous incitez directement l'utilisateur à effectuer un achat, à s'inscrire, etc. De cette page, vous devez supprimer tout ce qui peut distraire le client (bannières, liens, avis). Les CTA doivent être pertinents par rapport au contenu de la page elle-même. S'il s'agit d'une page d'un produit en vente, alors il est préférable de placer l'appel « Testez le produit gratuitement » dessus, et non sur la page principale.

Vous devez penser aux CTA sur toutes les pages afin qu'ils indiquent à l'utilisateur où aller ensuite sur votre site et ce qu'il peut obtenir. C'est une sorte de guide du site : pour qu'une personne s'attarde sur le site, et ne le quitte pas, le ferme et ne s'en souvienne plus jamais.

Si un utilisateur s'est abonné à votre newsletter, a téléchargé des instructions ou s'est inscrit à un cours, son interaction avec vos CTA ne devrait pas s'arrêter là. Placez des CTA dans tous les documents que vous envoyez à l'utilisateur. Votre activité est la clé du succès.

Règles de base

Pour qu'un bouton CTA attire l'attention, vous devez respecter certaines règles de placement :

Le CTA doit s'intégrer dans la conception globale du site, tout en se démarquant efficacement des autres éléments ;
Le bouton doit ressembler à un bouton et être familier à l'utilisateur ;
Ce devrait être la taille optimale. Ne prenez pas une demi-page, mais ne soyez pas invisible non plus ;
La couleur du CTA doit être vive, mais en même temps correspondre à la palette de couleurs du site ;
Utilisez des panneaux, des flèches qui pointent vers le CTA ;
Utilisez un arrière-plan contrasté à la fois pour le bouton lui-même et pour le texte qui y figure ;
La police du texte doit être la même que celle déjà présente sur la page. Vous pouvez le mettre en gras ou en accentuation ;
N'utilisez pas plus de 4 couleurs lors de la conception de votre CTA.

Peu d'utilisateurs feront défiler la page vers le bas, le bouton CTA doit donc être placé sur le premier écran, sinon vous réduirez la conversion.

Regardez quel pixel en haut se trouve votre bouton et comparez-le avec la hauteur des écrans des utilisateurs selon Google Analytics. Si le bord inférieur du bouton se situe au 900ème pixel, alors un tiers des utilisateurs le reçoivent sur le deuxième écran. Vous devez comprendre que plus le bouton CTA est haut, mieux c'est. Étant donné que la plupart des gens sont droitiers, le bouton doit être légèrement à droite du centre de l’écran.

Règles pour un CTA efficace (+ exemples)

Facteurs qui influencent l’efficacité du CTA :

L'emplacement du bouton sur la page, comme indiqué ci-dessus.
La taille du bouton joue un grand rôle. Il ne doit pas être trop petit ou trop grand et ne doit pas occuper la moitié de l’écran. Il faut qu'il soit immédiatement clair qu'il s'agit du principal de la page. Le bouton doit être informatif, grand, contrasté, contenir les informations nécessaires à l'utilisateur et comporter un appel à l'action clair.
Le CTA doit se démarquer de l’arrière-plan de la page, mais ne pas sortir de la conception globale. Bien que parfois, la créativité du design et du bouton lui-même crée une impression favorable, comme sur ce site.
Le texte du bouton doit être spécifique, indiquer avec précision l'action et contenir un appel.
La forme du bouton joue également un rôle important. Il doit être familier à l'utilisateur. Le plus souvent, le bouton a une forme rectangulaire, mais parfois les concepteurs le rendent rond, ovale ou oblong. Dans ce cas, le bouton CTA doit clairement s'adapter à la conception de la page.
Le bouton tactile fonctionne plus efficacement. Vous devez le rendre convexe, à cause de l'ombre.
En génération de leads, il est préférable de répéter le bouton CTA pour que la personne n'ait pas à remonter la page. Cela ne fait jamais de mal de rappeler une fois de plus à l'utilisateur pourquoi il se trouve sur cette page.
Le bouton doit être beau, lumineux et de forme correcte. Ces boutons sont cliqués plus souvent. N'oubliez pas qu'il vaut mieux confier cela à un concepteur expérimenté plutôt qu'à des programmeurs. Vous trouverez ci-dessous un exemple frappant de boutons infructueux :
La technique de changement de bouton augmente l’efficacité. Par exemple, une personne fait défiler la page et à ce moment-là, le bouton change de couleur. Cela permet d'attirer l'attention de l'utilisateur.
Si vous placez plusieurs boutons CTA sur une même page, alors il faut qu'ils diffèrent les uns des autres. Deux boutons similaires l’un à côté de l’autre réduiront leur CTR. Vous trouverez ci-dessous un bon exemple de différents boutons :

Tous ces facteurs majeurs ont un impact énorme sur les conversions, vous devez donc bien réfléchir avant de placer des boutons CTA.
Bouton CTA avec un appel « général », tel que « Télécharger », « Télécharger ». Un tel bouton ne convient pas aux pages de destination, car il peut susciter la méfiance de l'utilisateur.

Sur le site wincdemu, le bouton est lumineux et s'intègre dans la palette de couleurs du site. Ceci est acceptable pour une marque bien promue, lorsqu’aucune information ou publicité supplémentaire n’est nécessaire.
Un bouton CTA qui met l'accent sur le caractère unique et la rentabilité d'une offre, par exemple des remises.

Il y a ici un appel clair qui montre à l'utilisateur l'avantage et dit : « Pourquoi attendre ? Commencez dès maintenant !
Le bouton CTA, qui se situe en haut de la page sous la forme d'un bouton classique en trois dimensions. L'inscription sur le bouton lui-même indique des instructions spécifiques pour le téléchargement.

Principales caractéristiques du CTA

Tous les appels à l’action ont certaines caractéristiques communes.

En combinant la recherche scientifique sur la psychologie des couleurs avec certains principes de conception, vous pouvez créer un excellent bouton d'appel à l'action (CTA) pour votre site Web et augmenter considérablement les conversions. Il existe 4 outils qui vous aideront à y parvenir : le placement des boutons, la forme (et la taille), le message et la couleur.

Dans cet article, je parlerai de l’aspect couleur.

Mais commençons dans l'ordre...

Que sont les boutons d’appel à l’action ?

Imaginez que votre site Web est une chaîne d'actions que les utilisateurs doivent effectuer afin de trouver ce qu'ils sont venus chercher. Pour leur faciliter la vie, il faut absolument rendre cette chaîne la plus simple possible (c'est-à-dire convivial), dans la mesure du possible, et les guider vers la page souhaitée sans aucune intervention.

Certaines de ces actions étant plus importantes que d’autres, il faudra les mettre en évidence dans l’interface. Vous souhaitez attirer l'attention des utilisateurs en essayant de les convaincre d'agir (appel à l'action). Cela se fait le plus souvent à l'aide d'un marqueur visuel, d'éléments d'interface avec un appel à l'action. Voici quelques exemples d'actions possibles : acheter un produit, s'inscrire à une newsletter, créer un nouveau compte, déposer une candidature, télécharger la dernière version d'un logiciel,...

Mais pourquoi les couleurs ont-elles une telle signification ?

Psychologie de la couleur

Chaque couleur évoque des sentiments ou des humeurs différentes chez les gens, et donc des réactions différentes. Les médecins et les infirmières portent du blanc, signe de stérilité. Les gymnases sont souvent peints en bleu car des études ont montré que les gymnases bleus permettent aux haltérophiles de soulever plus de poids.

Comme vous pouvez le constater, les couleurs sont des outils très puissants pour encourager ou, à l’inverse, bloquer certains sentiments. Autrement dit, vous pouvez, dans une certaine mesure, guider les utilisateurs à travers votre interface, leur permettant de prendre les décisions que vous souhaitez qu'ils prennent, en utilisant les bonnes couleurs et combinaisons de couleurs. Mais ne commencez pas encore à collectionner des combinaisons de couleurs. Il y a encore une ou deux choses que vous devez savoir.

Bien que la perception des couleurs soit subjective, certains effets de couleur ont une signification universelle. Par exemple : le bleu est froid et le rouge est chaud.

Deuxièmement, la perception des couleurs repose sur des caractéristiques culturelles. Prenons comme exemple le noir (qui n’est pas une couleur scientifiquement). Bien que le noir soit associé à la mort et au deuil dans de nombreuses cultures, dans l’Égypte ancienne, il symbolisait également la vie et la renaissance.

Susan Weinshenk ( Susan Weinschenk), Ph.D. et auteur du livre « Intuitive Web Design : What Makes People Click », a écrit un article intéressant à ce sujet. N'oubliez pas de consulter la roue chromatique McCandless, que vous pouvez télécharger en bas de la page.

Kissmetrics a réalisé une excellente infographie sur la façon dont les couleurs influencent les achats.

Un peu de théorie des couleurs

Comme je l'explique ci-dessous, il est préférable d'utiliser un bon contraste lors de la conception des boutons importants. Quand je parle de couleurs contrastées, je parle en réalité de couleurs complémentaires. Les couleurs complémentaires sont situées les unes en face des autres sur la roue chromatique (voir image ci-dessous). Si vous les placez côte à côte, ils semblent plus brillants.

Un autre exemple d’utilisation de couleurs complémentaires est celui des vêtements que portent les médecins lorsqu’ils travaillent en salle d’opération. Dans la plupart des cas, il est vert ou bleu. Ces deux couleurs permettent aux médecins de mieux percevoir les objets rouges, à savoir le sang et les entrailles du patient, de les voir plus clairement et de remarquer les moindres nuances du corps humain. Le rouge et le vert sont des couleurs complémentaires.

Alors quelle couleur dois-je choisir pour mon bouton ?

Comme je l'ai noté au début de l'article, un bouton CTA est un ensemble de 4 éléments : l'emplacement, la forme, le message et la couleur. Si ces 4 aspects correspondent bien les uns aux autres, vous disposez d’un excellent bouton d’appel à l’action.

Dans cette optique, il convient également de garder à l’esprit quelques principes et directives de conception de base. Si vous souhaitez qu'un élément de design se démarque, vous pouvez le colorer d'une couleur complémentaire à l'arrière-plan (pensez à l'exemple que j'ai donné dans The Resumator).

Un petit conseil : pour les gros boutons, utilisez une couleur moins flashy (par rapport aux éléments environnants et au fond), et pour les petits boutons, il faut au contraire des couleurs plus vives. Mais quelle que soit la couleur que vous choisissez, assurez-vous que le bouton que vous concevez sera visible sans interférer avec le design principal.

Bien que cet article soit basé sur des recherches scientifiques sur la psychologie des couleurs et sur certains principes de conception, vous Toujours devriez tester vous-même vos boutons d’appel à l’action pour voir ce qui fonctionne le mieux pour votre site. Vous pouvez utiliser des tests A/B ou multivariés, ou simplement suivre ces

Vous recherchez un studio web qui vous assurera une implémentation de qualité ? Découvrez les résultats de l'évaluation de la créativité du studio Web.

La place occupée dans le classement de créativité des studios web dépend du nombre de victoires et du statut des compétitions. Vous aimez plusieurs équipes à la fois ? En cliquant sur le bouton vert, vous pouvez les inviter à participer à votre appel d'offres en seulement deux clics.

Aujourd’hui, nous parlerons des boutons « Call to action » puis du CTA. Les éléments CTA, comme leur nom l'indique, encouragent l'utilisateur à effectuer certaines actions sur le site. Cependant, les designers les traitent souvent avec dédain. Bien que comprendre les principes en la matière augmentera l'efficacité du produit fini. À partir de ce matériel, vous apprendrez comment créer correctement un bouton CTA.

Il est important d'avoir au moins une compréhension de base de la façon dont la couleur, la taille, le contenu et d'autres facteurs affectent la conversion des boutons CTA. Les principes eux-mêmes sont assez simples, mais ils doivent être appliqués dès la phase de planification de la conception du site.

Objectif des boutons d’appel à l’action

Les boutons CTA peuvent avoir différentes fonctions. Après tout, un « appel à l’action » peut signifier n’importe quoi. Mais le principe principal des boutons est de forcer l’utilisateur qui a visité votre site à entreprendre une action. Par exemple, ajoutez un produit à votre panier, téléchargez quelque chose, fournissez des informations, etc.

Étant donné que l'appel peut concerner n'importe quelle action, lors de la création d'un bouton, vous devez prendre en compte à la fois l'action elle-même, ainsi que le type de site et le public cible.

Types de boutons d'appel à l'action

Il existe différents types de boutons CTA. Vous trouverez ci-dessous les types les plus courants, classés selon le type d'action qu'ils encouragent l'utilisateur à entreprendre.

1. Ajouter au panier

Les boutiques en ligne utilisent généralement une gamme de boutons CTA, mais les plus populaires sont les boutons « Ajouter au panier ». Ces boutons sont généralement placés sur les pages produits et encouragent l'utilisateur à acheter un produit particulier. Ils sont généralement conçus avec un texte court avec un appel à « Acheter » ou « Ajouter au panier » et une icône représentant une carte bancaire ou un panier.

2. Télécharger

Les boutons « Télécharger » s'apparentent au type précédent dans le sens où ils proposent à l'utilisateur de prendre possession de l'élément proposé, c'est-à-dire de le télécharger. Dans le cas de ce type de bouton, les concepteurs préfèrent également donner plus d’informations à l’utilisateur en ajoutant par exemple la version du produit et la taille du fichier.

3. Version d'essai

Certains sites tentent d'intéresser le client en lui proposant une version d'essai du produit. Il peut s'agir d'un téléchargement gratuit ou d'un compte gratuit, selon le type de service ou de produit proposé. Certains concepteurs tentent d'être concis dans la conception des boutons CTA de ce type, tandis que d'autres, au contraire, fournissent généreusement au bouton des informations supplémentaires.

4. En savoir plus

Les boutons « En savoir plus » sont souvent situés à la fin du bloc d’informations teaser. Il s'agit généralement de boutons simples, mais suffisamment grands pour attirer l'attention de l'utilisateur.

5. Inscription

Les boutons d'inscription se trouvent le plus souvent en deux versions. Dans le premier cas, le bouton mène au formulaire d'inscription, dans le second il fait office de bouton « Ajouter au panier », proposant de payer le compte et de l'utiliser ultérieurement.

Il existe d'autres types de boutons CTA, mais la plupart d'entre eux sont similaires à ceux répertoriés ci-dessus. Et les principes qui s’appliquent aux boutons décrits ci-dessus s’appliqueront très probablement à la plupart des autres.

Travailler avec un espace négatif

Vous souhaitez probablement que les boutons CTA de votre site se démarquent du reste du contenu et attirent l'attention de l'utilisateur. Pour ce faire, utilisez un espace négatif autour des boutons. Créez de l'air entre le contenu et les boutons CTA. Dans certains cas (comme avec les boutons « Ajouter au panier »), cette règle peut être ignorée, mais le plus souvent, elle ajoutera de l'efficacité à votre conception.

Il est important de ne pas oublier l'équilibre. Vous devez calculer l'espace négatif pour qu'il soit proportionnel à la taille des boutons. Nous voulons que les boutons et le contenu ressemblent à une seule composition, même si nous les séparons les uns des autres. Il faudra donc parfois modifier la distance.

Assurez-vous qu'il y a suffisamment d'espace autour du bouton et qu'il n'y a pas de place pour l'encombrement dans la conception.
Essayez d'utiliser la règle des tiers ou le nombre d'or pour déterminer la taille de l'espace négatif.
Assurez-vous que l'espace négatif permette au bouton de se démarquer du reste du contenu et d'en être séparé.

Taille et couleur

La taille du bouton CTA est très importante. Un bouton trop grand éclipsera le reste du contenu ; un bouton trop petit se perdra dans le contenu environnant. Nous avons besoin que notre bouton se démarque de l'arrière-plan des autres éléments, mais en même temps ne les supprime pas visuellement.

La couleur doit être utilisée en conjonction avec la taille. Pour les gros boutons, choisissez une couleur moins différente de la couleur principale de votre design, mais elle doit quand même être différente de l’arrière-plan. Pour les boutons plus petits, utilisez des couleurs vives qui contrastent avec la couleur principale. Mais assurez-vous que dans tous les cas, la couleur du bouton s'intègre dans la conception globale et est combinée avec d'autres éléments.

Idéalement, les boutons CTA devraient être les plus grands boutons de la page.
Utilisez des couleurs contrastées pour mettre en valeur le petit bouton.
Utilisez des couleurs moins contrastées avec la couleur principale pour atténuer visuellement le gros bouton.
Les boutons CTA doivent attirer l’attention, mais ne pas surcharger le design.

Texte

La formulation exacte que vous utilisez dans le texte de votre bouton peut faire une grande différence. Comparez l'appel « Acheter maintenant » à l'appel « Ajouter au panier ». La première option semble beaucoup plus urgente, voire intrusive. La taille du texte est également importante. Par exemple, si nécessaire, le texte « Essayez le service gratuitement » peut être remplacé par la version plus courte « Version d'essai ».

Le texte que vous utilisez pour concevoir les boutons doit être aussi simple et clair que possible. Il faut que l'utilisateur comprenne au premier coup d'œil ce qui l'attend après avoir appuyé sur le bouton. S’il a des doutes dus à une ambiguïté, vous risquez très bien de perdre des conversions.

N'oubliez pas la taille du texte. La police doit être grande et visible, mais bien sûr être combinée avec la taille du bouton lui-même. Assurez-vous que le texte est suffisamment contrasté et facile à lire.

Utilisez un langage simple et compréhensible.
Utilisez une police grande et visible.
Assurez-vous que le texte appelle vraiment à l'action.

Créer une urgence

Nous souhaitons que les visiteurs de notre site effectuent les actions souhaitées le plus rapidement possible. Et même si personne ne trompera un visiteur, plus vous lui donnez l’occasion de réfléchir et de comparer, plus il est susceptible d’obtenir une réponse négative.

Notre objectif est d'impressionner l'utilisateur sur le fait qu'il doit agir maintenant. Vous devez les encourager à agir immédiatement, spontanément. Et bien que tous les boutons CTA ne fonctionnent pas de cette façon (surtout s'il s'agit de l'achat d'un produit coûteux), les actions bon marché ou gratuites devraient idéalement être effectuées par l'utilisateur sans hésitation.

Encouragez l’utilisateur à agir immédiatement
Ne donnez aucune raison à l’utilisateur d’y réfléchir à deux fois.
Même si l’effet d’urgence est important, ne trompez jamais l’utilisateur.

Informations Complémentaires

Si nécessaire, donnez à l'utilisateur des informations supplémentaires sur ce qu'il recevra en cliquant sur le bouton CTA. Le plus souvent, il s'agit des boutons « Essai » ou « Télécharger ». Habituellement, dans ces cas, des informations sont publiées sur la durée de validité de la version d'essai, le poids du fichier que vous êtes sur le point de télécharger ou la version du programme que vous allez télécharger.

Lorsque vous placez des informations supplémentaires sur un bouton, assurez-vous que l'appel à l'action lui-même reste au centre de l'attention. Agrandissez le texte de l'appel et réduisez les informations supplémentaires.

Ajoutez aux boutons uniquement les informations qui seront clairement utiles à l'utilisateur.
Les informations supplémentaires ne sont appropriées que pour certains types de boutons CTA (par exemple, « Essai » et « Télécharger »).
Assurez-vous que l'appel à l'action lui-même est toujours le texte le plus visible sur votre bouton.

Priorité

Il est nécessaire de prioriser les boutons lorsqu’il y en a plusieurs sur la page. Vous pouvez souligner l’importance d’un élément de différentes manières, mais le plus souvent, cela se fait en utilisant la couleur et la taille.

Utilisez une couleur qui contraste avec la couleur principale du motif pour souligner l'importance du bouton. Utilisez des couleurs moins contrastées pour réduire visuellement l’importance du bouton. Même histoire avec la taille. Mettez en valeur l'importance du bouton en l'agrandissant et en le réduisant pour réduire sa priorité.

Icônes et images

Concevoir des boutons CTA avec des icônes peut également contribuer à augmenter la conversion. Un exemple serait l'icône du panier sur le bouton « Acheter » ou la flèche sur le bouton « Télécharger ». Vous pouvez également utiliser des icônes et des images uniques, mais assurez-vous qu'elles traduisent avec précision l'objectif du bouton et n'induisent pas l'utilisateur en erreur.

Assurez-vous que l'image placée sur le bouton aide à comprendre son objectif et ne crée pas de confusion pour l'utilisateur.
Des icônes facilement reconnaissables peuvent transmettre instantanément à l'utilisateur la signification du bouton.
N'ayez pas peur d'utiliser des icônes moins populaires, mais assurez-vous que leur signification est claire.

Exemples

Vous trouverez ci-dessous des exemples de conceptions réussies de boutons CTA. Et même si certains d’entre eux ne sont pas conçus selon tous les principes mentionnés ci-dessus, la plupart des règles sont néanmoins respectées et les boutons fonctionnent efficacement.

Registre
L'utilisation de couleurs différentes pour les boutons Télécharger et Acheter les sépare les uns des autres et souligne l'importance du bouton Acheter.