Call to action sur un site internet : quoi écrire sur le bouton et où le placer

Un call to action sur un site internet, c’est le bouton qui dit au visiteur quoi faire maintenant : appeler, demander un devis, prendre rendez-vous. Pour un plombier, un avocat, un coach ou un agent immobilier, c’est souvent le seul geste qu’une page doit obtenir, et il se joue sur trois décisions : les mots du bouton, sa place, sa taille. Ce guide les tranche avec des sources : Nielsen Norman Group pour l’usage, les règles d’accessibilité WCAG 2.2 pour la norme, Google Analytics 4 pour la mesure. Une précision avant de commencer : aucune des sources retenues ne donne de taux de conversion pour les TPE françaises, vous n’en lirez donc aucun ici.

Le fil rouge tient en une phrase : un bouton est une promesse, pas une décoration.

Quels mots écrire sur un bouton pour faire agir le visiteur ?

Un verbe d’action et un objet précis, qui disent ce qui se passe après le clic : « Appeler pour un dépannage », « Demander un devis pour votre chantier », « Choisir un créneau de rendez-vous ». Nielsen Norman Group, cabinet spécialisé dans l’expérience utilisateur, ramène la règle à quatre qualités, les 4 S : spécifique, sincère, substantiel, succinct (Kate Moran, 24 mars 2019, traduit de l’anglais).

Ce que recouvre chaque S, d’après l’article de Kate Moran sur les libellés de liens :

• Spécifique. « La fonction première d’un lien est d’indiquer à l’utilisateur ce qu’il trouvera de l’autre côté du clic » (traduit de l’anglais). Un bouton « Devis » tout seul ne dit pas si l’on va télécharger une grille de prix ou remplir un formulaire.
• Sincère. Ce que le bouton annonce arrive tout de suite après le clic, sans détour. Nous y revenons plus bas.
• Substantiel. Le libellé a du sens tout seul. Dans ses études d’oculométrie, NN/g observe souvent des utilisateurs qui regardent les liens sans lire le texte autour. D’où sa consigne : « Imaginez que vos utilisateurs ne lisent que le libellé du lien, et rien du texte qui l’entoure » (traduit de l’anglais).
• Succinct. Des mots serrés, mais cette qualité passe après les trois autres : « Il n’y a pas de nombre maximal de mots pour un lien » (traduit de l’anglais). Mettez l’information utile dans les premiers mots, parce que l’œil balaie la page au lieu de la lire.

Appliqué à quatre métiers, voici ce que cela donne. Les libellés sont des exemples écrits par nous, à adapter à votre activité ; la dernière colonne sert de contrôle de sincérité.

Nos pages création de site internet pour coachs et création de site internet pour agence immobilière partent de ces mêmes actions : la séance découverte réservée pour l’un, l’estimation pour l’autre.

Pourquoi éviter un bouton vague comme En savoir plus ?

Parce qu’il n’annonce rien, alors que le visiteur lit souvent le bouton sans le texte qui l’entoure. Nielsen Norman Group range « En savoir plus » parmi les échecs de liens les plus courants et résume : « En savoir plus est le nouveau Cliquez ici » (traduit de l’anglais). Un participant à ses tests : « Je n’ai aucune idée de ce qui m’attend, c’est pour ça que je ne clique jamais dessus » (traduit de l’anglais).

L’exemple étudié par NN/g est celui de Mailchimp, dont les liens « En savoir plus » suivaient pourtant des accroches bien écrites. L’auteure rappelle que l’on parcourt une page web plus qu’on ne la lit, et que les liens colorés attirent davantage le regard que le reste du texte : le visiteur qui ne regarde que les liens ne trouve rien qui lui donne envie de cliquer. Elle ajoute que les liens vagues sont mauvais pour l’utilisateur, mais aussi pour l’entreprise, qui veut justement faire découvrir ses services.

Le second piège est le bouton qui promet plus qu’il ne donne. Dans le même article, une participante veut réserver un circuit sur le site de voyages Combadi. Elle clique sur un bouton « Plus d’infos et réserver » (traduit de l’anglais) et tombe sur un formulaire de contact en fenêtre surgissante. Le verdict de NN/g : « Un lien est une promesse » ; les libellés des liens et des boutons doivent créer des attentes satisfaites dès le clic (traduit de l’anglais). Quand elles ne le sont pas, la confiance s’use, et les clics perdus poussent l’utilisateur à cliquer moins sur le site, voire à le quitter.

Pour une petite entreprise, la correction est simple. Si votre bouton « Prendre rendez-vous » ouvre un formulaire de contact et non un agenda, écrivez « Demander un rendez-vous ». La démarche reste la même, la promesse devient vraie.

