Loi de Fitts : pourquoi la taille et la position du bouton CTA changent tout sur mobile

Un visiteur convaincu par votre titre et votre offre peut encore rater sa conversion pour une raison qui n'a rien à voir avec le texte : le bouton était trop petit, trop loin, ou coincé entre deux autres éléments cliquables. C'est un problème de mouvement, pas de persuasion, et il est mesuré depuis 1954 par la loi de Fitts. Ce guide explique ce que dit cette loi, ce que les études sur l'usage du mobile à une main en tirent concrètement pour la « zone de pouce », et comment appliquer ces deux résultats à la taille et à la position d'un CTA sur une landing page.

La loi de Fitts, en une phrase

Le psychologue Paul Fitts a montré, dans une étude devenue une référence classique de l'ergonomie (Fitts, 1954, Journal of Experimental Psychology), que le temps nécessaire pour atteindre une cible avec un geste dépend de deux facteurs seulement : la distance à parcourir et la taille de la cible. Plus la cible est loin, plus le geste prend de temps ; plus elle est petite, plus il faut de précision — donc de temps — pour la toucher sans la manquer. Le résultat tient en une intuition simple, mais ses conséquences pour un bouton d'action sont directes : un CTA proche du pouce et suffisamment large se clique plus vite et avec moins d'erreurs qu'un CTA lointain ou minuscule, même si le texte du bouton est identique.

Sur un écran d'ordinateur avec une souris, l'effet reste mesurable mais reste discret : la distance entre deux points d'un écran est rarement énorme et le curseur se déplace vite. Sur mobile, où le pointeur est un pouce qui doit à la fois tenir le téléphone et atteindre l'écran, l'effet devient beaucoup plus visible — et c'est là que la plupart des landing pages perdent des clics sans s'en rendre compte.

La zone de pouce : ce que les études sur le mobile à une main ont ajouté

La loi de Fitts date d'avant le smartphone ; elle a été complétée par des études spécifiques à l'usage tactile. La plus citée, menée par Parhi, Karlson et Bederson (MobileHCI, 2006), a mesuré la vitesse et le taux d'erreur de sujets tapant des cibles de tailles variées avec le pouce, sur un téléphone tenu à une main. Conclusion principale : en dessous d'environ 1 cm × 1 cm, le taux d'erreur augmente nettement, et l'effet s'aggrave encore quand la cible est excentrée par rapport à la zone de confort naturelle du pouce.

Sur un téléphone tenu à une main droite, cette zone de confort dessine grossièrement un arc de cercle : facile en bas et au centre de l'écran, plus difficile en haut et sur les bords opposés à la main qui tient l'appareil — un visiteur gaucher ou droitier n'a pas exactement la même zone, ce qui plaide pour centrer les CTA plutôt que les coller à un bord. Trois zones reviennent dans la littérature UX qui a suivi ces travaux :

• Zone facile — le tiers inférieur de l'écran, atteignable sans changer sa prise en main. C'est là qu'un CTA sticky en bas d'écran tire le meilleur de la zone de pouce, comme détaillé dans notre article sur le CTA sticky mobile.
• Zone d'étirement — le tiers médian, atteignable en tendant le pouce, avec une précision réduite : c'est la zone la plus tolérante à une taille de bouton légèrement généreuse, mais pas la plus rapide.
• Zone difficile — le haut de l'écran, qui oblige souvent à changer de prise ou à utiliser l'autre main. Un CTA unique placé uniquement là, sans répétition plus bas dans la page, part avec un désavantage mesurable.

Tailles minimales : ce que recommandent Apple et Google

Les guides d'interface d'Apple et de Google traduisent directement ces résultats en recommandations chiffrées, cohérentes avec le seuil observé par Parhi, Karlson et Bederson : Apple recommande une cible tactile d'au moins 44 × 44 points, Google une cible d'au moins 48 × 48 dp — dans les deux cas, l'équivalent grossier du centimètre carré identifié comme seuil d'erreur. En dessous, le taux de clics manqués (un doigt qui touche à côté du bouton, ou qui touche un élément voisin par erreur) augmente sans que rien dans les statistiques d'analytics ne le signale clairement : ces échecs n'apparaissent presque jamais comme un événement suivi, ils se traduisent juste par un taux de conversion plus bas que ce que le reste de la page laissait espérer.

Ce que ça donne concrètement sur un CTA

• Hauteur du bouton — au moins 44 à 48 px sur mobile, padding compris, pas seulement la zone visuellement colorée : un bouton qui a l'air assez grand mais dont la zone cliquable réelle est plus petite que son apparence reproduit le même problème.
• Espacement autour du CTA — une marge suffisante avec les éléments voisins cliquables (liens de menu, cases à cocher, icônes de réseaux sociaux) réduit le risque de clic sur la mauvaise cible, un effet que la loi de Fitts englobe sous le terme de « cibles concurrentes ».
• Largeur pleine sur mobile — un bouton qui occupe toute la largeur utile de l'écran maximise à la fois la taille de la cible et sa position centrale, dans la zone atteignable quelle que soit la main utilisée.
• Position verticale répétée — sur une page qui déroule plusieurs écrans, répéter le CTA principal en bas de chaque section importante raccourcit la distance moyenne à parcourir, plutôt que de miser sur un unique bouton en haut de page.

Les erreurs les plus fréquentes

• Bouton dimensionné pour desktop, copié tel quel sur mobile — un CTA qui paraît confortable sur un écran de 15 pouces devient minuscule ramené à un écran de 6 pouces sans ajustement responsive dédié.
• CTA unique tout en haut de page — pratique pour le design, coûteux pour la conversion : le visiteur qui se laisse convaincre après avoir lu l'argumentaire doit remonter tout l'écran pour agir.
• Icônes ou liens secondaires trop proches du CTA principal — un bouton de partage, une icône de fermeture ou un lien de navigation collé au bouton d'action crée une zone de cibles concurrentes où le pouce peut se tromper.
• Zone cliquable plus petite que la zone visuelle — un padding insuffisant en CSS fait qu'un bouton visuellement large reste, techniquement, une petite cible tactile.
• Position en zone difficile sans alternative — un CTA placé uniquement en haut de l'écran sur une page longue, sans version sticky ni répétition, ignore la zone de pouce plutôt que de s'appuyer dessus.

Appliquer ces deux résultats à une landing page réelle

Les templates LanderKit sont livrés en composants React/Tailwind avec des tailles de bouton déjà conformes aux seuils tactiles recommandés, mais la loi de Fitts reste utile pour ajuster une page en fonction de son contenu réel. Sur une page de capture comme le template newsletter ou liste d'attente SaaS, où le formulaire est court et l'action attendue immédiate, un CTA large et centré dès le premier écran suffit souvent. Sur une page plus longue comme formation certifiante ou estimation immobilière, où l'argumentaire se déroule sur plusieurs sections, répéter le bouton en bas de chaque bloc convaincant — et pas seulement dans le hero — réduit la distance moyenne entre le moment où le visiteur est prêt à agir et le moment où il trouve le bouton pour le faire. Cette logique complète directement les principes détaillés dans notre article sur la conception mobile-first, et s'articule bien avec le choix de couleur du bouton abordé dans notre guide sur la couleur du CTA — le contraste attire l'œil, la taille et la position déterminent si le pouce y arrive facilement.

Avant de retoucher un CTA existant, un test rapide suffit souvent à repérer le problème : ouvrez la page sur votre propre téléphone, tenez-le à une main comme le ferait un visiteur pressé, et essayez d'atteindre le bouton sans changer de prise. Si le pouce doit s'étirer ou si le geste demande de la précision, la conversion en paie le prix — indépendamment de la qualité du texte au-dessus du bouton. Les 10 templates LanderKit (89 € l'unité, 229 € le pack complet) livrent une base déjà calibrée sur ces seuils, pour se concentrer sur l'offre et le texte plutôt que sur la taille en pixels d'un bouton.