{"id":13628,"date":"2018-07-10T15:35:29","date_gmt":"2018-07-10T13:35:29","guid":{"rendered":"https:\/\/convertize.blog\/fr\/?p=13628"},"modified":"2021-08-02T18:25:18","modified_gmt":"2021-08-02T16:25:18","slug":"boutons-call-to-action","status":"publish","type":"post","link":"https:\/\/www.convertize.com\/fr\/boutons-call-to-action\/","title":{"rendered":"Call-To-Action : Comment Cr\u00e9er Des Boutons Call-To-Action qui Convertissent"},"content":{"rendered":"Temps de lecture : <\/span> 8<\/span> minutes<\/span><\/span>

Vos boutons call-to-action sont certainement l\u2019un des \u00e9l\u00e9ments les plus importants de votre site. M\u00eame si l\u2019optimisation d\u2019une page ne consiste pas simplement \u00e0 changer la couleur de vos boutons, ces derniers jouent un r\u00f4le tr\u00e8s important dans la d\u00e9cision de cliquer pour\u00a0remplir\u00a0un formulaire<\/a>, ajouter un produit au panier, s’inscrire etc. Nous allons voir qu\u2019avec ces 9 bonnes pratiques, il peut \u00eatre facile pour chaque marketer d\u2019optimiser le taux de conversion<\/a> de son site, sans avoir \u00e0 faire appel \u00e0 un webdesigner ou \u00e0 son \u00e9quipe de d\u00e9veloppeur.<\/p>\n

1. Ajoutez une fl\u00e8che \u00e0 vos boutons call-to-action<\/b><\/h2>\n

Comme son nom l\u2019indique, le bouton call-to-action est un bouton, il doit donc y ressembler ! En ins\u00e9rant une fl\u00e8che dans votre call-to-action, avant ou apr\u00e8s le texte, vous guidez vos visiteurs en donnant une id\u00e9e de mouvement, cela les incitera donc \u00e0 cliquer pour se rendre \u00e0 l’\u00e9tape suivante.<\/p>\n

L’effet visuel de la fl\u00e8che renforcera l’id\u00e9e que le bouton est cliquable. Ils s’engageront donc dans le processus sans difficult\u00e9.<\/p>\n

Le site de Skyscanner fait cela tr\u00e8s bien d\u00e8s sa Homepage. Ils ont ajout\u00e9 une simple fl\u00e8che apr\u00e8s le mot \u201cRechercher\u201d comme nous pouvons le voir sur l\u2019image ci-dessous.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Skyscanner<\/span><\/i><\/p>\n

2. Indiquez un avantage dans vos boutons call-to-action<\/b><\/h2>\n

Le texte de vos boutons call-to-action est primordial car c\u2019est ce qui va convaincre vos visiteurs de cliquer, et ce en quelques mots.<\/p>\n

Formulez donc le texte de vos boutons call-to-action sous forme d\u2019action et d\u2019avantage !<\/p>\n

Vous devez penser que cela semble \u00e9vident\u2026 Mais en indiquant \u201cJe continue\u201d ou \u201cContinuez\u201d \u00e0 la place de \u201cContinuer\u201d ou \u201cSuivant\u201d, vous communiquez avec vos visiteurs. Puis en ajoutant un avantage, vous donnez une raison \u00e0 vos visiteurs de cliquer, ce qui est donc plus convaincant.<\/p>\n

Par exemple, si vous proposez un livre blanc gratuit \u00e0 t\u00e9l\u00e9charger, plut\u00f4t que d\u2019indiquer \u201cT\u00e9l\u00e9charger\u201d, indiquez \u00e0 la place \u201cT\u00e9l\u00e9chargez gratuitement\u201d. Vos utilisateurs ayant tendance \u00e0 se focaliser sur une chose uniquement lorsqu\u2019ils prennent une d\u00e9cision,<\/a>\u00a0insistez donc sur un avantage en particulier qui deviendra l\u2019\u00e9l\u00e9ment d\u00e9clencheur pour que vos visiteurs poursuive.<\/p>\n

Le meilleur exemple est certainement Netflix qui indique clairement un avantage en indiquant \u201cProfitez d\u2019un mois gratuit\u201d. Dans cet exemple, le fait de conjuguer le verbe profiter<\/i> plut\u00f4t que d\u2019utiliser l\u2019infinitif engage davantage le visiteur. La gratuit\u00e9 est un avantage puissant car elle retire toute id\u00e9e de prise de risque et de douleur de payer. Nous pouvons aussi voir que Netflix utilise une fl\u00e8che tout comme le site Skyscanner.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Netflix<\/span><\/i><\/p>\n

3. Affichez votre bouton call-to-action principal plusieurs fois sur votre page<\/b><\/h2>\n

Il est pr\u00e9f\u00e9rable que votre bouton call-to-action soit un bouton plut\u00f4t qu’un simple lien hypertexte, vos visiteurs y feront forc\u00e9ment plus attention.<\/p>\n

D’autre part, le fait d’afficher plusieurs fois ce bouton call-to-action sur votre page augmente les chances que vos visiteurs cliquent dessus, dans la mesure o\u00f9 celui-ci est plus visible. Si vos visiteurs n\u2019avaient pas rep\u00e9r\u00e9 votre bouton call-to-action en haut de page, ils le verront sans aucun doute un plus bas.<\/p>\n

De plus, vos visiteurs scannent votre page puis cliquent s\u2019ils souhaitent poursuivre. En ajoutant votre bouton call-to-action plusieurs fois sur votre page, vous mettez \u00e0 disposition un appel \u00e0 action \u00e0 tout moment pour vos internautes. Ils n’ont donc pas \u00e0 remonter la page pour passer \u00e0 l’\u00e9tape suivante (acheter, s’inscrire, etc.).<\/p>\n

4. Placez votre bouton call-to-action au-dessus de la ligne de flottaison de votre page<\/b><\/h2>\n

Petit rappel, la ligne de flottaison est la ligne qui s\u00e9pare la partie visible d’une page web (lors de son chargement) de la partie invisible qui est accessible uniquement lorsque votre utilisateur fait d\u00e9filer la page. Ajoutez votre bouton call-to-action sur cette partie visible afin que vos visiteurs n\u2019aient pas \u00e0 chercher l\u2019appel \u00e0 action. En le rendant visible d\u00e8s l’arriv\u00e9e sur la page, vos visiteurs n\u2019ont pas \u00e0 faire d\u00e9filer la page pour le trouver. De cette mani\u00e8re, vous \u00eates certain de guider vos utilisateurs vers l’action souhait\u00e9e. Ils savent ce que vous attendez d’eux et \u00e0 quoi sert cette page. En combinant cette bonne pratique \u00e0 la pr\u00e9c\u00e9dente, vous ne faites donc pas r\u00e9fl\u00e9chir vos visiteurs, et vous les encourager \u00e0 poursuivre \u00e0 la prochaine \u00e9tape.<\/p>\n

La solution de Heatmaps Hotjar illustre bien les deux points mentionn\u00e9s ci-dessous. En plus d\u2019afficher le bouton call-to-action \u201cTry it for free\u201d au-dessus de la ligne de flottaison et plusieurs fois sur la page, il est aussi en permanence en haut de page \u00e0 droite lorsque l\u2019internaute fait d\u00e9filer la page.<\/p>\n

A l\u2019arriv\u00e9e sur la page<\/em><\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Hotjar<\/i><\/p>\n

En faisant d\u00e9filer la page<\/em><\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Hotjar<\/i><\/p>\n

5. Composez vos boutons call-to-action avec deux mots maximum<\/b><\/h2>\n

Vos boutons call-to-action doivent \u00eatre facilement lisibles et compr\u00e9hensibles. Evitez de faire r\u00e9fl\u00e9chir vos visiteurs au moment o\u00f9 ils doivent passer \u00e0 l\u2019action. Le moindre effort mental va ennuyer voire \u00e9nerver vos internautes qui risquent de ne pas poursuivre si l\u2019action sugg\u00e9r\u00e9e n’est pas claire.<\/p>\n

En utilisant deux mots uniquement, vos boutons call-to-action sont clairs et directs. Voici quelques exemples : \u00ab\u00a0Cliquez Ici\u00a0\u00bb, \u00ab\u00a0Je Continue\u00a0\u00bb, \u00ab\u00a0Achetez Maintenant\u00a0\u00bb.<\/p>\n

Le site Deezer utilise des boutons call-to-action comportant un ou deux mots sur la page des tarifs de leur site.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Deezer<\/i><\/p>\n

6. Laissez de l’espace autour de vos boutons call-to-action<\/strong><\/h2>\n

Vos pages contiennent beaucoup d\u2019information, en particulier les Homepage, les pages produits et les pages cat\u00e9gories. En laissant de l\u2019espace vide autour de vos boutons call-to-action, vous les mettez en valeur. Ils attirent donc l’attention de vos visiteurs. A contrario, en ne laissant pas d\u2019espace, les internautes risquent de ne pas les distinguer des autres \u00e9l\u00e9ments et donc de ne pas cliquer.<\/p>\n

Apple, avec ses pages produit \u00e9pur\u00e9es, a l\u2019avantage de bien mettre en avant les boutons \u201cS\u00e9lectionner\u201d comme ci-dessous pour l\u2019iPhone 8<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Apple<\/i><\/p>\n

7. Ajoutez le mot \u00ab\u00a0Gratuit\u00a0\u00bb \u00e0 vos boutons call-to-action<\/b><\/h2>\n

Cette bonne pratique ne fonctionne \u00e9videmment que si vous avez un produit ou un service \u00e0 proposer gratuitement.<\/p>\n

De mani\u00e8re g\u00e9n\u00e9rale, le fait de devoir payer provoque chez de nombreuses personnes un sentiment d\u00e9sagr\u00e9able et active les m\u00eames zones c\u00e9r\u00e9brales que celles qui sont \u00e0 l\u2019origine du d\u00e9go\u00fbt et de la douleur physique.<\/p>\n

A l\u2019inverse, le fait d\u2019obtenir quelque chose de gratuit suscite un sentiment positif et agr\u00e9able. C\u2019est la raison pour laquelle, dans la mesure du possible, pensez \u00e0 ajouter le mot \u00ab\u00a0gratuit\u00a0\u00bb \u00a0\u00e0 vos boutons call-to-action. Vos visiteurs auront beaucoup moins d\u2019h\u00e9sitation \u00e0 cliquer. Voici quelques exemples : \u00ab\u00a0T\u00e9l\u00e9chargez gratuitement\u00a0\u00bb ou \u00ab\u00a0Essayez gratuitement\u00a0\u00bb au lieu de \u00ab\u00a0T\u00e9l\u00e9chargez\u00a0\u00bb ou \u00ab\u00a0Essayez\u00a0\u00bb.<\/p>\n

\n
\n <\/span>\n Le Bonus de Benjamin :<\/span>\n
Vous voulez en savoir plus sur l’optimisation des taux de conversion ?<\/p>\n

Vous pouvez lire quelques articles \u00e0 ce sujet sur notre blog<\/a>, trouver de nombreuses id\u00e9es de test gr\u00e2ce \u00e0\u00a0nos tactiques d’optimisation de taux de conversions<\/a> et enfin tester vos pages gr\u00e2ce \u00e0 notre fonctionnalit\u00e9 d’A\/B testing<\/a>.<\/div>\n <\/div>\n <\/section>\n

8. Retirez toute distraction faciale autour de vos boutons call-to-action<\/b><\/h2>\n

Les personnes m\u00e9morisent mieux des images que du texte, il est donc important d’avoir des images sur votre site. Cependant, s’il y a des personnes sur vos images, faites en sorte que leur regard se dirigent vers le bouton call-to-action plut\u00f4t que vers l\u2019internaute lui-m\u00eame. Vos internautes auront tendance \u00e0 focaliser leur attention sur le regard plut\u00f4t que sur l\u2019appel \u00e0 action lui-m\u00eame.<\/p>\n

Evitez donc au maximum toute forme de distraction afin d\u2019attirer le plus d’attention sur le bouton call-to-action.<\/p>\n

Le Slip Fran\u00e7ais est un bon exemple car les personnes qu’ils mettent en avant regardent en direction des boutons call-to-action.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Le Slip Fran\u00e7ais<\/i><\/p>\n

9. Modifiez l\u2019apparence de vos boutons call-to-action une fois cliqu\u00e9s<\/b><\/h2>\n

J\u2019imagine que tout comme moi, il vous est d\u00e9j\u00e0 arriv\u00e9 plus d\u2019une fois de cliquer sur un bouton \u201cajouter au panier\u201d et en pensant que rien ne se passe, vous avez cliqu\u00e9 de nouveau et vous avez au final ajout\u00e9 plusieurs fois le m\u00eame produit \u00e0 votre panier.<\/p>\n

En modifiant l\u2019apparence de votre bouton call-to-action, notamment en changeant la couleur ou en ajoutant un effet de t\u00e9l\u00e9chargement, vos visiteurs n’auront plus aucun doute. Cela \u00e9vite d\u2019ajouter 3 fois le m\u00eame produit au panier comme je le mentionnais pr\u00e9c\u00e9demment. Vous pouvez aussi retirer ce dernier pour indiquer \u00e0 vos internautes qu\u2019ils ont d\u00e9j\u00e0 cliqu\u00e9 une fois, cela d\u00e9pend du type de page.<\/p>\n

Je ne pouvais trouver meilleur exemple qu’Asos, pour illustrer cette bonne pratique.<\/p>\n

1. Avant de cliquer<\/b><\/p>\n

\"boutons<\/p>\n

Source de l\u2019image ASOS<\/i><\/p>\n

2. Apr\u00e8s avoir cliqu\u00e9<\/b><\/p>\n

\"boutons<\/p>\n

Source de l\u2019image ASOS<\/i><\/p>\n

Bonus : Sur mobiles et tablettes, \u00e9largissez vos zones cliquables<\/b><\/h2>\n

Je vous avais annonc\u00e9 9 bonnes pratiques, voici donc un petit bonus !<\/p>\n

Il vous est d\u00e9j\u00e0 arriv\u00e9 sur tablette ou mobile de voir que les boutons call-to-action sont tr\u00e8s souvent trop petits. Cela est encore plus vrai lorsqu\u2019il s\u2019agit de texte cliquable !<\/p>\n

En effet, sur un mobile ou sur une tablette nous utilisons nos doigts et non une souris. La zone de clic est donc beaucoup moins pr\u00e9cise. Il arrive m\u00eame parfois de ne pas cliquer le bon bouton. De plus, sur ordinateur, lorsque vous naviguez sur une page, la souris d\u00e9tecte les zones cliquables, ce qui n’est pas le cas sur mobile. Par exemple, un texte cliquable va \u00eatre mis en valeur, un bouton call-to-action va changer de couleur etc. Il est donc important de vous assurer que vos zones cliquables soient suffisamment grandes.<\/p>\n

Par exemple plut\u00f4t que d’ajouter un bouton call-to-action pour chaque produit sur une page de cat\u00e9gorie, rendez l’ensemble du produit cliquable. De cette mani\u00e8re vous agrandissez la zone de clic et vous facilitez la navigation.<\/p>\n

Le site de ventes priv\u00e9es Showroomprivee.com est l\u2019exemple parfait !<\/p>\n

Sur ordinateur il y a un bouton call-to-action pour cliquer et d\u00e9couvrir chaque vente, comme on peut le voir sur l\u2019image ci-dessous.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Showroompriv\u00e9<\/i><\/p>\n

Sur mobile il n\u2019y a pas de bouton call-to-action, cependant toute la vignette qui correspond \u00e0 la vente est cliquable.<\/p>\n

\"boutons<\/p>\n

Source de l\u2019image Showroompriv\u00e9<\/i><\/p>\n

En Conclusion<\/strong><\/h2>\n

Vos boutons call-to-action ne doivent pas \u00eatre n\u00e9glig\u00e9s et peuvent clairement influencer l’envie de cliquer, que ce soit pour votre Homepage, vos pages produits, vos pages cat\u00e9gories, ou encore pour vos pages de checkout<\/a>.<\/p>\n

Il est donc essentiel de rendre vos boutons le plus clair possible afin que vos visiteurs n\u2019aient pas \u00e0 r\u00e9fl\u00e9chir et pour gagner des points de conversion<\/a>.<\/p>\n

Passons en revue mes bonnes pratiques :<\/p>\n