Conversion Rate Optimization
Optimisation du Taux de Conversion de vos SItes

Concevoir un bouton d'appel à l'action qui convertit

Le design répond à « où cliquer », la copie répond à « pourquoi cliquer »

Deux rôles distincts, deux leviers à optimiser séparément

Le design d'un bouton répond à la question « où cliquer ? », en attirant l'attention du visiteur vers l'endroit précis où agir. La copie du bouton répond à une question différente, « pourquoi cliquer ? », en emportant la décision une fois l'attention captée. Ces deux rôles restent mesurablement distincts et méritent chacun leur propre effort d'optimisation, plutôt qu'un simple ajustement de couleur traité comme suffisant à lui seul.

Le mythe de la couleur universelle, démenti par les tests

Une croyance ancienne, résumée par la formule du « Big Orange Button » (surnommé BOB par son promoteur Chris Goward), présentait l'orange comme la couleur idéale d'un appel à l'action, associée à l'énergie et à l'enthousiasme. Une série de tests réels contredit directement cette idée : aucune couleur n'est intrinsèquement supérieure à une autre, seul le contraste avec la couleur dominante de la page détermine si un bouton se détache visuellement. Un bouton rouge attire l'œil sur une page à dominante verte, l'inverse serait vrai sur une page à dominante rouge, un principe déjà résumé sous le nom d'isolation par la différence.

Plusieurs cas chiffrés illustrent le caractère souvent contre-intuitif de ce principe. Sur un site e-commerce européen de porcelaine peinte à la main, changer la couleur et la forme du bouton d'appel à l'action a augmenté les ventes, pas seulement le taux de clic, de 35,81 % sur les pages produit. Sur un site immobilier commercial, remplacer un bouton brun discret par un bouton orange plus affirmé a plus que doublé le taux de clic. Mais sur ce même bouton orange, retirer une flèche jugée inesthétique par le designer a en réalité fait baisser le taux de clic de 12,29 %, la préférence esthétique du designer allant à l'encontre du résultat réellement mesuré. Sur un portail danois de revente de téléphones mobiles d'occasion, changer la couleur du texte d'un bouton vert de noir à jaune, dans l'intention de le faire davantage ressortir, a fait chuter le taux de clic de 18,01 %. Un bouton vert simple, associé à une copie pertinente, a par ailleurs surpassé une variante visuellement plus créative de 10,94 %. Enfin, sur une page de paiement, agrandir significativement un bouton a eu un effet négatif sur la conversion, l'hypothèse avancée étant qu'une taille excessive crée un sentiment de pression chez le prospect au moment critique du paiement.

Le squint test, qui consiste à plisser les yeux et prendre du recul pour juger si un bouton se détache réellement du reste de la page, permet de diagnostiquer ce contraste indépendamment de la couleur choisie a priori.

Structurer le design visuel du bouton et de son environnement

Le principe M.I.R.B.O. (Make It Really Bloody Obvious) résume l'objectif visuel poursuivi : rendre l'appel à l'action tellement évident qu'aucune réflexion n'est nécessaire pour le repérer. La technique d'encapsulation y contribue en entourant le formulaire ou le bouton d'un cadre ou d'un conteneur visuel, créant un effet de tunnel qui empêche l'œil de vagabonder ailleurs sur la page. Les indices directionnels renforcent cet effet : une flèche fonctionne précisément parce qu'elle reste peu subtile, et combiner plusieurs indices, comme une flèche et le regard d'une personne représentée sur une photo orientés vers le même point, amplifie encore le guidage du regard vers le CTA. L'espace blanc autour du bouton, sans qu'il soit nécessaire que cet espace soit littéralement blanc, contribue au même effet de détachement visuel.

Pour la copie affichée sur ou autour du bouton, diviser le texte en un énoncé principal et un énoncé secondaire, à l'intérieur ou juste à l'extérieur du bouton, permet de communiquer davantage d'information sans agrandir excessivement sa taille visuelle.

La formule qui gouverne la copie du bouton

Un principe recouvre l'ensemble des choix de rédaction d'un bouton : la taille perçue de la récompense promise doit égaler ou dépasser la taille perçue de l'effort ou de la barrière demandée pour l'obtenir. Un cas emblématique illustre l'application concrète de ce principe au niveau du mot : sur une page de destination PPC d'unbounce.com, changer un seul mot de la copie du bouton, du déterminant possessif « your » à « my » (« start my free 30 day trial » plutôt que « start your free 30 day trial »), a augmenté le taux de clic de 90 % après trois semaines de test, un déterminant à la première personne renforçant l'appropriation ressentie de l'action.

