Ergonomie mobile e-commerce : 7 erreurs qui coûtent des commandes

Les erreurs d'ergonomie mobile qui coûtent le plus de commandes sont connues : pages lentes, zones tactiles trop petites, formulaires qui affichent le mauvais clavier, messages d'erreur vagues et éléments qui bougent pendant le chargement. Selon le Baymard Institute, 75 % des grands sites e-commerce offrent une expérience mobile seulement « médiocre ». Cet article liste les 7 erreurs à chercher en priorité sur votre site, avec pour chacune la correction à demander à votre équipe.

Pourquoi l'ergonomie mobile pèse-t-elle autant sur vos ventes ?

Parce que c'est là que se trouve la majorité de vos visiteurs. Baymard cite un benchmark de Dynamic Yield selon lequel le mobile représente environ les trois quarts des visites des sites marchands. Dans son évaluation 2026 de plus de 150 grands sites, Baymard classe 75 % d'entre eux en ergonomie mobile « médiocre », un seul en « bonne », aucun en « parfaite ». Baymard précise que les sites plus petits, absents de ce classement, risquent de faire moins bien.

Avec la formule chiffre d'affaires = trafic × taux de conversion × panier moyen, l'équation est vite posée : si la majorité de votre trafic arrive sur un parcours mobile dégradé, c'est votre taux de conversion global qui en paie le prix.

Erreur 1 : des pages trop lentes

La vitesse est le premier critère. Une étude menée par 55 et Deloitte pour Google, sur 37 sites de marques européennes et américaines et plus de 30 millions de sessions, a montré qu'une amélioration de 0,1 seconde de la vitesse sur mobile augmentait le taux de conversion de 8,4 % pour les sites de vente au détail.

Pour suivre la vitesse, Google publie trois seuils, les Core Web Vitals, à respecter pour au moins 75 % des pages vues :

Indicateur	Ce qu'il mesure	Seuil « bon »
LCP (Largest Contentful Paint)	Affichage du contenu principal	2,5 secondes ou moins
INP (Interaction to Next Paint)	Réactivité après un appui	200 millisecondes ou moins
CLS (Cumulative Layout Shift)	Stabilité de la mise en page	0,1 ou moins

Vérifiez ces indicateurs sur vos pages clés (accueil, catégorie, fiche produit, panier) dans la Search Console ou PageSpeed Insights, en regardant les données des vrais visiteurs plutôt que les seuls tests de laboratoire. Notre article sur la vitesse mobile et les Core Web Vitals détaille les corrections.

Erreur 2 : des éléments qui bougent sous le doigt

Un bandeau promotionnel qui apparaît après le chargement, une image sans dimensions réservées, une bannière de consentement qui pousse le contenu : l'acheteur vise « Ajouter au panier » et touche autre chose. C'est ce que mesure le CLS. Réservez l'espace de chaque image et de chaque bloc chargé après coup, et affichez les bandeaux en superposition plutôt qu'en insertion dans la page.

Erreur 3 : des zones tactiles trop petites ou trop serrées

Un doigt n'est pas un curseur de souris. La norme d'accessibilité WCAG 2.2 (critère 2.5.8, niveau AA) demande des cibles tactiles d'au moins 24 × 24 pixels CSS, ou un espacement suffisant autour des cibles plus petites. C'est un minimum, pas un objectif : pour les boutons qui font vendre (ajout au panier, sélection de taille, passage au paiement), visez nettement plus grand.

Les zones à vérifier en priorité :

sélecteurs de taille et de couleur sur la fiche produit ;
boutons « + » et « - » de quantité dans le panier ;
liens du pied de page et filtres de catégorie, souvent collés les uns aux autres ;
croix de fermeture des fenêtres surgissantes.

Erreur 4 : le mauvais clavier dans les formulaires

Sur mobile, chaque saisie coûte. Afficher un clavier alphabétique pour un code postal ou un numéro de carte oblige l'acheteur à changer de clavier à chaque champ. Baymard recommande d'utiliser les attributs HTML type, inputmode et pattern pour afficher le clavier adapté :

clavier numérique pour le code postal, le téléphone, le numéro de carte et le cryptogramme ;
clavier e-mail (avec @ visible) pour l'adresse e-mail ;
correction automatique désactivée pour les noms, adresses et e-mails ;
majuscule automatique désactivée pour l'e-mail.

Combinez ces réglages avec l'autocomplétion du navigateur et la réduction du nombre de champs, détaillée dans notre article sur le tunnel de paiement avec moins de champs.

Erreur 5 : des messages d'erreur vagues

Sur un petit écran, le message « Erreur dans le formulaire » en haut de page oblige à remonter, chercher, corriger. Baymard relève que 94 % des sites n'affichent pas de message d'erreur adapté au cas précis. La correction : un message sous le champ concerné, qui dit exactement quoi faire (« Le numéro de téléphone doit contenir 10 chiffres »), affiché dès que l'acheteur quitte le champ.

Même logique pour les champs obligatoires : 61 % des sites ne signalent pas clairement à la fois les champs obligatoires et les champs facultatifs. Quand seuls les facultatifs étaient marqués, 32 % des participants aux tests de Baymard ont oublié un champ obligatoire.

Erreur 6 : obliger à créer un compte sur mobile

Créer un mot de passe sur un téléphone est pénible. Baymard relève que 62 % des sites ne mettent pas la commande sans compte en option la plus visible, et que 65 % imposent des règles de mot de passe trop complexes. Faites de la commande sans compte le choix principal et proposez le compte après la commande.

Pour aller plus loin, proposez des moyens de paiement qui évitent toute saisie, comme Apple Pay ou Google Pay : voir notre article sur les moyens de paiement à proposer en France.

Erreur 7 : tester sur desktop et supposer que le mobile suit

Beaucoup d'équipes valident leurs pages sur un grand écran, puis jettent un œil rapide au mode « mobile » du navigateur. Ce n'est pas suffisant. Les claviers, les zones tactiles, les fenêtres surgissantes et la vitesse sur un réseau moyen ne se voient qu'en conditions réelles.

La routine à mettre en place chaque mois :

Passez une commande complète sur un iPhone et sur un Android d'entrée de gamme, en 4G, sans être connecté à votre compte.
Comparez dans votre outil d'analyse le taux de conversion mobile et desktop, étape par étape du tunnel.
Repérez l'étape où l'écart entre mobile et desktop est le plus fort : c'est votre priorité.
Chiffrez la fuite en euros, en appliquant à vos sessions mobiles le taux de passage que vous obtenez sur desktop pour cette étape, pour mesurer ce que l'écart vous coûte.

Si vous voulez un regard extérieur sur ces écarts, demandez votre pré-analyse offerte : nous chiffrons les fuites de votre parcours mobile et les classons par impact.

À retenir

Selon Baymard, 75 % des grands sites ont une ergonomie mobile « médiocre » : la marge de progrès est générale.
Une amélioration de 0,1 seconde sur mobile a augmenté la conversion de 8,4 % dans le retail selon l'étude Deloitte pour Google.
Respectez les seuils Core Web Vitals : LCP de 2,5 s, INP de 200 ms, CLS de 0,1.
Des cibles tactiles d'au moins 24 × 24 pixels CSS, le bon clavier pour chaque champ et des messages d'erreur précis.
Testez chaque mois une commande complète sur un vrai téléphone et comparez les taux de passage mobile et desktop.