Ergonomie web : 9 erreurs UX qui freinent vos conversions, et comment les corriger

Une erreur UX est un choix de conception qui oblige le visiteur à fournir plus d'efforts que prévu pour obtenir ce qu'il est venu chercher. En ergonomie web, ces erreurs se voient rarement : les pages se chargent, les boutons répondent, le trafic reste stable, et pourtant les demandes de devis et les ventes ne décollent pas. La liste des erreurs de conception web les plus tenaces publiée par Nielsen Norman Group montre que beaucoup de ces problèmes traînent depuis des décennies.

Ce guide passe en revue neuf erreurs d'ergonomie qui font baisser les conversions des sites d'entreprise. Cinq sont des classiques : CTA, hiérarchie, navigation, blocs de texte et mobile. Quatre manquent dans la plupart des listes plus anciennes : formulaires trop longs, lenteur aux clics (INP), chats et pop-ups envahissants, et accessibilité, désormais encadrée par la loi en France et dans l'UE.

Pour chaque erreur, vous trouverez ce qu'elle coûte et comment la corriger. Les chiffres viennent de Baymard, WebAIM, Google et NN/g, liens à l'appui.

Les petits problèmes d'utilisabilité coûtent cher parce qu'ils frappent le visiteur au moment où il décide, et que personne ne les signale. Un visiteur qui ne comprend pas à quoi sert un bouton n'ouvre pas de ticket. Il hésite, ouvre l'onglet d'un concurrent et vous oublie. Votre outil d'analyse note un rebond sans motif, et la perte passe pour un problème de trafic alors qu'elle vient de la conception.

Les recherches du Baymard Institute sur l'abandon de panier situent le taux d'abandon moyen documenté à 70,22%, sur la base de 50 études. Selon la même source, un grand site e-commerce moyen pourrait augmenter son taux de conversion de 35,26% en revoyant uniquement la conception de son tunnel de commande. C'est un gain relatif : un taux de conversion de 3% passerait à environ 4%.

Pourquoi ces problèmes restent invisibles

• Rien ne casse, donc la surveillance des erreurs reste au vert.
• Les visiteurs partent sans se plaindre.
• Pris isolément, chaque problème paraît mineur.

La confiance est la première touchée

Une interface confuse fait douter de l'entreprise. Dans l'enquête de Baymard, 19% des acheteurs américains ayant abandonné une commande pour une autre raison que la simple navigation ont déclaré ne pas faire confiance au site pour leurs données de carte bancaire. Ce jugement se forme avant la lecture de vos tarifs. Pour l'effet sur le référencement, lisez notre article sur l'impact d'une mauvaise UX sur le SEO et la confiance.

Un appel à l'action faible fait partie des erreurs UX les plus courantes, justement parce qu'il passe sans problème en revue de maquette. Le bouton respecte la charte et se voit bien. Le problème, c'est le libellé : "Envoyer", "En savoir plus" ou "Commencer" ne dit pas au visiteur ce qui se passe après le clic. Face à trois boutons de même poids, certains visiteurs choisissent de partir.

À quoi ressemble un CTA faible

• Le libellé décrit une action au lieu d'un résultat ("Envoyer" au lieu de "Recevoir mon devis").
• Plusieurs actions ont le même poids visuel sur un même écran.
• Le CTA arrive avant que la page ait donné une raison de cliquer.
• Rien près du bouton ne rassure sur le prix, l'engagement ou les données.

Comment corriger

Donnez à chaque page une seule action principale et rendez tous les autres liens visuellement secondaires. Formulez le libellé comme le résultat que le visiteur attend, et ajoutez à côté une ligne rassurante, par exemple "Réponse sous un jour ouvré", si c'est vrai pour votre offre. Sur les pages longues, répétez le CTA principal après chaque grand bloc de contenu.

Testez les changements de texte un par un. Notre guide pour améliorer le taux de conversion d'une landing page explique comment structurer ces tests.

Une hiérarchie défaillante apparaît quand chaque élément de la page réclame l'attention avec la même intensité. Titres, listes de fonctionnalités, badges, bannières et boutons ont des tailles et des couleurs proches, et l'œil ne sait pas par où commencer. Le visiteur cherche où regarder au lieu de lire votre offre, et beaucoup partent avant l'argument qui les aurait convaincus.

Les signes d'une hiérarchie cassée

