Call to action : ce que vos boutons doivent dire

Pourquoi « En savoir plus » n'est pas un call to action

Sur beaucoup des sites qu'on reprend en refonte, le bouton le plus visible de la page d'accueil s'appelle « En savoir plus ». Il est bien dessiné, bien centré, bien contrasté. Et il ne dit rien. En savoir plus sur quoi ? Sur une page tarifs, sur une plaquette PDF, sur un formulaire de douze champs ? Le visiteur ne sait pas. Alors il hésite une seconde, puis il continue de scroller.

Un call to action, ce n'est pas un élément graphique. C'est une promesse sur ce qui arrive après le clic. Quand la promesse est floue, cliquer coûte quelque chose au visiteur : il engage son attention sans savoir contre quoi. Quand elle est nette, le clic redevient une décision facile à prendre.

Je dirige le design chez Najumi, à Lyon, et c'est la première chose que je regarde sur un site qu'on doit refondre : pas la charte, pas la vitesse, les mots écrits dans les boutons. Un bouton s'écrit avant de se dessiner.

TL;DR : un bon call to action répond à trois questions avant le clic : où je vais, ce qui se passe après, et si je m'engage. « En savoir plus » n'en répond à aucune. « Voir les 3 formules et les prix » répond aux trois. Écrivez le libellé avant de choisir la couleur du bouton.

Définition. Un call to action, souvent abrégé en CTA et traduit par appel à l'action, est l'élément d'une page qui demande explicitement au visiteur d'accomplir une action précise : un bouton, un lien, un formulaire. Son libellé est sa partie utile. Le reste, couleur, taille, arrondi, ne sert qu'à le rendre repérable.

Sommaire

• Ce qu'est un call to action, exactement
• Ce dont un visiteur a besoin avant de cliquer
• Dix libellés réécrits, avant et après
• Pourquoi deux boutons de même poids s'annulent
• Où les placer, et combien de fois
• Ce qui change sur mobile
• Quand un bouton ment sur ce qui suit
• Auditer ses boutons en une heure
• Questions fréquentes

Qu'est-ce qu'un call to action, exactement ?

Un call to action est la seule partie d'une page qui transforme un lecteur en contact. Tout le reste informe. Le bouton, lui, engage.

La notion qui explique le mieux son fonctionnement vient de l'ergonomie web : c'est l'odeur de l'information, concept documenté par le Nielsen Norman Group. Un internaute ne lit pas une page, il la renifle. Il balaie les titres et les libellés cliquables, et il choisit celui qui sent le plus fort l'endroit où il veut aller. Un libellé générique n'a aucune odeur. Il ne promet rien, donc il n'attire personne.

Le même laboratoire a formalisé quatre critères pour un bon libellé de lien, et ils s'appliquent mot pour mot à un bouton :

• Spécifique : il nomme la destination, pas la catégorie.
• Sincère : il décrit ce qui va réellement arriver, sans embellir.
• Consistant : assez fourni pour se comprendre seul, sans le paragraphe qui le précède.
• Concis : court, mais jamais au prix des trois premiers.

Kate Moran, qui signe cette étude pour le Nielsen Norman Group, résume le problème en une formule : « Learn more » est le nouveau « Cliquez ici ». Deux mots, aucune odeur.

De quoi un visiteur a-t-il besoin avant de cliquer ?

Un visiteur a besoin de trois informations avant de cliquer, et ce sont toujours les mêmes : où il va, ce qui se passe après, et s'il s'engage. Si le libellé n'en porte aucune, il doit deviner, et deviner coûte plus cher que renoncer.

Où je vais

Une page, un formulaire, un document, un agenda ? « Nos services » envoie vers une page. « Télécharger le guide » envoie vers un PDF. Ce n'est pas le même effort, ni la même attente.

Ce qui se passe après

Est-ce que quelqu'un me rappelle ? Est-ce que je reçois un mail ? Est-ce que je vois le prix tout de suite ? « Envoyer » ne dit rien du tout. « Recevoir mon devis par e-mail » dit quoi, sous quelle forme, et par quel canal.

Si je m'engage

C'est le point le plus sous-estimé. Un visiteur qui hésite ne se demande pas si votre offre est bonne, il se demande s'il va se retrouver coincé. Un libellé qui rend l'action réversible ou manifestement gratuite lève ce frein sans une ligne de texte supplémentaire : « Prendre 20 minutes avec un développeur » se lit comme une conversation, pas comme un engagement.

