Votre bouton d’achat est-il vraiment visible ?

Question directe : votre bouton d’achat est-il visible ?

Vous allez probablement répondre :

« Oui, évidemment, il est juste là ! »

Pourtant, dans 67 % des sites e-commerce que nous analysons, le bouton d’achat obtient zéro clic sur la heatmap.

Zéro.

Pas forcément parce que les visiteurs ne souhaitent pas acheter, mais simplement parce qu’ils ne voient pas le bouton.

Dans cet article, découvrez :

  • un test de 30 secondes pour vérifier si votre bouton est réellement visible ;
  • les quatre principales raisons qui peuvent le rendre invisible ;
  • quatre corrections simples à appliquer immédiatement.

Le test du flou : vérifiez votre bouton en 30 secondes

Le test du flou est probablement le moyen le plus simple de vérifier la visibilité d’un bouton d’achat.

Comment réaliser le test ?

  1. Affichez votre page produit ou votre page d’accueil.
  2. Plissez légèrement les yeux pour rendre la page floue.
  3. Vous pouvez également dézoomer la page à 50 % avec le raccourci Ctrl - ou Cmd - sur Mac.
  4. Regardez la page pendant trois secondes.
  5. Posez-vous cette question : est-ce qu’un élément saute immédiatement aux yeux ?

Comment interpréter le résultat ?

✅ Un élément orange, rouge ou vert vif ressort immédiatement : votre bouton est probablement suffisamment visible.

❌ Toute la page semble grise, bleue ou uniforme : votre bouton manque probablement de contraste.

Exemple concret

Prenons l’exemple d’un site de cosmétiques bio :

  • bouton « Acheter » en vert pâle : #C8E6C9 ;
  • arrière-plan vert menthe : #E0F2F1.

Lors du test du flou, aucun élément ne ressortait réellement.

La heatmap confirmait le problème : aucun clic sur le bouton d’achat.

Après avoir remplacé le bouton par un orange vif #FF6F00, le site a enregistré une augmentation de 340 % des clics sur ce bouton.

Pourquoi votre bouton d’achat peut-il être invisible ?

1. La couleur du bouton se fond dans le design

Le problème

Votre bouton utilise une couleur trop proche de celles déjà présentes sur la page :

  • un bouton bleu sur un site bleu ;
  • un bouton gris sur un fond blanc ;
  • un bouton vert pâle sur un fond vert ;
  • un bouton beige sur un site aux tons naturels.

Le bouton est techniquement présent, mais il ne capte pas l’attention.

La solution

Appliquez la règle du contraste :

Votre bouton principal doit utiliser une couleur qui n’est presque jamais utilisée ailleurs sur la page.

Quelques exemples :

  • site majoritairement bleu : bouton orange ou rouge ;
  • site blanc ou gris : bouton orange vif, vert électrique ou bleu foncé ;
  • site très coloré : bouton noir ou blanc, selon la couleur de l’arrière-plan.

Les couleurs de boutons les plus efficaces

  1. Orange : #FF6F00 ou #FF9800
  2. Rouge : #F44336 ou #E53935
  3. Vert vif : #4CAF50 ou #66BB6A
  4. Bleu électrique : #2196F3 ou #1976D2

Les couleurs à éviter

  • le gris, même foncé ;
  • le bleu clair ;
  • le vert pâle ;
  • le rose pâle ;
  • toute couleur trop proche de l’arrière-plan.

Attention : il n’existe pas de couleur universellement parfaite. Le contraste avec le reste de votre design est plus important que la couleur elle-même.

2. Le bouton est trop petit

Le problème

Un bouton de 80 pixels de large sur 30 pixels de haut est souvent trop discret.

L’œil ne l’identifie pas immédiatement comme l’action principale de la page. Sur mobile, il peut également devenir difficile à sélectionner avec le doigt.

La solution

Utilisez des dimensions suffisamment importantes.

Tailles minimales recommandées

  • Ordinateur : 160 pixels de large sur 50 pixels de haut minimum.
  • Mobile : une zone cliquable d’au moins 44 × 44 pixels.
  • Taille idéale sur ordinateur : environ 200 × 60 pixels.
  • Taille idéale sur mobile : bouton sur toute la largeur disponible.

Faites le test du pouce sur mobile

Essayez de cliquer sur le bouton avec votre pouce, sans viser précisément.

  • Vous cliquez facilement : la taille est probablement correcte.
  • Vous devez viser avec précision : le bouton est trop petit.

3. Le texte du bouton est trop vague

Le problème

Certains textes n’indiquent pas clairement ce qui va se passer après le clic :

  • « En savoir plus »
  • « Cliquez ici »
  • « Voir »
  • « OK »
  • « Valider »

Le visiteur doit réfléchir avant de cliquer. Cette hésitation peut suffire à réduire le nombre de conversions.