• Le message principal n'est pas évident dans les premières secondes.
• Les détails secondaires, comme les logos clients ou les récompenses, ressortent autant que le titre.
• Plusieurs couleurs servent à mettre en avant, donc aucune ne ressort vraiment.

Comment corriger

La définition de la hiérarchie visuelle donnée par NN/g cite trois leviers : la couleur et le contraste, la taille, et le regroupement. Réservez la taille au message le plus important, le contraste à l'action principale, et utilisez l'espacement pour regrouper ce qui va ensemble. Puis faites le test des yeux plissés : floutez la capture d'écran, le titre et le CTA doivent encore ressortir.

Fixez l'ordre des informations avant d'ouvrir un outil de design : un court plan de contenu par page, classé selon les besoins du visiteur, règle l'essentiel dès le wireframe.

Une navigation confuse pénalise chaque visite, car les gens se servent du menu pour juger si votre site propose ce qu'ils cherchent. Des libellés en jargon interne, des méga-menus de quarante liens et des pages de services accessibles uniquement depuis l'accueil forcent le visiteur à deviner. Chaque erreur coûte un clic et un peu de confiance, et deux ou trois suffisent à clore la visite.

Là où la navigation échoue le plus souvent

• Les libellés suivent votre organigramme au lieu des mots que les visiteurs tapent dans Google.
• Trop d'entrées de premier niveau, sans regroupement évident.
• Aucun retour simple après un mauvais chemin.
• Des menus mobiles qui enterrent le lien dont la plupart des gens ont besoin, souvent Contact ou Tarifs.

Comment corriger

Employez les mots de vos clients, tirés des requêtes de Google Search Console et des questions que vos commerciaux entendent le plus. Gardez peu d'entrées de premier niveau et laissez l'action principale (contact, devis ou démo) visible partout. Si vous restructurez un site, notre guide pour construire l'arborescence d'un site web montre comment organiser les pages avant le design.

Les longs paragraphes compacts sont une erreur de conception UX, parce que les internautes survolent les pages au lieu de les lire. Dans l'analyse de NN/g sur le peu que lisent les utilisateurs, les visiteurs avaient le temps de lire au maximum 28% des mots d'une page moyenne, et plus probablement 20%. Cette étude date de 2008, et les travaux d'oculométrie plus récents sur le schéma de lecture en F vont dans le même sens.

Ce dont ont besoin les lecteurs pressés

• Des intertitres qui disent ce que contient la section.
• Des paragraphes courts qui commencent par l'idée principale.
• Des listes pour les étapes, les options et les comparaisons.
• Les faits importants, comme les fourchettes de prix, les délais et les garanties, séparés du corps du texte.

Comment corriger

Réécrivez la première phrase de chaque section pour qu'elle réponde à elle seule à l'intertitre. Limitez les paragraphes à trois ou quatre phrases et déplacez les caractéristiques techniques dans des tableaux. Sur téléphone, un paragraphe raisonnable sur ordinateur remplit souvent tout l'écran.

Couper n'est pas toujours la solution : certains acheteurs veulent du détail. Une bonne structure leur permet de le trouver et laisse les autres le sauter.

La plupart des visites se font désormais sur téléphone. Les données de StatCounter par plateforme attribuent aux appareils mobiles environ 59% du trafic web mondial en septembre 2026, contre environ 39% pour l'ordinateur. Beaucoup de sites sont pourtant encore conçus sur un grand écran puis réduits après coup : mises en page, zones tactiles et formulaires fonctionnent sur l'écran du designer et échouent sur le téléphone du visiteur.

Les défauts du desktop-first sur petit écran

• Des zones tactiles trop petites ou trop rapprochées.
• Des en-têtes fixes, bandeaux cookies et boutons de chat qui couvrent la moitié de l'écran.
• Des interactions au survol sans équivalent tactile.
• Des formulaires qui ouvrent le mauvais clavier pour les champs e-mail ou téléphone.

Comment corriger

Concevez d'abord la version mobile de vos principales pages de conversion, puis élargissez-la pour les grands écrans. Le critère de succès 2.5.8 des WCAG 2.2 fixe une taille de cible minimale de 24 par 24 pixels CSS, un plancher raisonnable pour les boutons et les liens. Utilisez les bons types de champs pour afficher le bon clavier. Testez sur un Android de milieu de gamme en réseau mobile, pas seulement sur un iPhone récent en Wi-Fi.

Dans notre démarche de design UX/UI, le parcours mobile est traité comme un parcours principal, pas comme une adaptation.

C'est dans le formulaire que l'intention devient un contact ou une vente, et beaucoup de sites y demandent bien plus que nécessaire. L'étude de Baymard sur les champs des formulaires de commande a constaté qu'en 2024 un tunnel de commande moyen comptait 11,3 champs, alors que la plupart des sites n'en ont besoin que de 8. Chaque champ en trop est une raison d'arrêter, surtout s'il semble sans rapport avec la demande.

Les frictions les plus courantes

• Demander ce qui peut attendre la première réponse, comme la taille de l'entreprise sur un simple formulaire de contact.
• La création de compte obligatoire, citée comme motif d'abandon par 18% des acheteurs américains dans l'enquête de Baymard (hors visiteurs qui ne faisaient que regarder).
• Des messages d'erreur qui n'apparaissent qu'après l'envoi et ne disent pas quoi corriger.
• Un texte indicatif (placeholder) à la place des libellés, qui disparaît dès que le visiteur commence à taper.

Comment corriger

Listez chaque champ et demandez-vous qui utilise la réponse, et à quel moment. Si personne n'en a besoin avant le premier échange, supprimez-le. Le RGPD va dans le même sens avec son principe de minimisation des données. Gardez les libellés visibles au-dessus des champs, validez la saisie en direct et facilitez le remplissage automatique avec les bons attributs autocomplete. En B2B, un nom, un e-mail et une question ouverte suffisent souvent. L'analyse des formulaires dans un audit CRO montre quel champ provoque le plus d'abandons, pour que vous corrigiez d'abord le pire.

Une page peut se charger vite et sembler pourtant cassée si elle réagit lentement quand on appuie sur un bouton ou qu'on ouvre un menu. Google mesure ce délai avec l'Interaction to Next Paint (INP), qui a remplacé le First Input Delay parmi les Core Web Vitals le 12 mars 2024. Selon la documentation INP de web.dev, un INP de 200 millisecondes ou moins est bon et tout ce qui dépasse 500 millisecondes est mauvais, mesuré au 75e centile des visites réelles.

Pourquoi l'INP est un problème de conversion

Quand un appui ne produit aucune réaction visible, les gens appuient de nouveau, ouvrent le mauvais élément ou pensent que le site est figé. Dans une étude de cas publiée sur web.dev, la plateforme de voyage redBus a amélioré de 72% l'INP de sa page de recherche et a constaté une hausse de 7% de ses ventes globales.

Les causes fréquentes

• Du JavaScript lourd qui s'exécute sur le thread principal pendant les interactions.
• Des gestionnaires de balises, outils de chat et scripts d'A/B testing qui se disputent le même thread.
• Des filtres et champs de recherche qui redessinent toute la page à chaque frappe.

Comment corriger

Consultez l'INP dans le rapport Core Web Vitals de Google Search Console ou dans les données terrain de PageSpeed Insights. Affichez un retour visuel immédiat à chaque appui, même avant la fin du traitement. Découpez les tâches longues, différez les scripts non essentiels et faites le tri dans les balises tierces chaque trimestre. Notre guide pour créer un site web haute performance détaille l'aspect technique.

Les surcouches se sont multipliées depuis que les outils de chat IA sont devenus faciles à installer. Une fenêtre d'inscription à la newsletter dès l'arrivée, un bandeau cookies et un chat qui s'ouvre tout seul avec un message d'accueil peuvent couvrir l'essentiel d'un écran de téléphone avant que le visiteur ait lu une ligne. Chacun améliore peut-être sa statistique, mais la page convertit moins bien, car le contenu reste caché.

Ce que recommande Google

Les consignes de Google Search Central sur les interstitiels intrusifs préviennent que les fenêtres intrusives gênent les moteurs de recherche comme les visiteurs. Google recommande de petites bannières plutôt que des surcouches plein écran. Les fenêtres obligatoires, comme la vérification de l'âge, font exception.

Le bandeau cookies et la CNIL

Dès que vous utilisez des cookies non essentiels, le bandeau est obligatoire, mais il n'a pas à bloquer la page. La CNIL demande que refuser soit aussi simple qu'accepter, avec un bouton "Tout refuser" aussi visible que "Tout accepter". Un bandeau compact et honnête respecte la règle et gêne moins qu'une grande fenêtre centrée.

