Conception des boutons d’appel à l’action CTA

Qu’est-ce que la conception des boutons d’appel à l’action

La conception des boutons d’appel à l’action (CTA) consiste à concevoir vos boutons CTA d’une manière attrayante, perceptible et convaincante. Vous devez privilégier la clarté au style. Cependant, il est également très important que vos boutons CTA se démarquent sur une page Web.

cta

Facteurs de conception à considérer

Vous devez prendre en compte plusieurs facteurs lors de la conception de vos boutons CTA:

  • Couleur
  • Taille
  • Forme
  • Style
  • Placement

Le bouton CTA est ce qui mènera les utilisateurs plus loin dans votre entonnoir de conversion pour finalement devenir des conversions; il est donc très important que les boutons se démarquent et soient suffisamment attrayants pour inciter les utilisateurs à cliquer dessus.

Pourquoi ces éléments de conception sont-ils importants pour la conception de mon bouton CTA?
Chaque élément de conception répertorié ci-dessus peut être testé pour découvrir quelle variation d’éléments produit le taux de conversion le plus élevé. Voici quelques conseils pour émettre des hypothèses et tester ces différents éléments de conception.

Couleur

La couleur de votre bouton CTA aidera à le distinguer du reste des éléments de votre page. Essayez d’utiliser une couleur qui contraste les autres couleurs dominantes sur une page. Si le bouton CTA a une couleur similaire à celle de nombreux autres éléments de la page, il ne se démarquera pas et les utilisateurs pourraient ne pas se rendre compte de son importance. Le CTA doit être perceptible même lorsque les utilisateurs survolent.

Assurez-vous qu’il est en contraste direct avec l’arrière-plan ou le premier plan de la page Web. Si vous placez le CTA au premier plan d’une image, choisissez des images ou des couleurs CTA qui se démarquent des autres et ne se fondent pas ensemble. N’obligez pas les utilisateurs à travailler dur pour trouver le CTA; faites-le se démarquer autant que possible tout en conservant l’intégrité attrayante de la page Web.

Si vous utilisez deux ou plusieurs CTA sur une page, donnez-leur une hiérarchie distincte en différenciant leurs couleurs et / ou leur taille.

A / B testez différentes variations de couleurs contrastées pour voir laquelle donne les taux de conversion les plus élevés. De nombreux sites Web disent que certaines couleurs fonctionnent le mieux, mais tout dépend de la façon dont cette couleur apparaît dans le contenu global des autres éléments de la page.

Taille

Avec les boutons CTA, la taille compte. Conservez la taille du bouton par rapport aux autres éléments de la page. Cela ne signifie pas qu’il doit être de la même taille que tous les autres liens de la page, mais il devrait se démarquer de manière quelque peu disproportionnée. Les utilisateurs doivent pouvoir le trouver en un coup d’œil grâce à la couleur et à la taille, alors assurez-vous qu’il est suffisamment grand pour être vu même par les utilisateurs qui ne font que parcourir la page.

Lors de la conception des boutons d’appel à l’action jouez avec différentes tailles. Essayez plusieurs tailles lorsque vous effectuez des tests fractionnés sur votre site Web. de cette façon vous trouvez les variations de taille les plus performantes en termes de clics ou de conversions totales.

Forme

La forme de votre bouton CTA peut également avoir des résultats différents en termes de conversions. Que les bords carrés ou circulaires soient plus populaires en termes de clics ou de conversions est quelque chose que vous devriez tester. Voyez d’abord ce qui semble le plus attrayant visuellement et testez d’autres variantes pour voir ce qui fonctionne le mieux.

Style

Avec style, les polices doivent toujours être lisibles et faciles à comprendre. Vous pouvez également tester le type de casse de la copie, que vous souhaitiez utiliser « TOUTES LES LETTRES MAJUSCULES », « Mots de casse de phrase » ou « Mots de casse normale ». Essayez de rester cohérent avec les autres éléments de copie de votre site Web. Si votre copie est longue et que vous vous inquiétez de l’espace, la casse normale ou de phrase peut fonctionner mieux.

Placement

L’un des éléments les plus importants des boutons CTA est peut-être leur emplacement. Un bon conseil est de les placer avant le pli. Cela a conduit de nombreux sites Web à les placer dans l’image du héros couplée au titre principal. Lorsque vous utilisez cette pratique, assurez-vous que les 3 composants (image du héros, titre et bouton CTA) sont visuellement convaincants et se complètent mutuellement. Cela signifie que le titre et l’image doivent indiquer le résultat du clic sur le CTA.

Si vous utilisez une page Web plus longue qui oblige les utilisateurs à faire défiler vers le bas, placez le CTA plusieurs fois sur toute la longueur de la page. Faites preuve de discernement ici pour ne pas surpeupler la page avec des boutons CTA; ils devraient venir souvent, mais pas trop pour distraire le lecteur s’il essaie de voir d’autres contenus.

Une autre bonne pratique de l’espacement des boutons CTA consiste à placer beaucoup d’espace blanc ou mort autour de celui-ci. De cette façon, le bouton sera autonome et sera facilement visible par les visiteurs sur une page.

Les boutons CTA doivent toujours être placés là où les utilisateurs sont le plus susceptibles de les voir. S’ils sont placés sous le pli, utilisez des cartes thermiques de défilement pour déterminer la distance parcourue par les utilisateurs dans la page et modifiez son emplacement s’ils n’accèdent pas assez souvent à cette section.

À emporter

A / B Testez chaque bouton CTA: Trouvez la meilleure variation parmi celles-ci qui génère le plus de clics et de conversions.

Contraste de couleur: Assurez-vous que les couleurs des boutons contrastent avec les autres couleurs prédominantes sur la page Web afin qu’elle se démarque.

Utilisez la couleur et la taille: Distinguez une hiérarchie s’il y a plus d’un bouton CTA sur une page.

Taille: Assurez-vous que les boutons sont suffisamment grands pour être facilement visibles lorsque les utilisateurs numérisent une page

Clarté: Assurez-vous qu’ils sont facilement lisibles

Emplacement: Placez-les dans des endroits où les utilisateurs sont sûrs de les voir

Que se passera-t-il ensuite: Si vous les utilisez dans des images de bannière ou de héros, assurez-vous que la copie du bouton, le titre et l’image pointent tous vers l’action que le clic sur le bouton effectuera.

Utilisez des outils d’analyse Web: Identifiez les problèmes que les utilisateurs peuvent rencontrer pour distinguer vos boutons CTA avec les outils d’analyse CRO. Formulez des hypothèses sur la base de ces observations et testez les variations souvent et minutieusement.

Lire aussi: