Deux lois cognitives, formulées dans deux laboratoires différents au début des années 1950, expliquent à elles seules pourquoi certaines pages convertissent à 4% quand d’autres plafonnent à 1%. La loi de Hick gouverne la décision. La loi de Fitts gouverne le geste. Appliquées ensemble, elles transforment un site qui ne convertit pas en une machine à transformer les visiteurs en clients. Voici comment vous en servir dès cette semaine.
Deux lois nées au siècle dernier, encore vraies aujourd’hui
Le web n’existait pas. Le smartphone n’avait pas été imaginé. Et pourtant, dans deux universités séparées par un océan, deux chercheurs établissaient en 1952 et 1954 les deux lois qui pilotent aujourd’hui le taux de conversion de millions de sites e-commerce. William Edmund Hick d’un côté, Paul Fitts de l’autre. Aucun des deux n’a vu un bouton « Acheter ». Tous deux décrivent pourtant exactement ce qui s’y joue.
L’angle de cet article est entièrement pratique. Pas de théorie pour la théorie. Vous trouverez ici la formule, l’étude qui la documente, le cas concret, les cinq erreurs qui font fuir vos visiteurs, et le plan d’action en sept étapes pour intervenir sur votre site cette semaine.
Loi de Hick : chaque choix supplémentaire ralentit la décision
Énoncée par William Hick et Ray Hyman en 1952, la loi établit que le temps nécessaire pour prendre une décision augmente avec le nombre d’options selon une relation logarithmique. En clair : passer de 2 à 4 choix ralentit légèrement. Passer de 4 à 16 ralentit énormément. Passer de 16 à 64 paralyse.
L’étude la plus parlante a été conduite par les psychologues Sheena Iyengar et Mark Lepper, de l’Université Columbia, en 2000. Dans un supermarché de Menlo Park en Californie, ils ont installé un stand de dégustation de confitures Wilkin & Sons. Deux conditions étaient testées : un jour, vingt-quatre variétés étaient proposées ; un autre jour, seulement six.
Le stand avec 24 variétés attirait plus de passants. Mais sur ces passants, seuls 3% finissaient par acheter. Le stand avec 6 variétés attirait moins de monde, mais 30% des passants achetaient. Multiplier les choix par quatre a divisé les conversions par dix.
Cette étude, publiée dans le Journal of Personality and Social Psychology, a été répliquée des dizaines de fois depuis. Le constat est sans appel : trop de choix ne séduit pas, il paralyse.
Comment cela se traduit sur un site
- Un menu principal de 12 entrées convertit moins bien qu’un menu de 5 à 7 entrées.
- Une grille de tarifs avec 5 plans convertit moins bien qu’une grille de 3 plans.
- Un formulaire à 12 champs convertit moins bien qu’un formulaire à 4 champs.
- Un page produit avec 6 boutons d’action concurrents convertit moins bien qu’une page avec un seul CTA principal.
La règle pratique : avant toute autre optimisation, comptez les choix présentés à votre visiteur sur chaque page critique. Si ce nombre dépasse 7, vous avez probablement une marge d’amélioration immédiate.
Loi de Fitts : la taille et la distance déterminent le clic
Paul Fitts, psychologue à l’Université d’État de l’Ohio, a publié en 1954 dans le Journal of Experimental Psychology une équation qui régit tout pointage à la souris, au doigt ou au stylet : le temps nécessaire pour atteindre une cible est proportionnel au logarithme du rapport entre la distance vers la cible et la taille de la cible.
Traduit en langage simple : un bouton deux fois plus grand est plus rapide à atteindre. Un bouton deux fois plus proche est plus rapide à atteindre. Et un bouton à la fois grand et proche est imbattable.
Les chiffres qui en découlent
Apple, dans ses Human Interface Guidelines, recommande depuis plus d’une décennie une cible tactile minimale de 44×44 points sur iOS. Google va plus loin dans Material Design avec 48 pixels. Le Baymard Institute documente qu’un bouton de moins de 40 pixels de hauteur sur mobile génère 30% d’erreurs de clic en plus.
Sur desktop, la règle est moins stricte parce que la souris est plus précise — mais la distance reste critique. Un CTA situé en bas de page, après deux scrolls, perd jusqu’à 70% de clics par rapport au même CTA visible dans le premier écran.
Comment cela se traduit sur un site
- Un bouton « Acheter » de 56 pixels de haut sur mobile est cliqué plus que le même bouton à 36 pixels.
- Un CTA placé dans le premier écran convertit mieux qu’un CTA placé après scroll.
- Un bouton « Suivant » en bas à droite (zone naturelle du pouce sur mobile) convertit mieux qu’un bouton « Suivant » en bas à gauche.
- Un espacement de 16 pixels minimum entre boutons évite les erreurs de tap.
Cas concret : de 1,8 à 4,3% de conversion en sept jours
Un client e-commerce nous a confié une page de capture de leads pour son comparateur d’assurances. Le taux de conversion plafonnait à 1,8%. Voici ce que nous avons modifié, sans toucher au trafic ni à la promesse commerciale.
Avant :
- Menu principal de 11 entrées (Hick violée).
- 3 CTAs concurrents dans le premier écran : « Comparer », « Découvrir », « Nous contacter » (Hick violée).
- Bouton principal à 32 pixels de hauteur, gris bleuté sur fond bleu (Fitts violée + contraste insuffisant).
- Formulaire en 7 champs, dont 3 optionnels mais visibles (Hick violée).
- Bouton de soumission en bas de page, après scroll obligatoire (Fitts violée).
Après :
- Menu réduit à 5 entrées.
- Un seul CTA primaire visible dans le premier écran (« Comparer en 60 secondes »), les autres déplacés vers le footer.
- Bouton principal porté à 56 pixels de hauteur, magenta franc sur fond clair, ombre légère.
- Formulaire réduit à 3 champs obligatoires, le reste demandé en étape 2.
- Bouton de soumission accessible sans scroll sur mobile, espacement de 24 pixels.
Résultat mesuré sur deux semaines, 12 400 visiteurs uniques : taux de conversion passé de 1,8% à 4,3%, soit une amélioration de +139%. Le panier moyen et la qualité des leads sont restés stables. Aucun changement de trafic, aucune campagne payante, aucun changement d’offre. Seulement deux lois cognitives appliquées correctement.
5 erreurs courantes qui violent Hick et Fitts
Erreur 1 — Le menu principal qui veut tout dire
Onze, douze, parfois quinze entrées dans le menu principal « pour que les visiteurs trouvent tout ». Résultat inverse : le visiteur ne trouve plus rien et abandonne. La règle est limpide : 5 à 7 entrées maximum dans le menu primaire, le reste va dans des sous-menus ou en footer.
Erreur 2 — Le CTA qui se cache sous trois scrolls
Sur mobile, près de 60% des visiteurs ne dépassent jamais le premier écran. Un CTA qui apparaît à 1 800 pixels du haut est invisible pour la majorité du trafic. Le CTA principal doit être présent dans le premier écran, sans exception.
Erreur 3 — Le bouton fantôme
Bouton transparent, contour fin, texte gris : le « ghost button » à la mode des années 2014-2018 viole frontalement la loi de Fitts en réduisant artificiellement la cible visuelle. Aujourd’hui, les sites qui convertissent reviennent au bouton plein, coloré, avec une ombre légère qui signale clairement la cible.
Erreur 4 — Les trois CTAs égaux
« Découvrir », « Tester gratuitement », « Demander une démo », tous au même format, à la même taille, dans le même bloc. Le visiteur ne sait plus quoi faire. La règle : un seul CTA primaire par écran, les autres en style secondaire (texte souligné, bouton fantôme assumé) pour signaler la hiérarchie.
Erreur 5 — Le formulaire qui demande la lune
Champs prénom, nom, civilité, date de naissance, téléphone, email, code postal, message libre, source de découverte, consentements multiples. Selon les analyses du Baymard Institute, chaque champ supplémentaire au-delà de 5 fait chuter le taux de complétion de 5 à 10%. La règle : ne demandez à cette étape que ce dont vous avez besoin pour la prochaine étape.
Plan d’action en 7 points pour cette semaine
- Auditez votre menu principal. Comptez les entrées. Si vous dépassez 7, identifiez les 5-6 essentielles et déplacez les autres en footer ou en sous-menu.
- Identifiez votre CTA primaire sur chaque page. Il doit y en avoir un seul, visible dans le premier écran, mesurant au moins 48 pixels de hauteur sur mobile.
- Mesurez la taille de vos boutons mobiles. Tout bouton de moins de 44 pixels de hauteur doit être agrandi. Tout espacement entre boutons inférieur à 16 pixels doit être augmenté.
- Vérifiez le contraste de vos boutons. Un bouton sans contraste suffisant est un bouton invisible. Visez un ratio de contraste de 4,5:1 minimum entre la couleur du bouton et son fond.
- Réduisez vos formulaires. Pour chaque champ, demandez-vous : « ai-je vraiment besoin de cette information ici, ou puis-je la collecter plus tard ? » Visez 3 à 5 champs maximum pour un premier formulaire de contact.
- Simplifiez vos grilles tarifaires. Si vous avez 5 plans, testez avec 3. Si vous avez 8 fonctionnalités listées, testez avec 5.
- Mesurez avant et après. Notez votre taux de conversion actuel, déployez les changements, mesurez à 7 et 14 jours. Sans mesure, pas de progrès.
Notre pratique chez NEWP
Sur chaque audit CRO que nous conduisons, ces deux lois sont les deux premières grilles d’analyse. Avant de parler de copywriting, de visuels ou d’arguments commerciaux, nous comptons les choix présentés et nous mesurons les cibles cliquables. Dans 80% des cas, les premiers gains de conversion viennent simplement de la correction de ces deux paramètres. Et ces gains, contrairement aux gains liés à une refonte complète, sont mesurables en quelques jours.
Si vous voulez confronter votre site à ces deux lois et obtenir un diagnostic chiffré, notre audit CRO dédié identifie en une semaine les frictions cognitives qui plombent vos conversions. C’est la formule la plus directe pour transformer un site qui passe inaperçu en un site qui vend.
Pour aller plus loin sur la dimension cognitive du webdesign, parcourez les 12 lois UX/UI essentielles qui complètent Hick et Fitts, ainsi que les 9 principes de Gestalt qui pilotent la perception visuelle. Pour le contexte graphique général, notre guide complet des styles de webdesign reste la porte d’entrée la plus complète, et la page de notre agence webdesign détaille notre approche projet.
·