Comment corriger

• N'ouvrez pas de chat ni de fenêtre modale au chargement de la page. Attendez un signe d'intérêt, comme la profondeur de défilement, ou laissez le visiteur l'ouvrir lui-même.
• Gardez le bouton de chat fermé petit, loin du CTA principal et du bas de l'écran sur mobile.
• N'affichez qu'une surcouche à la fois et retenez qu'un visiteur l'a déjà fermée.
• Faites en sorte que chaque surcouche se ferme d'un seul appui et au clavier.

Un assistant IA peut qualifier des prospects, à condition d'attendre qu'on le sollicite. Voir notre article sur l'ajout d'un agent IA à votre site.

Les problèmes d'accessibilité sont des problèmes d'UX qui ont aussi un volet juridique. Un texte peu contrasté, des champs de formulaire sans libellé et des boutons sans nom rendent le site plus difficile à utiliser pour tout le monde, y compris pour les personnes qui n'utilisent jamais de lecteur d'écran. Le rapport WebAIM Million 2026 a relevé des erreurs WCAG 2 détectables sur 95,9% du million de pages d'accueil les plus visitées, avec en moyenne 56,1 erreurs par page.

Les erreurs les plus fréquentes

• Texte peu contrasté, sur 83,9% des pages d'accueil.
• Texte alternatif manquant sur les images, sur 53,1%.
• Libellés de champs de formulaire manquants, sur 51%.

Deux d'entre elles touchent directement la conversion : boutons illisibles et formulaires que les lecteurs d'écran n'annoncent pas.

L'échéance européenne est passée

L'European Accessibility Act (directive 2019/882) s'applique depuis le 28 juin 2025. La France l'a transposée par la loi du 9 mars 2023 et son décret d'application d'octobre 2023. Le texte couvre le commerce en ligne et plusieurs autres services destinés aux consommateurs. Les microentreprises qui fournissent des services, c'est-à-dire moins de 10 salariés et au plus 2 millions d'euros de chiffre d'affaires annuel ou de total de bilan, en sont exemptées. Si vous vendez en ligne à des consommateurs européens, l'accessibilité relève désormais aussi de la conformité.

Le RGAA (référentiel général d'amélioration de l'accessibilité) s'applique déjà aux sites publics et à certaines grandes entreprises. C'est aussi la grille d'audit la plus utilisée en France, utile même si vous n'y êtes pas soumis.

Comment corriger

Lancez un outil de test automatique sur vos principaux gabarits, puis parcourez le tunnel de conversion au clavier seul et avec un lecteur d'écran. Corrigez d'abord le contraste et les libellés de formulaire : ils coûtent peu à changer et concernent le plus de monde. Notre guide sur l'accessibilité web et le RGAA détaille les exigences des WCAG.

Tous les problèmes n'ont pas la même urgence. Le tableau ci-dessous reprend la grille de priorités que nous utilisons pour les sites d'entreprise, d'après l'impact habituel sur la conversion et l'effort qu'une correction demande en général. C'est un jugement et non une mesure, alors ajustez-le avec vos propres données : un problème sur votre page de conversion la plus visitée passe toujours avant un problème sur une page que peu de gens voient.

Les erreurs UX font baisser les conversions en ajoutant de l'effort aux moments où le visiteur décide s'il continue. Un libellé flou suffit rarement à perdre un client à lui seul. Les pertes viennent de l'accumulation : un menu lent, puis une page sans étape suivante évidente, puis un formulaire de douze champs. Chaque étape fait perdre une part des visiteurs, et ces parts se multiplient sur l'ensemble du tunnel.

Un exemple de tunnel simple

Prenez 1 000 visiteurs sur une page de services. Si 40% cliquent vers la page contact et que 20% d'entre eux envoient le formulaire, vous obtenez 80 contacts. Améliorez chaque étape d'un quart, à 50% et 25%, et le même trafic produit 125 contacts. Ensemble, ces deux changements modestes apportent 56% de contacts en plus, sans visiteur supplémentaire.

Où regarder dans vos données

• Les pertes entre deux étapes de l'entonnoir.
• Les pages très visitées qui envoient peu de clics vers l'étape suivante.
• Les clics de rage et appuis répétés dans les enregistrements de session.
• Les abandons champ par champ.