Cette exigence n'est pas qu'une bonne pratique commerciale, c'est aussi une exigence d'accessibilité. Le critère 2.4.4 « Link Purpose (In Context) » du référentiel WCAG du W3C demande que la destination d'un lien soit compréhensible depuis son libellé ou son contexte immédiat. Le niveau au-dessus, 2.4.9 « Link Purpose (Link Only) », demande que le libellé se suffise à lui-même. C'est celui qui compte ici. Une personne qui navigue au lecteur d'écran se fait souvent lire la liste des liens de la page, hors contexte. Une page où cette liste donne « En savoir plus, En savoir plus, En savoir plus » est inutilisable pour elle. Elle l'est aussi, en pratique, pour tout le monde.

Exemples de call to action : dix libellés réécrits

Voici la méthode appliquée à des libellés qu'on croise chaque semaine. Rien n'a changé dans le design : seulement les mots.

Deux constantes dans cette colonne de droite : un verbe à l'infinitif ou à la première personne, et un complément concret. Le verbe, c'est la règle du service public numérique britannique, dont le design system recommande d'écrire le texte d'un bouton en décrivant l'action qu'il effectue. Un bouton n'est pas une étiquette de rubrique, c'est un verbe. La première personne, en revanche, est notre ajout et pas le leur : le design system britannique s'en tient à l'impératif, et sur des démarches administratives obligatoires il a raison. Sur un site de PME, où personne n'est obligé de rien, se projeter aide.

Trois réflexes de rédaction à garder en tête :

1. Écrivez le bouton à la place du visiteur, pas à la place de l'entreprise. « Recevoir mon devis » fonctionne mieux que « Demander un devis » parce que le visiteur se projette dans le résultat, pas dans la démarche.
2. Chiffrez quand vous le pouvez. « 3 formules », « 20 minutes », « 4 questions », « sous 48 h ». Un chiffre borne l'effort, et un effort borné se décide plus vite.
3. Ne dépassez pas une petite ligne. Si le libellé ne tient pas, c'est souvent que la page essaie de faire faire deux choses à la fois.

Vous voulez qu'on passe vos pages au crible et qu'on vous rende les libellés réécrits ? C'est exactement ce qu'on fait au démarrage d'un projet : voir comment on démarre une refonte de site, avant la première maquette.

Pourquoi deux boutons de même poids annulent les deux ?

Deux boutons de même poids s'annulent parce qu'un visiteur ne choisit pas entre deux actions équivalentes : il reporte. Une page qui propose « Demander un devis » et « Télécharger la plaquette » dans deux boutons identiques ne propose pas deux chemins, elle propose une hésitation.

La règle tient en une phrase : un appel à l'action principal par page, tout le reste en secondaire. Le principal est plein, coloré, en premier dans le sens de lecture. Le secondaire est en contour ou en simple lien, plus discret, placé après. Visuellement, on doit pouvoir désigner le bouton principal en une demi-seconde, sans lire.

Ce n'est pas une préférence esthétique. Le design system du gouvernement britannique est explicite : avoir plus d'un appel à l'action principal sur une page réduit leur impact et rend plus difficile, pour l'utilisateur, de savoir quoi faire ensuite. Et c'est une faiblesse extrêmement répandue : l'institut de recherche Baymard relève que 48 % des sites e-commerce testés en tunnel de commande négligent au moins un des éléments qui distinguent un bouton principal, qu'il s'agisse du style, de la position, de la constance d'une page à l'autre ou du libellé.

Définition. Un appel à l'action principal porte l'action que vous voulez voir se produire sur cette page. Un appel à l'action secondaire porte l'issue de repli pour ceux qui ne sont pas prêts. Le secondaire ne doit jamais ressembler au principal.

En pratique, sur une page de service de PME, ça donne : principal « Demander un devis », secondaire « Voir des réalisations ». Le second rattrape ceux qui ont besoin de preuve avant de s'engager, sans faire concurrence au premier. Le même raisonnement structure une bonne page de destination orientée conversion.

Où placer ses appels à l'action, et combien de fois ?

Un appel à l'action se place après chaque argument qui vient de convaincre, et trois occurrences suffisent sur une page de service. Le bon emplacement n'est donc ni « en haut » ni « en bas ». Un visiteur ne décide pas au même moment selon ce qu'il cherchait, et une page longue sans relance oblige celui qui est convaincu à la ligne 30 à remonter tout en haut pour agir.

