CTA sticky sur mobile : faut-il fixer le bouton d’action en bas d’écran ?

Sur une page de vente coaching ou formation qui déroule huit ou neuf sections, le bouton d’action principal apparaît en général une fois dans le hero, peut-être une seconde fois en bas de page. Entre les deux, un visiteur convaincu à mi-parcours doit remonter — sur ordinateur, un simple geste de souris ; sur mobile, un vrai effort du pouce, souvent après avoir perdu sa place de lecture. Une barre de CTA « sticky », fixée en bas de l’écran et visible pendant tout le défilement, répond précisément à ce coût. Mais l’ajouter partout par réflexe est aussi une erreur fréquente : sur certaines pages, elle n’apporte rien, et sur d’autres elle gêne plus qu’elle n’aide.

Ce qu’est une barre CTA sticky, concrètement

Techniquement, c’est une bande fine — un bouton, parfois accompagné d’un prix ou d’une micro-accroche — positionnée en position: fixed en bas de l’écran, qui reste visible quel que soit l’endroit où le visiteur se trouve dans la page. Contrairement au bouton du hero, elle ne disparaît jamais du champ visuel : elle transforme un CTA qu’il faut « aller chercher » en un CTA qui est toujours là, sans jamais recouvrir le contenu au-dessus.

Le problème qu’elle résout : la zone confortable du pouce n’est pas tout l’écran

Ce n’est pas qu’une question de goût visuel : elle s’appuie sur un résultat ancien et solide de la recherche en ergonomie du mouvement. Dans une étude fondatrice publiée dans le Journal of Experimental Psychology, Fitts (1954) montre que le temps nécessaire pour atteindre une cible avec précision augmente avec la distance à parcourir et diminue avec la taille de la cible — un principe depuis appelé la loi de Fitts, qui s’applique aussi bien à une souris qu’à un pouce sur un écran tactile. Concrètement : plus un bouton est loin de la position naturelle du pouce, plus il coûte de temps et d’erreurs à atteindre, même s’il reste parfaitement visible.

Une étude plus récente précise ce mécanisme pour le cas spécifique du smartphone tenu à une main. Présentée à la conférence CHI, la recherche de Bergstrom-Lehtovirta et Oulasvirta (2014) modélise la « zone fonctionnelle du pouce » sur un écran tactile : cette zone confortable, atteignable sans changer sa prise en main, occupe une portion nettement plus réduite que l’écran entier, et se situe majoritairement dans la moitié basse. Un bouton placé en haut du hero sort de cette zone dès que le visiteur a défilé de quelques écrans — il redevient techniquement visible d’un coup d’œil, mais coûte de nouveau un effort moteur réel pour y revenir. C’est exactement ce coût qu’une barre fixée en bas d’écran supprime : elle reste dans la zone confortable du pouce à tout moment du défilement, pas seulement au premier écran.

Quand une barre sticky aide réellement

Pages longues à engagement élevé

Sur une page qui justifie sa longueur par un engagement financier ou une décision réfléchie — voir notre article sur landing page longue ou courte — le visiteur peut se décider dès la troisième ou quatrième section, bien avant d’avoir tout lu. C’est précisément le cas des templates coach & consultant, formation CPF et ebook & infoproduit : chacun déroule plusieurs écrans de preuve et de réassurance avant le formulaire, et une barre fixe évite qu’un visiteur déjà convaincu doive remonter la page pour agir.

Pages avec un formulaire en plusieurs étapes

Sur un formulaire multi-étapes, la barre sticky peut porter le bouton « étape suivante » plutôt qu’un CTA générique — elle garde alors le visiteur dans le fil de sa progression sans qu’il ait besoin de localiser le bouton à chaque écran, ce qui compte double sur les petits écrans tactiles.

Quand elle n’apporte rien, ou nuit

Pages courtes à un seul écran

Sur une page d’inscription à une liste d’attente SaaS ou de capture newsletter, le bouton principal est déjà visible dès l’arrivée, sans le moindre défilement. Ajouter une barre fixe ne raccourcit aucune distance réelle : elle duplique un CTA déjà atteignable, occupe une portion permanente de l’écran et peut même donner une impression de pression commerciale disproportionnée par rapport à l’engagement demandé — le même écueil que celui décrit dans notre article sur les popups exit-intent trop agressifs sur une offre gratuite.

Quand elle recouvre du contenu utile en bas d’écran

Une barre mal dimensionnée peut masquer les derniers mots d’un paragraphe, un lien de FAQ, ou pire, entrer en conflit avec le clavier tactile qui s’ouvre au moment de remplir un champ de formulaire — recouvrant alors le champ lui-même ou le bouton de validation natif du clavier. Sur les pages avec formulaire, la barre doit se masquer automatiquement dès qu’un champ prend le focus.

Bonnes pratiques de conception

1. Restez compact : une bande de 50 à 60 pixels de hauteur suffit — au-delà, elle mange une part trop importante de l’écran visible sur les modèles les plus petits.
2. Un seul bouton, pas deux : une barre avec un CTA principal et un lien secondaire (« en savoir plus ») réintroduit le paradoxe du choix au moment où l’action doit être la plus simple.
3. Masquez-la pendant la saisie : dès qu’un champ de formulaire prend le focus, cachez la barre pour laisser toute la place au clavier tactile et au champ lui-même.
4. Adaptez le texte au contexte, pas seulement au CTA du hero : « Voir le programme » en haut de page peut devenir « Réserver mon appel » une fois passées les preuves et la garantie — voir notre guide sur les formules qui accrochent pour calibrer ce type de micro-copie.
5. N’affichez le prix que si l’ancrage est déjà fait : montrer un tarif dans la barre avant que le visiteur ait vu la valeur de l’offre peut jouer contre vous — voir notre article sur l’effet d’ancrage du prix.

Faut-il la tester avant de la généraliser ?

Le seul moyen fiable de trancher pour votre propre page reste la mesure, pas l’intuition : un enregistrement de session révèle en quelques dizaines de visites si les pouces remontent effectivement chercher le CTA du hero ou abandonnent avant — voir notre guide sur les heatmaps et enregistrements de session. Si le volume de trafic le permet, un A/B test entre version avec et sans barre sticky donne une réponse encore plus nette, propre à votre offre et à votre audience plutôt qu’à une recommandation générique.

Les 10 templates LanderKit n’intègrent pas tous une barre sticky par défaut, et c’est volontaire : elle est activée sur les pages longues à fort engagement, absente sur les pages courtes où le CTA du hero suffit déjà. Nos 10 templates (89 € l’unité, 229 € le pack complet) sont livrés avec ce type de détail déjà tranché, avec une démo mobile de chacun avant tout achat.