Pour fixer des objectifs, comparez vos chiffres à des fourchettes réalistes. Notre article sur le taux de conversion moyen donne des repères, et notre guide des indicateurs UX explique quels signaux suivre en plus des conversions. Pour une vue d'ensemble, lisez notre guide de l'optimisation des conversions.

La plupart des erreurs UX coûtent moins cher à prévenir qu'à corriger. Changer un libellé de navigation ou un champ de formulaire au stade du wireframe prend quelques minutes, alors que le même changement après la mise en ligne peut exiger de nouvelles maquettes, du développement, des tests et une nouvelle mise en production. C'est pourquoi les équipes rigoureuses valident la structure et les parcours avant le design visuel, puis testent à nouveau le parcours de conversion avant le lancement, sur de vrais appareils et avec le vrai contenu.

Ce que couvre une revue avant lancement

• Les parcours, de chaque source de trafic jusqu'à la conversion.
• La hiérarchie du contenu, validée page par page.
• Chaque champ de formulaire, justifié.
• Les Core Web Vitals, dont l'INP, en préproduction.
• Des tests au clavier et au lecteur d'écran.

Comment travaille Vezert

Chez Vezert, la structure et l'ordre du contenu passent avant le design visuel. L'IA accélère l'analyse (cartes de chaleur, composants incohérents), mais designers et développeurs tranchent. La même revue s'applique que nous créions une landing page, un site corporate ou un portail web. Les landing pages démarrent à €1 500, les sites corporate à €4 500 et les portails web à €9 000, et la page tarifs détaille le contenu de chaque formule. Vous pouvez voir des projets livrés dans notre portfolio.

Passez cette checklist sur chaque page d'un parcours de conversion : l'accueil, les landing pages, les pages de services, les tarifs et le formulaire de contact ou le tunnel de commande. Vérifiez chaque page d'abord sur téléphone, puis sur ordinateur. Chaque case non cochée signale une friction, et la liste peut servir de brief à vos designers.

1. Une seule action principale claire

• Y a-t-il une étape suivante évidente ?
• Le CTA dit-il ce qui se passe après le clic ?

2. Une hiérarchie visible

• Le message principal est-il clair en quelques secondes ?
• Le titre et le CTA passent-ils le test des yeux plissés ?

3. Une navigation prévisible

• Les libellés du menu reprennent-ils les mots des clients ?
• Peut-on atteindre le contact ou les tarifs depuis chaque page ?

4. Un contenu facile à survoler

• La première phrase de chaque section répond-elle à son intertitre ?
• Les faits clés sont-ils séparés du corps du texte ?

5. Un mobile à la hauteur

• Les zones tactiles font-elles au moins 24 par 24 pixels CSS ?
• Le parcours fonctionne-t-il sans zoom ?

6. Des formulaires courts

• Chaque champ est-il nécessaire avant le premier échange ?
• Les erreurs s'affichent-elles en direct et expliquent-elles quoi corriger ?

7. Des réactions rapides

• L'INP terrain est-il à 200 ms ou moins sur mobile comme sur ordinateur ?
• Chaque appui produit-il un retour immédiat ?

8. Un écran dégagé

• Le contenu est-il visible à l'arrivée, sans fenêtre modale ni chat qui s'ouvre seul ?
• Le bandeau cookies propose-t-il "Tout refuser" aussi clairement que "Tout accepter" ?

9. L'accessibilité de base

• Le texte respecte-t-il les exigences de contraste des WCAG ?
• Tous les champs ont-ils un libellé et tous les boutons un nom ?

Corrigez d'abord les cases non cochées sur votre page la plus visitée, puis descendez dans la liste des pages.

Les erreurs UX courantes sont rarement un seul gros échec. Ce sont plutôt une série de petites décisions prises sans vérifier comment se comportent les vrais visiteurs, et elles s'additionnent tout au long du tunnel. Si vous n'avez le temps que pour trois corrections ce trimestre, commencez par le CTA principal de votre page la plus visitée, réduisez le nombre de champs de votre formulaire principal, puis vérifiez l'INP et les surcouches sur mobile. Ces changements coûtent peu et touchent la plupart de vos visiteurs.

Ensuite, attaquez la hiérarchie, la navigation et l'accessibilité sur les pages qui comptent le plus. Pour les chantiers plus lourds, notre guide sur ce qu'il faut attendre d'une collaboration avec des web designers explique chaque étape. Vous pouvez aussi contacter notre équipe pour passer en revue votre parcours de conversion avec nous.