Tout ce que le marché vous demande d’optimiser sur un bouton est invérifiable chez vous. Tout ce qui est vérifiable n’est cité par aucune page française.
Les deux leviers recommandés partout sont la couleur et la formulation. Ils reposent sur un petit nombre de tests isolés menés au début des années deux mille dix, et il vous faudrait des années de trafic pour les reproduire sur votre site.
Pendant ce temps, il existe des seuils chiffrés, normés et opposables qui décident de l’usage réel de votre bouton, et qui se contrôlent en vingt minutes sans une seule visite. Aucune des quinze pages françaises que nous avons relevées ne les mentionne.
Cette page traite donc les deux parts séparément : ce qui ne se vérifie pas, et pourquoi ; ce qui se vérifie, et comment.
Ressource à télécharger
La fiche de contrôle d'un bouton
Les cinq critères normatifs avec leur seuil, la méthode pour les mesurer dans votre navigateur, et le relevé des appels à l'action concurrents sur la page.
- Les seuils de taille de cible, et leurs exceptions
- Le contraste exigé, et comment le mesurer
- Le test du libellé lu hors contexte
- Le focus au clavier, visible et non masqué
- Le relevé des appels à l'action concurrents
- Ce que la fiche ne promet pas, et pourquoi
Format PDF, fiche de contrôle. Aucune inscription à une liste de diffusion.
Ce que le test du bouton rouge a réellement mesuré
C’est la statistique fondatrice du domaine, et son histoire est instructive.
Ce qu’on en dit. Changer la couleur d’un bouton augmenterait les conversions de vingt et un pour cent, le rouge l’emportant sur le vert. La phrase circule sur des dizaines de pages françaises, le plus souvent sans aucune source.
Ce qui s’est passé. Un test unique, sur un site client, portant sur environ deux mille visites et quelques jours. Le point décisif est ailleurs : le vert était l’une des couleurs principales du site testé. Le bouton vert ne ressortait donc pas de son environnement, tandis que le rouge, absent de la charte, sautait aux yeux.
Ce qui a donc été mesuré. Un écart de contraste, pas une teinte. N’importe quelle couleur vive absente de la charte aurait vraisemblablement produit le même écart. Aucune réplication n’a jamais été publiée.
La contradiction que personne ne relève. Les pages françaises recommandent simultanément de contraster avec le reste du site et de respecter votre charte graphique, ce qui est mécaniquement incompatible. Et plusieurs affirment que le rouge est à éviter, tout en citant le test où c’est précisément le rouge qui gagne.
La règle utile qui survit à tout cela. Ce n’est pas une couleur, c’est un rapport de contraste, et il est normé. Nous y venons plus bas.
Les seuils qui existent vraiment
Voici la partie du sujet qui se vérifie, et que personne ne cite. Ce sont des critères d’accessibilité, tous mesurables sur une page réelle sans aucune donnée de fréquentation.
La taille de la cible. Le critère 2.5.8, de niveau AA, exige que « la taille de la cible pour les entrées de pointage soit d’au moins vingt-quatre pixels CSS par vingt-quatre ». Cinq exceptions sont prévues, dont celle des liens situés à l’intérieur d’une phrase. Le critère 2.5.5, de niveau AAA, porte l’exigence à quarante-quatre pixels.
Le contraste du bouton lui-même. Le critère 1.4.11 exige un rapport de trois pour un entre le composant et les couleurs adjacentes, et il vise explicitement les états du composant. C’est la version vérifiable de tous les conseils de couleur du domaine.
Le nom du bouton doit contenir son libellé. Le critère 2.5.3, de niveau A, le plus basique donc, exige que « le nom contienne le texte présenté visuellement ». Un bouton qui affiche « Réserver » mais s’appelle autrement dans le code est inutilisable par quelqu’un qui pilote son navigateur à la voix.
Le focus au clavier doit être visible. Le critère 2.4.7 l’exige, et le critère 2.4.11 ajoute qu’il ne doit pas être entièrement masqué par un élément que vous avez ajouté, ce qui vise en pratique les bandeaux de consentement collants et les en-têtes fixes.
Ce qui rend ces critères précieux ici. Ils sont chiffrés, opposables à un prestataire, et se contrôlent en vingt minutes dans l’inspecteur de votre navigateur. C’est exactement l’inverse du test comparatif que tout le monde recommande et que presque personne ne peut mener.
Le contrôle qui prend vingt minutes
Voici la marche à suivre, dans l’ordre, sur la page qui compte le plus pour vous.
Mesurez la cible. Ouvrez l’inspecteur de votre navigateur, survolez le bouton, lisez ses dimensions. En dessous de vingt-quatre pixels de côté, vous êtes hors du critère, sauf si l’une des cinq exceptions s’applique. Ce cas est fréquent sur les liens secondaires et les icônes de fermeture.
Mesurez le contraste. Comparez la couleur du bouton à celle de son fond immédiat. En dessous de trois pour un, le bouton n’est pas perçu comme un bouton par une partie de vos visiteurs. C’est aussi la seule version défendable du conseil de couleur.
Lisez le libellé à voix haute, sans regarder la page. S’il ne dit plus rien, il ne disait déjà rien. Faites-le pour tous les boutons de la page : trois « En savoir plus » côte à côte se révèlent d’un coup.
Naviguez au clavier. Appuyez sur la touche de tabulation jusqu’à atteindre le bouton. Voyez-vous où vous êtes ? Le repère est-il masqué par votre bandeau de consentement ou votre en-tête fixe ? Ces deux défauts sont extrêmement fréquents et personne ne les voit à la souris.
Comptez. Combien de boutons et de liens sortants sur cette page, et combien d’objectifs poursuit-elle réellement ? Ce comptage ne prouve rien à lui seul, mais un écart considérable entre les deux nombres se corrige sans risque.
Ce que ce contrôle vous donne, et ce qu’il ne vous donne pas. Il vous donne une liste de défauts constatés, opposable à un prestataire. Il ne vous donne aucun gain chiffré, et personne ne peut vous en promettre un à votre volume de trafic.
Le libellé, et le test qui ne coûte rien
C’est le second levier vendu partout, et il y a bien quelque chose à en dire, mais pas ce qu’on lit.
Ce qu’on vous propose. Des listes de formulations à copier, souvent une centaine. Elles viennent presque toutes du commerce en ligne ou du logiciel en libre-service, où le bouton déclenche un achat immédiat. Elles ne sont pas conçues pour une vente interentreprises où le bouton demande un rendez-vous.
Ce qui est établi. Rien, au sens d’une recherche publiée et reproductible sur l’effet des libellés. Il existe des positions de praticiens, défendables, et des tests isolés vieux d’une décennie repris comme des lois.
Le test qui vaut mieux que tous les référentiels. Lisez votre libellé à voix haute sans son contexte. « En savoir plus » ne dit pas sur quoi. « Découvrir » ne dit pas quoi. Un libellé qui garde son sens seul est un libellé qui fonctionne, et c’est aussi ce que demande le critère de niveau A cité plus haut.
Pourquoi ce test n’est pas cosmétique. Une personne qui parcourt votre page avec un lecteur d’écran entend souvent la liste des liens hors de leur contexte. Quinze boutons « En savoir plus » ne lui apprennent rien.
Ce qui relève de la rédaction proprement dite est traité dans l’anatomie d’une page B2B qui convertit, et nous n’y revenons pas ici.
Combien de boutons, et la statistique introuvable
La règle du bouton unique est la plus répétée du domaine. Elle mérite d’être regardée de près, et elle ne survit pas à l’examen.
Le chiffre invoqué. Un seul appel à l’action par page augmenterait les conversions de deux cent soixante-six pour cent. Il est attribué tour à tour à trois organisations différentes selon les pages, et nous ne l’avons trouvé chez aucune des trois.
Ce qui existe réellement. Un concept de conception, le rapport entre le nombre de liens présents sur une page et le nombre d’objectifs qu’elle poursuit, avec une cible d’un pour un. C’est un raisonnement défendable. Il est illustré par un cas unique, une page d’inscription à un webinaire, avec un gain annoncé de plus de quarante pour cent. Un cas, pas une étude.
Ce que la transposition en B2B casse. Ces exemples viennent de pages d’atterrissage à objectif unique, en commerce en ligne ou en logiciel libre-service. Sur un site interentreprises à cycle long, réduire à un seul bouton ne concentre pas l’attention : cela écarte tous ceux qui ne sont pas prêts à demander un rendez-vous, c’est-à-dire la majorité de vos visiteurs.
Ce qui fonctionne à la place, et qui n’est pas une opinion mais une conséquence du cycle. Deux niveaux d’engagement. Un premier pour qui est prêt, la prise de rendez-vous. Un second pour qui ne l’est pas, une ressource, une comparaison, un document qui aide à décider. Le premier convertit peu et bien, le second entretient une relation qui aboutira plus tard.
La règle qui reste valable. Un objectif par page, oui. Un bouton par page, non. La nuance décide de tout, et elle est traitée sous l’angle de la structure dans le tunnel de conversion.
Deux niveaux d’engagement, plutôt qu’un bouton unique
C’est la conséquence pratique la plus utile de tout ce qui précède, et elle découle de la longueur de votre cycle de vente.
Le problème de la page à bouton unique. Elle suppose que le visiteur est prêt. Sur une vente qui se décide en semaines ou en mois, la majorité de vos visiteurs ne l’est pas, et une page qui ne propose que la prise de rendez-vous les renvoie sans rien.
Ce qu’il faut leur offrir à la place. Quelque chose qui les aide à avancer sans engager de conversation : une comparaison, un calcul, un document qui répond à la question qu’ils se posent maintenant. Ce second niveau ne convertit pas en clients, il maintient une relation avec des gens qui décideront plus tard.
Ce que cela change à la hiérarchie visuelle. Les deux ne se valent pas et ne doivent pas se ressembler. Un bouton principal, plein et contrasté, pour l’engagement fort. Un lien secondaire, discret et clairement subordonné, pour l’autre. Ce n’est pas un compromis mou : c’est une hiérarchie assumée.
L’erreur symétrique, tout aussi coûteuse. Empiler cinq propositions de même poids ne laisse plus voir laquelle compte. La règle utile n’est pas de compter les boutons, c’est de vérifier qu’un visiteur pressé voit immédiatement lequel est le principal.
Le test qui tranche en dix secondes. Regardez votre page pendant une seconde, puis fermez les yeux. Quel bouton avez-vous retenu ? Si la réponse est aucun, ou plusieurs, votre hiérarchie ne fonctionne pas, et cela n’a rien à voir avec la couleur que vous avez choisie.
Deux choses que ce sujet ne réglera pas
Elles sont traitées ailleurs sur ce site, et il faut les poser ici parce qu’elles précèdent toute discussion sur un bouton.
Votre formulaire vide n’est probablement pas un problème de bouton. Un visiteur qui comprend votre offre et n’en veut pas produit exactement le même formulaire vide qu’un visiteur empêché. La distinction, le test qui la tranche et ses conséquences budgétaires sont dans ergonomie web, ce qu’elle ne réparera pas.
Vous ne pourrez pas départager deux versions. Sur une page qui convertit à deux pour cent, distinguer un gain de vingt pour cent demande de l’ordre de vingt mille visites par version. À quelques centaines de visites mensuelles, cela représente des années, et votre page aura changé entre-temps. Le calcul est posé dans le même article, et notre outil le fait sur vos chiffres.
La conséquence pour ce sujet précis. Tous les conseils de couleur et de formulation supposent que vous puissiez mesurer laquelle des deux versions l’emporte. Vous ne le pouvez pas. Ils ne sont donc ni vrais ni faux pour vous : ils sont invérifiables, ce qui est pire.
Ce qu’il reste, et c’est la thèse de cette page. Les seuils normatifs, qui ne demandent aucun trafic, et le bon sens de l’usage, qui se contrôle en observant cinq personnes utiliser votre site.
Ce que le domaine emprunte au commerce en ligne
Une dernière chose explique pourquoi tant de conseils sonnent faux quand on les applique à une vente interentreprises.
D’où viennent les exemples. Les listes de formulations que vous trouverez, souvent une centaine, sont presque toutes issues du commerce en ligne ou du logiciel en libre-service. « Ajouter au panier », « Commencer mon essai gratuit », « Profiter de la livraison offerte » : le bouton y déclenche une transaction immédiate, réversible, à faible engagement.
Ce que votre bouton demande. Un rendez-vous, c’est-à-dire du temps, une exposition, et souvent l’accord d’un tiers. L’engagement n’est pas du même ordre, et aucune formulation ne le rendra anodin.
La conséquence sur l’urgence. Les procédés d’urgence, compte à rebours, places limitées, offre qui expire, fonctionnent sur un achat impulsif et se retournent en vente interentreprises, où ils signalent surtout qu’on cherche à forcer la main de quelqu’un qui n’a pas fini de réfléchir.
Ce qui marche à la place, et qui n’est pas une formulation. Réduire ce que le bouton engage réellement. « Réserver trente minutes » dit quelque chose de vérifiable que « Demander une démonstration » ne dit pas. Ce n’est pas un effet de style, c’est une information sur le coût de l’engagement.
Le vrai levier, et il n’est pas dans le bouton. Ce qui précède le bouton décide de ce qu’il produit. Un visiteur convaincu clique sur un bouton médiocre ; un visiteur qui doute ne clique sur aucun bouton, aussi bien conçu soit-il.
Les chiffres à ne pas reprendre
Quatre affirmations structurent ce marché. Aucune ne résiste.
« Le bouton rouge convertit vingt et un pour cent de mieux. » Un test, deux mille visites, quelques jours, et une couleur perdante qui était celle du site. C’est un contraste qui a été mesuré.
« Un seul appel à l’action augmente les conversions de deux cent soixante-six pour cent. » Introuvable chez les trois organisations auxquelles on l’attribue.
« Les appels à l’action personnalisés convertissent deux cent deux pour cent de mieux. » Le chiffre existe et provient d’une comparaison portant sur un grand nombre de boutons, mais ce n’est pas une expérience : c’est une observation de parc, sans affectation aléatoire. Les sites qui personnalisent leurs boutons sont aussi ceux qui ont une base de contacts, un outillage et du trafic récurrent. Et l’éditeur qui publie le chiffre vend la fonction qu’il justifie.
« La première personne augmente les clics de quatre-vingt-dix pour cent. » Un test, une page, trois semaines, il y a plus de dix ans. Le site source n’existe plus sous cette forme.
Le point commun. Toutes ces valeurs proviennent de tests uniques, non répliqués, menés sur des sites dont vous ignorez tout, et transformés en règles générales par une chaîne de citations qui ne remonte jamais à la source. La méthode pour les trier est décrite dans l’anatomie d’une page B2B qui convertit.
Par où continuer, selon votre situation
Votre formulaire reste vide. Le tri préalable : ergonomie web, ce qu’elle ne réparera pas.
Vous composez une page de conversion. Bloc par bloc : l’anatomie d’une page B2B qui convertit.
Vous ne savez pas où placer vos appels à l’action. Le tunnel de conversion.
Votre formulaire est trop long. Le formulaire de contact B2B.
Vous voulez savoir ce que vos volumes permettent de mesurer. L’outil de trafic nécessaire.
En bref
- La couleur et la formulation sont invérifiables chez vous. Il faudrait des années de trafic pour départager deux versions.
- Le test du bouton rouge a mesuré un contraste, pas une teinte : la couleur perdante était celle du site.
- Le « un seul appel à l’action, plus deux cent soixante-six pour cent » est introuvable chez les trois sources auxquelles on l’attribue.
- Cinq critères normatifs existent : 24 pixels de cible, 3:1 de contraste, un nom qui contient le libellé, un focus visible et non masqué.
- Ils se contrôlent en vingt minutes sans trafic, et s’opposent à un prestataire.
- Un objectif par page, oui. Un bouton par page, non. En cycle long, il faut deux niveaux d’engagement.
- Lisez votre libellé hors contexte. S’il ne dit plus rien, il ne disait déjà rien.
Avant de changer la couleur de votre bouton, mesurez sa cible et son contraste. Parlons de votre projet, ou découvrez notre approche des landing pages et du CRO.