Après des mois de réflexion, un business plan millimétré et une communication sur-mesure, votre produit ou service est prêt à être commercialisé.
Votre homepage est le reflet de votre marque. Le contenu des landing pages qui hébergeront vos offres a été pensé jusque dans les moindre détails.
Mais avez-vous songé à vos Call To Action ?
Ces “boutons d’incitation à l’action” ou CTA ont en effet la lourde tâche de transformer vos visiteurs en clients potentiels.
Leur design, leur emplacement et le message qu’ils véhiculent ne relèvent donc pas du hasard et doivent être calibrés pour répondre aux usages et intentions de l’utilisateur au bon moment.
Dans ce guide, nous allons revenir sur la définition pure de ce qu’est un CTA ainsi que son rapport essentiel avec “l’affordance”.
Plus encore, nous allons vous donner les clés du Call to Action parfait pour booster leur taux de clics et donc vos conversions.
Qu’est-ce qu’un Call to Action ou CTA : définition
Un Call to Action (CTA), aussi appelé bouton d’appel à l’action, est un élément cliquable dont l’objectif est d’inciter l’internaute à réaliser une action.
Généralement, ce bouton renvoie le visiteur vers une page sur laquelle il pourra acheter un produit ou souscrire à un service.
Le Call to Action se situe à la seconde étape de la stratégie d’Inbound Marketing et précède le moment décisif de la vente.
Les étapes de la conversion – Crédit photo : HubSpot
Son objectif premier est donc la conversion ou transformation : celle de vos visiteurs en leads.
Déployer des boutons d’appel à l’action efficaces est ainsi crucial pour la réussite de votre site Internet.
Protéiforme, le CTA peut se présenter comme un bouton mais également un bandeau ou une bannière pourvu d’une image ou bien d’un simple lien texte.
Il doit permettre à l’internaute d’être redirigé vers une page d’atterrissage (landing page) ou une fenêtre pop-up sur laquelle il pourra par exemple :
S’inscrire à une plateforme,
Télécharger un livre blanc,
Passer une commande,
S’abonner à une newsletter,
Réaliser une demande de démo
Dès lors, il est primordial que la landing page affiche une parfaite cohérence avec le bouton d’appel à l’action et le message qu’il véhicule afin de ne pas décevoir l’utilisateur.
Bouton d’incitation à l’action : et l’affordance dans tout ça ?
Vous pensiez que vos boutons d’appel à l’action ressemblaient effectivement à des boutons ?
Mais en êtes-vous certain ?
Un CTA qui fait mouche est un CTA identifiable en un clin d’oeil et dont l’utilité pour l’internaute est intelligible de façon immédiate.
Cette « capacité d’un objet à suggérer sa propre utilisation » a un nom : l’affordance.
Dérivée de l’anglais to afford (« être en mesure de faire quelque chose » et/ou « offrir »), l’affordance correspond à toutes les possibilités d’action que suggèrent les caractéristiques d’un objet.
Elle doit permettre à l’utilisateur d’identifier un CTA en un instant, notamment grâce à son design.
Un bouton à la fois différent du reste de la page et qui respecte les conventions maximise son potentiel d’identification.
Concrètement, un bouton doit tout d’abord ressembler à l’idée que l’utilisateur se fait de ce qu’est un bouton !
Peu importe le niveau de qualité du design de votre site, si les signes permettant à l’utilisateur de distinguer un élément actif d’un élément inactif sont inexistants, ce dernier jugera au mieux votre plateforme complexe à utiliser et sera, au pire, frustré et/ou déçu par son expérience.
C’est encore plus vrai sur mobile ou l’affordanceest le seul indicateur permettant de déceler des éléments actifs.
Rappelez-vous que votre smartphone ne bénéficie pas, par exemple, d’effet au survol (hover) comme le permet une souris sur un ordinateur de bureau.
La seule possibilité de s’assurer de l’interactivité d’un élément est le clic !
Boutons d’appel à l’action et Internet mobile
Comme nous venons de le voir, si l’aspect d’un CTA est un facteur déterminant de son succès sur desktop, il l’est autant et sinon plus sur mobile.
Car les Français sont adeptes de mobilité. 84% des internautes de l’Hexagone sont ainsi équipés d’un terminal mobile doté d’une connexion à Internet sur lequel ils naviguent environ 1h30 par jour.
Nul besoin de rappeler que les contextes d’usage sont, quant à eux, bien différents du bureau.
Dans le métro, dans la rue, à l’intérieur d’un magasin ou à la plage, l’utilisateur n’est pas toujours en capacité de parcourir votre site avec la même précision qu’une souris ou qu’un pavé tactile.
Une étude de Steven Hoober (chercheur et consultant en UX) menée sur 1333 personnes a d’ailleurs révélé que 49% des mobinautes utilisent leur smartphone avec une seule main (la droite dans 67% des cas).
Ce constat a donné naissance au concept de Thumb Zone et a mis en lumière l’importance de la taille de l’appareil mais également la façon de l’utiliser.
Le concept de Thumb Zone de Steven Hoober. Crédits photo : UX Matters
Par ailleurs, l’aisance d’utilisation d’un mobile varie grandement suivant les générations et les milieux socioculturels.
Rendre vos Call to Action simples d’accès est donc tout sauf cosmétique !
Comment créer un CTA efficace ?
Afin de vous aider à concevoir le Call to Action parfait, nous avons fait un petit tour du monde en demandant directement l’avis de nos experts UX basés à Paris mais aussi à New-York, Londres et Munich.
Voici leurs 5 recettes pour des boutons d’incitation à l’action redoutables.
Un CTA visible
Parce qu’il est parfois bon de revoir les bases, un bouton d’incitation à l’action efficace doit en premier lieu être visible.
Cela implique :
Qu’il soit toujours au-dessus de la ligne de flottaison, d’autant plus s’il s’agit d’un bouton de type “Ajouter au panier”,
D’utiliser des couleurs contrastant avec le design global. On oublie le ton sur ton !
De laisser suffisamment d’espaces vides autour du bouton pour accentuer son caractère interactif,
De grossir la taille et d’accentuer les couleurs du bouton principal si votre page en possède plusieurs.
Le bon sens a également toute sa place puisqu’on tâchera de positionner ses CTA là où les utilisateurs les attendent (bouton d’ajout au panier en haut à droite de l’écran par exemple).
Si vos CTA ne sont pas visibles cela expliquerait pourquoi vous ne faites pas de ventes.
Enfin, on n’hésitera pas à se référer à des conventions éprouvées en termes de design telles que :
Le bouton plein à bords carré,
Le bouton plein à bords incurvés,
Le bouton plein avec ombré,
Le bouton “fantôme”.
Dropbox a toujours adopté un design simple avec beaucoup d’espace. Même les graphiques sur leur page d’accueil sont subtils et minimalistes.
Grâce à ce design, le Call To Action bleu “Sign up for Free” se distingue de tous les autres éléments de la page.
Comme le CTA et le logo Dropbox sont de la même couleur, il est facile pour le visiteur d’interpréter le CTA “Inscrivez-vous à Dropbox”. C’est un Call To Action bien visible.
[Rapport] Digital Experience Benchmark Chaque visite utilisateur compte : data et insights
Analysez les KPIs pour booster votre croissance et la satisfaction client
Si un bouton d’appel à l’action se doit d’être visible, il a aussi l’obligation d’être identifié comme tel (cf la notion d’affordance abordée plus haut). Pour vérifier cela vous pouvez utiliser un outil de heatmap pour voir le taux de clics.
Un Call To Action identifiable :
À la forme évocatrice : un accordéon pour un menu, un cœur ou un pouce pour un like, un caddy pour un ajout au panier…
À la couleur et au design cohérents avec la charte graphique ou palette de la page,
À l’effet de hover efficace dans le cas d’un bouton sur desktop.
En voici un exemple, “Remember Everything.” Les visiteurs peuvent immédiatement comprendre ce message dès qu’ils arrivent sur cette page.
La conception du site Web d’Evernote permet aux utilisateurs de voir rapidement les avantages de l’application et de savoir comment s’inscrire pour l’utiliser.
La couleur verte des CTA principaux correspondent à leur charte graphique, ils ressortent sur la page.
Un Call To Action au message limpide
Le texte de votre bouton, s’il en est pourvu, doit également être porteur de sens.
Ainsi, on attend de ce wording :
D’être clair : le texte doit, si possible, expliquer précisément la fonction du bouton, Commander, Confirmer, Supprimer…
D’être impactant : le bouton doit si possible être porteur d’un bénéfice pour l’internaute, Téléchargez gratuitement notre guide, Profitez d’un mois gratuit…
D’être cohérent avec la page ou pop up vers laquelle il va renvoyer l’internaute,
De créer, pourquoi pas, un sentiment d’urgence en mettant l’accent sur le caractère éphémère d’une offre, sur des stocks limités…
Comme nous le montre l’Aquaspresso. Rien de tel qu’un minuteur pour donner envie à vos visiteurs de s’inscrire.
Après avoir passé un peu de temps sur la page d’accueil, les nouveaux visiteurs sont accueillis par un CTA pop-up avec une “offre limitée dans le temps”, accompagné d’un minuteur de deux minutes.
Un Call To Action accessible
Nous l’avons déjà évoqué à plusieurs reprises mais un CTA performant est un CTA facilement cliquable.
Pour cela, mettez en place un système de confirmation après le clic. Celui-ci peut être visuel ou sonore par exemple.
L’absence de confirmation (ou feedback) pourrait en effet signifier pour l’utilisateur que son action n’a pas été prise en compte, l’obligeant à réitérer inutilement.
En mettant en place un système de feedback, vous limitez les opérations non nécessaires et donc… la frustration.
Vous pouvez également rassurer le visiteur en mettant dans votre titre que l’annulation est flexible.
Voici un exemple de Netflix.
Une des craintes des utilisateurs avant de s’engager à quelque chose, c’est de ne pas pouvoir annuler leur abonnement s’ils ne sont pas satisfaits de l’offre.
Netflix est clair dés le début et réassure les visiteurs qui veulent s’engager avec “Cancel anytime”. Le fait d’être rassuré a augmenté le nombre d’inscriptions.
De plus, vous remarquerez encore une fois que la couleur rouge des CTA correspondent à la couleur du logo Netflix.
Vous avez à présent toutes les clés en main pour déployer des Call To Actions irrésistibles sur votre site web ou sur votre application.
N’oubliez pas néanmoins qu’une étude de vos cibles en amont, grâce au mindset notamment, vous permettra de connaître leurs besoins et d’affiner le design de vos boutons.
Dans tous les cas, faites preuve de modération dans l’ajout de vos CTA, sous peine de susciter davantage de rejet que d’attraction de la part de vos utilisateurs – trop de CTA tue le CTA .
Et pour terminer, testez, testez, testez !
Taille, couleur, forme, emplacement, l’A/B Testing et l’analyse de données permettent de valider vos hypothèses de façon scientifique.
Profitez-en !
Boostez vos conversions en ligne
Rendez-vous avec un expert pour découvrir toutes les solutions que vous proposent Contentsquare pour augmenter vos conversions !