Le découpage qu'on applique par défaut sur une page de service :

• En haut, visible sans scroller : le principal, formulé avec le bénéfice le plus concret de la page.
• Au milieu, juste après la preuve : cas client, chiffres, témoignage. C'est le moment où l'hésitation baisse le plus.
• En bas, avant le pied de page : le même principal, formulé une deuxième fois mais pas mot pour mot. Le visiteur qui a tout lu n'a pas les mêmes objections que celui qui vient d'arriver.

Trois occurrences sur une page de service, deux sur un article : c'est le réglage qu'on applique par défaut, pas une loi. Au-delà, l'effet s'inverse : une page qui répète son bouton tous les deux paragraphes se lit comme une publicité, et on cesse de la lire.

Un point de vigilance qui coûte cher aux PME : le bouton en haut de page doit correspondre à l'intention du visiteur à ce moment précis. Quelqu'un qui arrive depuis une recherche d'information n'est pas prêt à demander un devis. Lui proposer d'abord de voir un exemple concret, puis de demander un devis plus bas, respecte l'ordre dans lequel il se décide. C'est toute la logique du parcours utilisateur avant la prise de contact.

Qu'est-ce qui change sur mobile ?

Sur mobile, trois choses changent pour un appel à l'action : la taille de la cible, la longueur du libellé et la position dans le pouce. Aucune n'est cosmétique.

La taille de la cible

Un doigt n'est pas un curseur. Le critère 2.5.8 « Target Size » de WCAG 2.2 fixe un plancher de 24 par 24 pixels CSS, mais c'est un plancher normatif, pas un confort, et le RGAA français ne le reprend même pas puisqu'il s'aligne sur WCAG 2.1. Les recommandations des plateformes sont nettement au-dessus, et les tests de Baymard concluent qu'une zone tactile d'au moins 7 mm sur 7 mm réduit les erreurs de tap sur mobile. Un bouton mobile qui fait la hauteur d'un lien de menu sera manqué.

La longueur du libellé

« Démarrer mon audit gratuit en 4 questions » tient sur une ligne sur un écran de bureau, et se casse sur deux ou trois lignes sur un téléphone, selon la police et la taille retenues. Soit vous prévoyez une variante courte pour le mobile, soit vous raccourcissez partout. Un bouton qui se casse sur trois lignes perd sa forme de bouton, donc son évidence.

La position dans le pouce

Sur un écran tenu à une main, le bas de l'écran est atteignable, le haut ne l'est pas. Un appel à l'action collé en haut de page mobile demande un changement de prise. Sur les parcours qui comptent vraiment, formulaire, prise de rendez-vous, devis, on met souvent une barre d'action fixe en bas d'écran. Elle règle le problème de la portée et celui de la répétition d'un seul coup.

Le reste de ce qui se joue sur petit écran, vitesse comprise, est détaillé dans nos fondamentaux de design web qui convertissent.

Que se passe-t-il quand un bouton ment sur ce qui suit ?

Un bouton qui ment sur ce qui suit détruit la confiance, et plus vite qu'un bouton flou. Un libellé vague fait perdre un clic. Un libellé trompeur fait perdre un visiteur.

Les faux amis les plus courants, dans l'ordre de nocivité :

• « Devis gratuit » qui ouvre un formulaire de quinze champs. La gratuité n'était pas le problème. L'effort l'était, et il n'était pas annoncé.
• « Télécharger » qui demande un mail avant le téléchargement. Dites-le dans le bouton : « Recevoir le guide par mail ». Le visiteur qui accepte ira jusqu'au bout, celui qui refuse ne serait jamais devenu client.
• « Voir la démo » qui ouvre une prise de rendez-vous commercial. Ce n'est pas la même chose, et le visiteur le sait au moment où la page se charge.
• « Continuer » sur une dernière étape de commande. Le visiteur ne sait pas s'il valide ou s'il avance. Dans le doute, il n'ose pas cliquer.
• Le lien qui ouvre un PDF sans le dire. Sur mobile, c'est un changement d'application. Précisez le format.

La règle est simple et elle ne souffre pas d'exception : le libellé décrit l'étape suivante, pas l'objectif commercial. Un bouton sincère fait moins de clics et plus de contacts utiles, et c'est le seul arbitrage qui compte quand on regarde son taux de conversion réel.

