5 techniques de conception pour de meilleurs boutons CTA
Lorsque nous visitons la plupart des sites Web, nous avons souvent un objectif en tête. Pour atteindre cet objectif, nous devons généralement suivre une série d'étapes et commencer par cliquer sur un bouton CTA (appel à l'action). Pensez à la dernière fois que vous vous êtes inscrit à un service ou que vous avez téléchargé une application, le processus comportait probablement une interaction avec un bouton d'appel à l'action.
Les boutons CTA sont les boutons que vous utilisez sur votre site Web pour guider les utilisateurs vers la conversion de vos objectifs. L'intérêt d'un CTA est de diriger les visiteurs de votre site vers un plan d'action souhaité. Voici quelques exemples courants de CTA:
- "Lancer un essai"
- "Téléchargez l'application / livre / guide"
- "Inscrivez-vous pour les mises à jour"
- "Obtenez une consultation"
Aujourd'hui, nous discuterons des 5 meilleures pratiques pour concevoir des boutons CTA avec les meilleurs exemples réels pour vous aider à tirer le maximum de clics de votre page de destination.
1. Bouton frappant visuellement
Votre couleur de bouton compte. En fait, si vous ne prenez qu'un seul conseil à partir de cet article, ce devrait être celui-ci: "Considérez la couleur de votre bouton CTA". En utilisant la couleur, vous pouvez faire en sorte que certains boutons se distinguent plus que d'autres en leur donnant plus de visibilité visuelle.
Utilisez des couleurs contrastantes
Les couleurs contrastées fonctionnent mieux pour les boutons CTA, en utilisant des couleurs contrastantes, il est possible de créer des boutons qui se démarquent. Vous devez sélectionner une couleur contrastante dans la palette de couleurs de la page Web, tout en restant compatible avec la conception globale. Prenons l'exemple de Firefox ci-dessous. La couleur verte du bouton CTA sur la page Firefox saute de la page et attire immédiatement l'attention de l'utilisateur.
Le bouton Firefox CTA est vert clair et ressort bien sur un fond bleu foncé
Un autre bouton CTA accrocheur se trouve sur la page d'accueil de Hipmunk. Un bouton orange vif capte l'attention de l'utilisateur et définit la prochaine action possible.
Espace négatif
La couleur est non seulement importante pour un CTA, mais également la quantité d'espace qui l'entoure. Les espaces (ou espace négatif) créent une marge de manœuvre essentielle et séparent vos boutons CTA des autres éléments de votre interface utilisateur. L’ancienne page d’accueil de Dropbox était un bon exemple d’utilisation de l’espace négatif pour créer leur pop principal. Le CTA bleu "Inscrivez-vous gratuitement" se distingue des bleus clairs du fond.
2. Texte orienté vers l'action
Écrire un texte pour votre bouton d'appel à l'action qui obligera vos visiteurs à prendre les bonnes mesures n'est pas une tâche facile. Heureusement, il y a quelques choses qui peuvent vous aider à le faire:
Commencer avec un verbe
Vous devez éviter les mots vagues et ennuyeux comme «Entrez pour plus d’informations» pour vos boutons CTA et les remplacer par des mots plus orientés vers l’action, comme «Commencez votre essai gratuit» ou «Obtenez des rabais maintenant». mais toujours des textes orientés vers l'action pour leur bouton CTA.
Commencez par un verbe comme "Start", "Get" ou "Join"
Un exemple plus intéressant peut être trouvé sur la page d'accueil de Treehouse. Le site Web du CTA on Treehouse ne dit pas simplement "Lancer un essai gratuit"; il dit "Réclamez votre essai gratuit". La différence de formulation peut sembler subtile, mais "Réclamez votre essai gratuit" semble beaucoup plus personnel.
Utilisez du texte bref et facile à comprendre pour les boutons
Veillez à indiquer exactement ce que le visiteur obtiendra s'il clique sur le CTA. Idéalement, vous souhaitez conserver le texte du bouton entre deux et cinq mots.
Ajouter une proposition de valeur
Vous avez probablement remarqué que de nombreux boutons contiennent des mots comme "gratuit" dans leur copie et que ce n'est pas une coïncidence, l'utilisation de ces mots dans la copie de bouton souligne la proposition de valeur de votre offre. Ainsi, lors de la rédaction de votre CTA, essayez de trouver un moyen d’intégrer un (ou tous les) mots persuasifs:
- Gratuit
- Prime
- Immédiatement
Permettez-moi de vous donner un exemple: Une grande crainte des utilisateurs avant de s’engager à s’inscrire à quelque chose, c’est que ce serait pénible d’annuler leur abonnement s’ils n’aimaient pas le service. Netflix soulage cette peur en utilisant la promesse "Annuler à tout moment" juste à côté du CTA "S'inscrire gratuitement pendant un mois".
Créer un sentiment d'urgence
La création d'un sentiment d'urgence dans vos boutons CTA peut générer des taux de clics impressionnants. Par exemple, vous pouvez utiliser le texte du bouton tel que "Inscrivez-vous et obtenez 25% de réduction aujourd'hui seulement!" En limitant le temps que quelqu'un doit prendre pour prendre la décision, les gens veulent réclamer leur offre pendant qu'ils le peuvent.
Texte utile
Parfois, vous pouvez envisager d'ajouter une ligne d'informations supplémentaire dans votre texte de bouton. Cette pratique est commune avec les boutons d'essai gratuits. Par exemple, un bouton d'essai gratuit peut indiquer "essai de 30 jours, pas de carte de crédit" en texte plus petit sous le bouton CTA avec le texte "Démarrer votre essai gratuit". Ce texte supplémentaire devrait faciliter le processus de prise de décision.
3. Rendre visible sans faire défiler
L'emplacement de vos boutons d'appel à l'action est aussi important que la couleur et le message. Un bouton CTA doit être situé dans un endroit facile à trouver qui suit organiquement le flux de la page Web. Vous devriez essayer de garder votre bouton CTA au-dessus du pli pour que les utilisateurs ne le manquent jamais. Idéalement, votre bouton CTA devrait figurer parmi les premières choses qu'un utilisateur voit sur la page lorsqu'il y parvient. Les informations supplémentaires doivent rester en dessous du pli, où elles restent accessibles mais ne gênent pas.
4. Grand bouton avec coins arrondis
Pensez à la façon dont le design communique les moyens financiers. Comment les utilisateurs comprennent-ils l'élément en tant que bouton? Utilisez la forme et la taille pour que l'élément ressemble à un bouton.
Faites-en assez grand
Le CTA devrait être assez grand pour voir de loin, mais pas trop pour ne pas détourner l'attention du contenu principal de la page.
Boutons utilisateur avec coins arrondis
La forme des boutons peut jouer un grand rôle. C'est un fait prouvé que les coins arrondis sont plus faciles pour les yeux. Dans le test de ContentVerve, un bouton vert arrondi faisait mieux qu'un rectangle bleu.
5. Moins c'est plus quand il s'agit de choix
N'oubliez pas que si vous voulez que vos clients agissent, vous devez les aider en supprimant tous les obstacles possibles. Lorsque les utilisateurs ont trop de choix, ils ont tendance à être confus. Donc, il vaut mieux offrir aux clients potentiels une seule option.
Si vous souhaitez toujours inclure plusieurs choix de boutons, donnez du poids à un choix par rapport aux autres pour aider les utilisateurs à canaliser les utilisateurs vers un chemin spécifique. Un bon exemple est Evernote: dès que vous atteignez la partie inférieure de la page d'accueil d'Evernote, il est clair qu'un choix préférable est "Inscrivez-vous gratuitement", tandis que le CTA pour les utilisateurs est très secondaire.
Conclusion
Pour obtenir une conception CTA efficace, vous devez prendre en compte plus que le bouton lui-même. Il est également important de penser à la couleur de fond, aux images environnantes, au texte environnant et à de nombreux autres éléments. L'équipe de Basecamp comprend l'importance de ces éléments et a conçu une mise en page parfaite pour leur page de destination. Même la microcopie qu'ils utilisent sous le bouton CTA («4 714 entreprises ont signé cette semaine!») Renforce la confiance des clients potentiels.
J'espère que les conseils mentionnés dans cet article vous aideront à créer un meilleur bouton d'appel à l'action pour votre site Web. Le dernier moment est l’importance des tests. Si vous décidez de recréer un CTA sur votre site, n'oubliez pas de tester pour voir si cela fonctionne pour votre public.