Reformuler un CTA générique comme « get started » en un appel à la valeur spécifique au bénéfice concret attendu (« plan your finances », « grow your following ») applique le même principe à plus grande échelle, tout comme l'usage de la première personne plutôt que de la deuxième (« send me... », « I want it! »). Une statistique citée, sans méthodologie détaillée, avance que des CTA personnalisés obtiendraient un taux de conversion supérieur de 202 % à des CTA génériques. Un autre cas cité, sur un produit onéreux, a mesuré une multiplication par dix du taux de clic en remplaçant le texte générique « Buy Online » par une formulation plus descriptive, « Price and Buy », qui répond mieux à la question implicite du visiteur avant l'achat (connaître le prix avant de s'engager) plutôt que de commander directement l'action attendue.

L'emplacement et le contexte du bouton comptent autant que son texte

Suivre la hiérarchie visuelle naturelle d'une page, selon un motif en Z ou en F, oriente mieux le placement d'un CTA que la seule taille du bouton. Le niveau d'engagement demandé par le CTA doit par ailleurs s'adapter au stade du visiteur dans le tunnel : ne pas demander l'intégralité de la valeur promise à un visiteur qui vient tout juste d'arriver en haut du tunnel. Utiliser plusieurs emplacements de CTA sur une même page, en désignant clairement un CTA principal, reste une pratique courante : un exemple cité (Indochino) place ses CTA en haut, au milieu et en bas de page, avec un niveau d'urgence décroissant à mesure que le visiteur avance dans sa lecture. Une barre collante ou un popup permettent enfin de maintenir le CTA visible en permanence, quel que soit l'endroit où se trouve le visiteur sur la page.

Le contraste de couleur du bouton doit rester cohérent avec le reste de la page tout en s'en distinguant nettement, une pratique qui justifie de réserver une couleur exclusivement à l'usage des CTA. Sur mobile, des standards de taille minimale sont cités : 44 sur 44 pixels selon Apple, 34 sur 26 pixels selon Microsoft, pour garantir une zone de clic suffisante au doigt. Orienter le regard d'une image d'accroche vers le bouton exploite le même réflexe visuel déjà documenté pour les indices directionnels.

FAQ

Existe-t-il une couleur de bouton universellement meilleure pour la conversion ? Non, malgré la croyance ancienne autour du « Big Orange Button » : des tests réels montrent qu'aucune couleur n'est intrinsèquement supérieure. Ce qui compte est le contraste avec la couleur dominante de la page, un bouton rouge attirant l'œil sur une page à dominante verte, l'inverse étant vrai sur une page à dominante rouge.

Pourquoi retirer un élément visuel jugé inesthétique peut-il faire baisser la conversion ? Parce que la préférence esthétique d'un designer ne correspond pas toujours à ce que mesure un test réel : retirer une flèche jugée inesthétique sur un bouton a fait baisser le taux de clic de 12,29 % par rapport à la version qui la conservait, ce qui illustre l'importance de tester plutôt que de trancher par intuition visuelle seule.

Un bouton plus grand convertit-il toujours mieux ? Non : sur une page de paiement, agrandir significativement un bouton a eu un effet négatif sur la conversion, l'hypothèse avancée étant qu'une taille excessive crée un sentiment de pression chez le prospect au moment critique du paiement, un contexte où la discrétion peut compter davantage que la visibilité maximale.

Pourquoi remplacer « your » par « my » sur un bouton a-t-il augmenté le taux de clic de 90 % ? Parce qu'un déterminant à la première personne (« start my free trial ») renforce l'appropriation ressentie de l'action par le visiteur, comparé à un déterminant à la deuxième personne (« start your free trial ») qui la présente comme une action que l'entreprise demande plutôt qu'une décision prise par le visiteur lui-même.

Qu'est-ce que le principe M.I.R.B.O. appliqué à un bouton d'appel à l'action ? C'est l'objectif de rendre l'appel à l'action tellement évident qu'aucune réflexion n'est nécessaire pour le repérer sur la page. La technique d'encapsulation, qui entoure le bouton ou le formulaire d'un cadre visuel créant un effet de tunnel, et l'usage d'indices directionnels comme des flèches ou un regard orienté, concourent tous les deux à cet objectif.

Comment la formule taille de la récompense contre taille de la barrière s'applique-t-elle à un bouton ? Elle impose que la valeur perçue promise par le bouton égale ou dépasse l'effort perçu demandé pour l'obtenir. Reformuler un CTA générique comme « get started » en un appel à la valeur spécifique au bénéfice concret attendu, plutôt qu'à la simple action technique demandée, applique directement ce principe.

Combien d'emplacements de CTA une même page devrait-elle comporter ? Il n'existe pas de nombre fixe, mais un exemple cité (Indochino) place ses CTA en haut, au milieu et en bas de page, avec un niveau d'urgence décroissant à mesure que le visiteur avance dans sa lecture, en désignant toujours un CTA principal parmi les emplacements multiples plutôt que de les traiter comme équivalents.

Quelles tailles minimales respecter pour un bouton sur mobile ? Deux standards sont cités : 44 sur 44 pixels selon Apple, et 34 sur 26 pixels selon Microsoft, pour garantir une zone de clic suffisante au doigt sur un écran tactile, une contrainte qui s'ajoute aux considérations de contraste et de copie déjà valables sur desktop.

Un texte de bouton plus descriptif convertit-il vraiment mieux qu'un texte générique comme « Buy Online » ? Dans un cas cité sur un produit onéreux, remplacer « Buy Online » par « Price and Buy » a multiplié par dix le taux de clic, la nouvelle formulation répondant à une question implicite du visiteur (connaître le prix) avant de lui demander de s'engager. Ce résultat illustre le même principe que la formule taille de la récompense contre taille de la barrière : un texte trop générique laisse une incertitude qui freine le clic.