Où placer le bouton principal sur une page ?

Dans le premier écran, visible sans défiler, puis de nouveau en bas de page. Dans l’étude d’oculométrie de Nielsen Norman Group publiée le 15 avril 2018, les participants ont passé environ 57 % de leur temps de lecture au-dessus de la ligne de flottaison, sur un écran d’ordinateur de 1920 x 1080 pixels. La consigne qu’en tire NN/g est nette : « Gardez les principaux appels à l’action au-dessus de la ligne de flottaison » (traduit de l’anglais).

Le périmètre de ce chiffre compte. L’étude de Therese Fessenden sur le défilement et l’attention repose sur plus de 130 000 fixations du regard de 120 participants, sur des sites de secteurs variés : actualités, commerce en ligne, blogs, foires aux questions, encyclopédies. C’est une mesure sur ordinateur, elle ne donne aucun chiffre pour le téléphone. Les deux premiers écrans y concentraient 74 % du temps de lecture, les trois premiers 81 %. En 2010, une étude antérieure de NN/g relevait 80 % au-dessus de la ligne de flottaison : on fait défiler davantage qu’avant, mais l’attention reste concentrée en haut de page.

Ensuite, reprenez la même action en fin de page. Ici, c’est notre conseil et non un résultat de l’étude, qui ne mesure pas les boutons de bas de page. Le raisonnement part d’une phrase de NN/g : les gens font défiler la page s’ils ont une raison de le faire. Celui qui arrive en bas a lu vos arguments ; le bouton doit l’attendre là, sans qu’il ait à remonter le chercher.

Dernier piège signalé par la même étude : les faux planchers, ces mises en page épurées qui donnent l’impression d’être terminées et coupent l’envie de défiler. Un texte coupé en bas d’écran signale qu’il y a une suite, et donc un bouton plus bas.

Peut-on mettre plusieurs boutons d’action sur la même page ?

Oui, à condition qu’un seul domine. Nielsen Norman Group le formule ainsi : « Évitez les appels à l’action concurrents, aussi saillants l’un que l’autre. Si vous devez en avoir deux, donnez-leur un style qui rende leur priorité évidente » (Therese Fessenden, 1er octobre 2017, traduit de l’anglais). Deux boutons de même poids obligent le visiteur à s’arrêter pour choisir, ce qui prend plus de temps et donne une impression d’effort.

En pratique, l’action principale prend le bouton plein, dans la couleur d’accent du site ; la seconde passe en bouton à contour ou en simple lien texte. Trois exemples :

• Plombier : « Appeler pour un dépannage » en bouton plein, « Demander un devis pour des travaux » en lien.
• Avocat : « Demander un premier rendez-vous » en bouton plein, « Voir les domaines d’intervention du cabinet » en lien.
• Agent immobilier : « Demander l’estimation de mon bien » en bouton plein, « Voir les biens à vendre » en lien.

Le même article de NN/g montre l’inverse. La page d’accueil de Moneystrands affichait un grand appel à l’action réclamant des coordonnées, deux boutons de téléchargement d’application et une troisième demande, celle d’afficher des notifications. Pour NN/g, ces demandes « érodent la crédibilité de l’entreprise » (traduit de l’anglais). Mieux vaut apporter quelque chose d’abord : le visiteur sera ensuite plus enclin à laisser ses coordonnées.

Cette hiérarchie se décide avant le dessin. Dans notre méthode, le brief du premier jour fixe les sections et la hiérarchie de l’information ; c’est le bon moment pour désigner l’action principale de chaque page.

Quelle taille et quel contraste pour un bouton d’action ?

Au moins 24 x 24 pixels CSS de zone cliquable, 44 x 44 pour un niveau renforcé, et un texte contrasté à 4,5:1 au moins avec son fond. Ces seuils ne relèvent pas du goût : ils viennent des Règles pour l’accessibilité des contenus Web (WCAG) 2.2 du W3C, dans leur traduction française agréée du 17 mars 2025, aux critères 2.5.8 (niveau AA), 2.5.5 (niveau AAA) et 1.4.3.

Le détail, critère par critère :

• 2.5.8 Taille de la cible (minimum), niveau AA. « La taille de la cible pour les entrées de pointeur est d’au moins 24 par 24 pixels CSS. » Le texte prévoit des exceptions, dont la cible placée dans une phrase et la petite cible assez espacée des autres : un cercle de 24 pixels CSS centré sur elle ne doit croiser ni une autre cible, ni le cercle d’une autre petite cible.
• 2.5.5 Taille de la cible (amélioré), niveau AAA. Au moins 44 par 44 pixels CSS.
• 1.4.3 Contraste (minimum), niveau AA. Un rapport de contraste d’au moins 4,5:1 pour le texte, 3:1 pour le texte agrandi.
• 1.4.11 Contraste du contenu non textuel, niveau AA. Au moins 3:1 avec les couleurs adjacentes pour les éléments visuels nécessaires à l’identification d’un composant d’interface et de son état.