Un exemple vécu, sur un site de services qu'on a refondu cette année : le formulaire de contact n'a pas bougé d'un champ. Le bouton disait « Envoyer », il dit maintenant « Recevoir ma proposition sous 48 h ». Le volume de demandes n'a pas explosé. En revanche, les gens qui écrivaient savaient qu'ils demandaient une proposition commerciale et pas une documentation, et l'échange de qualification qui suivait est passé de trois allers-retours à un. Je ne publie pas de pourcentage là-dessus : un seul site sur quelques semaines, ce n'est pas une mesure, c'est une observation. Elle va dans le sens de tout ce qui précède, et c'est tout ce qu'on peut honnêtement en tirer.

Comment auditer les boutons de votre site en une heure ?

Pour auditer les boutons de votre site en une heure, relisez vos libellés hors contexte et confrontez chacun aux trois questions du visiteur. La méthode tient en sept étapes, sans aucun outil.

1. Listez vos pages qui comptent. Accueil, chaque page de service, la page contact. Cinq à huit pages suffisent.
2. Sur chaque page, notez tous les libellés cliquables, boutons et liens de mise en avant, dans une colonne.
3. Masquez le reste. Relisez uniquement votre colonne. Si un libellé ne vous dit pas où il mène, il ne le dira à personne.
4. Pour chacun, cochez les trois questions : où je vais, ce qui se passe après, si je m'engage. Deux cases vides sur trois, le libellé est à réécrire.
5. Sur chaque page, entourez le bouton principal. S'il y en a deux, ou zéro, la hiérarchie est à refaire avant les mots.
6. Refaites le test sur votre téléphone, en tenant l'appareil d'une seule main. Ce que vous ne pouvez pas atteindre au pouce, vos visiteurs ne l'atteignent pas non plus.
7. Réécrivez, puis laissez reposer une semaine avant de regarder vos demandes entrantes. Ce qui change en premier, ce n'est pas le nombre, c'est la qualité.

Questions fréquentes sur les call to action

Un call to action doit-il être un bouton, ou un lien suffit ? Un bouton pour l'action principale, un lien pour le secondaire. La forme du bouton signale qu'il se passe quelque chose au clic, pas qu'on change simplement de page. Sur un article de blog, un lien contextuel bien écrit convertit souvent mieux qu'un encadré, parce qu'il arrive au moment exact où le lecteur se pose la question.

Combien d'appels à l'action faut-il par page ? Un seul principal, répété deux à trois fois sur une page longue, plus un secondaire pour ceux qui ne sont pas prêts. Le nombre de boutons n'est pas le problème : le nombre d'actions différentes en est un.

La couleur du bouton compte-t-elle vraiment ? Elle compte pour le repérage, pas pour la décision. Un bouton doit trancher sur le fond et rester identique d'une page à l'autre pour être reconnu. Mais changer un orange pour un vert sur un libellé qui ne dit rien ne produit aucun effet. Le mot d'abord, la couleur ensuite.

Faut-il écrire le bouton à la première personne ? Souvent oui, quand l'action bénéficie au visiteur : « Recevoir mon devis », « Choisir mon créneau ». Quand l'action est neutre ou technique, l'infinitif suffit : « Valider et passer au paiement ». Le critère reste la clarté, pas la formule.

Faut-il mettre un appel à l'action dans le menu de navigation ? Oui, un seul, celui de la conversion principale, visuellement distinct des entrées de menu. C'est le seul endroit du site présent sur toutes les pages, donc le filet de sécurité de tous les parcours.

Comment savoir si mes nouveaux libellés fonctionnent ? Regardez la qualité des demandes avant le volume de clics, surtout avec peu de trafic. Sur un site de PME, le signal le plus fiable des premières semaines est le temps passé à qualifier une demande entrante : s'il baisse, le bouton a fait son travail.

Ce qu'il faut retenir avant de toucher à vos boutons

« En savoir plus » n'est pas un mauvais call to action. Ce n'en est pas un du tout : c'est une décoration cliquable qui n'engage personne. Un appel à l'action utile dit où l'on va, ce qui arrive ensuite, et ce que ça coûte. Ces trois réponses tiennent dans une petite ligne de texte, et elles ne demandent ni refonte ni budget.

Commencez par l'exercice de la colonne : listez vos libellés, relisez-les hors contexte, et réécrivez ceux qui ne disent rien. Si vous voulez qu'on le fasse avec vous, page par page, envoyez-nous l'URL de votre site via le formulaire de contact. Devis gratuit et sans engagement.