La solution

Utilisez une formule composée d’un verbe d’action et, lorsque cela est pertinent, d’un bénéfice clair.

Exemples de boutons efficaces

  • Acheter maintenant
  • Commander ce produit
  • Réserver ma place
  • Démarrer mon essai gratuit
  • Télécharger le guide
  • Recevoir mon devis
  • Prendre rendez-vous

Formules acceptables, mais perfectibles

  • Ajouter au panier
  • Découvrir l’offre
  • S’inscrire
  • Nous contacter

Formules à éviter

  • En savoir plus
  • Cliquez ici
  • Voir
  • OK
  • Valider

Le texte doit permettre au visiteur de comprendre immédiatement ce qui se passera après son clic.

4. Le bouton est placé trop bas dans la page

Le problème

Votre bouton principal se trouve tout en bas de la page ou après une longue galerie de photos.

Une partie des visiteurs ne descendra jamais suffisamment bas pour le voir.

La solution

Le bouton principal doit idéalement apparaître au-dessus de la ligne de flottaison, c’est-à-dire dans la partie visible de la page avant le premier défilement.

Faites ce test

  1. Affichez votre page.
  2. Ne touchez ni à la souris ni au pavé tactile.
  3. Ne faites pas défiler la page.
  4. Vérifiez si le bouton principal est visible.

✅ Le bouton est visible : son emplacement est probablement correct.

❌ Le bouton n’est pas visible : il doit être remonté ou répété plus haut dans la page.

Position idéale sur une page produit

Le bouton peut être placé :

  • sous le titre du produit ;
  • sous le prix ;
  • sous les informations essentielles ;
  • à proximité des variantes et des quantités ;
  • avant une longue description ou une galerie secondaire.

Vous pouvez également répéter le bouton plus bas sur la page pour les visiteurs qui souhaitent lire l’ensemble du contenu avant de commander.

Quatre corrections à appliquer immédiatement

Ces modifications peuvent être réalisées en quelques minutes.

Correction n° 1 : changer la couleur du bouton

Sur WordPress et WooCommerce

Selon votre thème, les options peuvent se trouver dans :

  1. Apparence
  2. Personnaliser
  3. Couleurs, Boutons ou WooCommerce
  4. Modifiez la couleur du bouton principal.
  5. Publiez les modifications.

Vous pouvez, par exemple, tester l’orange #FF6F00.

Attention : le chemin exact dépend du thème ou du constructeur de pages utilisé.

Avec du CSS

Le sélecteur peut varier selon votre site, mais voici un exemple :

.btn-primary,
.single_add_to_cart_button {
    background-color: #FF6F00;
    color: #FFFFFF;
}

Sur Shopify

Selon votre thème :

  1. Rendez-vous dans Boutique en ligne.
  2. Cliquez sur Personnaliser.
  3. Ouvrez les Paramètres du thème.
  4. Sélectionnez Couleurs.
  5. Modifiez la couleur des boutons principaux.
  6. Enregistrez.

Correction n° 2 : agrandir le bouton

Vous pouvez ajouter ce CSS dans la section CSS additionnel de votre thème WordPress :