Notre lecture : pour le bouton principal d’une page, le niveau AA est un plancher. Viser 44 x 44 coûte peu de place sur un bouton qu’on touchera du pouce, entre deux rendez-vous ou sur un chantier. Et un texte gris clair sur fond pastel, aussi élégant soit-il, se mesure : sous 4,5:1, un texte de taille courante ne passe pas.

Comment savoir si vos boutons font agir le visiteur, avec Google Analytics 4 ?

En comptant les actions plutôt que les visites. Dans Google Analytics 4, l’envoi d’un formulaire se marque comme événement clé, et l’aide de Google indique qu’on peut en marquer jusqu’à 30 par propriété standard. Les mesures améliorées collectent déjà le début et l’envoi des formulaires. En revanche, les clics sur un lien tel:, celui qui lance l’appel, ne figurent pas dans leur liste : il faut les configurer.

Trois réglages, dans l’ordre :

1. Activer les mesures améliorées. Dans Administration, rubrique Collecte et modification des données, puis Flux de données. L’événement form_start se déclenche à la première interaction avec un formulaire au cours d’une session, form_submit à l’envoi. L’aide de Google propose de comparer les deux : combien de visiteurs commencent le formulaire, combien l’envoient.
2. Marquer l’envoi comme événement clé. Dans Administration, Affichage des données, Événements : un clic sur l’étoile de l’événement suffit, selon l’aide Google Analytics en français. Comptez jusqu’à 24 heures avant de le voir dans les rapports standards ; le rapport Temps réel suit en quelques minutes, et les données passées ne sont pas modifiées. Si votre formulaire mène à une page de remerciement, une autre page de l’aide décrit une seconde voie : créer un événement à partir des pages vues de cette adresse, puis le marquer comme événement clé.
3. Configurer les clics sur le numéro. La liste des mesures améliorées couvre les pages vues, le défilement, les clics sortants vers un autre domaine, la recherche sur le site, les vidéos, les téléchargements de fichiers et les formulaires. Le lien tel: n’y est pas. Il faut un événement dédié, envoyé par un code installé sur le site (l’option Créer avec code de l’aide GA4), puis marqué comme événement clé. Si vos clients appellent plus qu’ils n’écrivent, c’est le réglage qui compte le plus.

Ensuite, changez un libellé à la fois, notez la date, et comparez le nombre d’événements clés de la page sur deux périodes de même durée, avant et après. Avec quelques demandes par mois, laissez courir plusieurs mois avant de conclure : sur de si petits nombres, l’écart d’une semaine à l’autre ne prouve rien.

Comment relire les boutons de votre site, page par page ?

Ouvrez chaque page importante et passez-la à cette grille de cinq questions. Elle reprend les règles ci-dessus dans l’ordre où le visiteur les rencontre : ce qu’on lui demande, ce qu’il lit, ce qu’il obtient, où il le trouve, et ce que vous en mesurez. Un non à l’une des questions vous dit quoi corriger en premier.

1. Une seule action principale, et c’est celle de votre métier ? Appeler pour un dépannage, demander un devis pour un chantier, prendre rendez-vous pour un cabinet ou un coach. Si vous hésitez entre deux, la page doit en choisir une et reléguer l’autre.
2. Le bouton se comprend-il seul ? Cachez le texte autour : le libellé doit encore dire ce qui se passe après le clic. Aucun « En savoir plus », aucun « Envoyer » sans objet.
3. La promesse est-elle tenue ? Cliquez vous-même. « Réserver » ouvre un agenda, « Appeler » lance l’appel, « Demander un devis » mène au formulaire de devis.
4. Se voit-il et se touche-t-il ? Visible dans le premier écran, repris en bas de page, seul à dominer, au moins 24 x 24 pixels CSS (44 x 44 en mieux), texte contrasté à 4,5:1 au moins.
5. Le comptez-vous ? Envoi de formulaire marqué comme événement clé dans GA4, clics sur le numéro configurés à part.

Si la grille fait apparaître plus de corrections que vous n’avez de temps à y consacrer, c’est le travail d’une création de site web pensée à partir de l’action de chaque page. Le formulaire de contact est compris dès le pack Essentiel, à 990 € en une fois pour la première année, et le pack Croissance, à 2 490 €, ajoute « Savoir d’où viennent vos clients : on installe tout » ; le détail figure sur notre offre.