.btn-primary,
.single_add_to_cart_button {
    min-width: 200px;
    min-height: 60px;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

Pour améliorer l’affichage sur mobile :

@media screen and (max-width: 768px) {
    .btn-primary,
    .single_add_to_cart_button {
        width: 100%;
        min-width: auto;
    }
}

Le nom exact de la classe CSS dépend de votre thème. Sur WooCommerce, le bouton d’ajout au panier utilise généralement la classe .single_add_to_cart_button.

Correction n° 3 : modifier le texte du bouton

Quelques exemples :

  • « En savoir plus » devient « Acheter maintenant » ;
  • « Ajouter au panier » devient « Commander ce produit » ;
  • « Découvrir » devient « Réserver ma place » ;
  • « Contact » devient « Demander mon devis ».

Pour modifier le texte du bouton WooCommerce avec du PHP :

add_filter(
    'woocommerce_product_single_add_to_cart_text',
    function () {
        return 'Acheter maintenant';
    }
);

Ce code doit idéalement être ajouté dans le fichier functions.php d’un thème enfant ou à l’aide d’une extension permettant d’ajouter des extraits de code.

Évitez de modifier directement les fichiers du thème principal, car vos changements pourraient disparaître lors d’une mise à jour.

Correction n° 4 : remonter ou répéter le bouton

Si votre bouton se trouve trop bas :

  1. placez-le sous le titre, le prix ou les informations principales ;
  2. conservez éventuellement un deuxième bouton plus bas dans la page ;
  3. sur mobile, envisagez un bouton fixe en bas de l’écran.

Pour une page de service, vous pouvez par exemple placer un bouton :

  • dans le bandeau principal ;
  • après la présentation du service ;
  • après les témoignages ;
  • à la fin de la page.

Le visiteur dispose ainsi de plusieurs occasions de passer à l’action.

Exemples d’optimisations avant et après

Cas n° 1 : un site de vêtements pour enfants

Avant

  • bouton « Ajouter au panier » gris #9E9E9E sur fond blanc ;
  • dimensions de 100 × 35 pixels ;
  • bouton placé sous toute la galerie de photos ;
  • taux de conversion de 0,8 %.

Après

  • bouton « Acheter ce produit » orange #FF6F00 ;
  • dimensions de 220 × 65 pixels ;
  • bouton placé juste sous le prix ;
  • taux de conversion de 2,7 %.

Résultat : +237 % de conversions.

Cas n° 2 : un site de formation en ligne

Avant

  • bouton « En savoir plus » bleu #1976D2 sur un site majoritairement bleu ;
  • dimensions de 120 × 40 pixels ;
  • texte peu précis ;
  • taux de clic de 3,2 %.

Après

  • bouton « Commencer l’essai gratuit » rouge #E53935 ;
  • dimensions de 250 × 70 pixels ;
  • appel à l’action plus clair ;
  • taux de clic de 7,8 %.

Résultat : +144 % de clics.

Cas n° 3 : un site de plombier

Avant

  • bouton « Contact » vert pâle #A5D6A7 ;
  • dimensions de 90 × 30 pixels ;
  • bouton présent uniquement dans le pied de page ;
  • 12 appels par mois.

Après

  • bouton « Appeler maintenant » orange #FF9800 ;
  • dimensions de 180 × 55 pixels ;
  • bouton placé en haut à droite et maintenu visible sur mobile ;
  • lien téléphonique direct ;
  • 34 appels par mois.

Résultat : +183 % d’appels.

Utilisez une heatmap pour vérifier les résultats

Vous avez modifié votre bouton. Il faut maintenant vérifier si les visiteurs le voient et l’utilisent réellement.

Une heatmap permet de visualiser les zones sur lesquelles les internautes cliquent.

Installer Microsoft Clarity

Microsoft Clarity est un outil de heatmap gratuit.

  1. Rendez-vous sur le site de Microsoft Clarity.
  2. Créez un compte.
  3. Ajoutez votre site.
  4. Installez le script de suivi.
  5. Laissez l’outil collecter suffisamment de visites.

Selon le trafic de votre site, quelques jours ou plusieurs semaines peuvent être nécessaires pour obtenir des données réellement exploitables.

Consulter la carte des clics

Dans votre espace Clarity :

  1. ouvrez la section Heatmaps ;
  2. sélectionnez la carte des clics ;
  3. choisissez la page produit à analyser ;
  4. observez la zone correspondant au bouton d’achat.

Interpréter la heatmap

🔴 Zone rouge : de nombreux visiteurs cliquent sur cette zone.

🟠 Zone orange : le bouton reçoit des clics, mais peut encore être optimisé.

🔵 Zone bleue ou grise : le bouton reçoit peu ou pas de clics.

Attention : une zone très cliquée ne signifie pas automatiquement que le bouton est parfaitement optimisé. Il faut également suivre :

  • le taux d’ajout au panier ;
  • le taux de conversion ;
  • les abandons de panier ;
  • les clics accidentels ;
  • les performances sur ordinateur et sur mobile.

Vous n’avez pas le temps d’analyser votre site ?

Chez UXView, nous installons une heatmap sur votre site et analysons les zones sur lesquelles vos visiteurs cliquent — ou ne cliquent pas.

Vous recevez ensuite une liste de corrections classées par ordre de priorité.

Pas de promesses magiques : seulement un diagnostic précis basé sur le comportement réel de vos visiteurs.

Découvrir UXView : www.uxview.fr

Conclusion : les quatre critères d’un bouton d’achat visible

Un bouton d’achat efficace doit avoir :

  • une couleur suffisamment contrastée ;
  • une taille adaptée à l’ordinateur et au mobile ;
  • un texte clair et orienté vers l’action ;
  • une position visible sans avoir besoin de faire défiler la page.

Ces quatre critères sont respectés ? Votre bouton a de bonnes chances d’être remarqué.

Une meilleure visibilité peut entraîner davantage de clics et améliorer le taux de conversion. Le résultat exact dépendra toutefois de votre offre, de votre audience, du prix, de la qualité de la page et du trafic acquis.

L’action à réaliser maintenant

Ouvrez l’une de vos pages produits et faites immédiatement le test du flou.

Si votre bouton ne ressort pas en moins de trois secondes, commencez par augmenter son contraste.

C’est l’une des modifications les plus rapides à tester sur un site e-commerce.