La version mobile d'une boutique

La version mobile d'une boutique en ligne (mobile UX, m-commerce) est la façon dont le site s'affiche et fonctionne sur un smartphone : du catalogue et de la recherche jusqu'au paiement.

En clair

Un téléphone a un petit écran, un doigt à la place de la souris et une connexion instable. Ce qui est pratique sur ordinateur devient, sur smartphone, de longs défilements, des boutons minuscules et des formulaires compliqués. Un « affichage adaptatif » seul ne supprime donc pas les problèmes.

Ce que montrent les études

Baymard évalue l'état actuel : 75 % de plus de 150 sites mobiles sont jugés « médiocres », un seul a obtenu « bon », et aucun « parfait » (article mis à jour en juillet 2026, Baymard). Pour les listes de produits, 78 % des sites mobiles ont un résultat « médiocre » ou pire (mise à jour de septembre 2025, Baymard). Pour les fiches produit, 62 % des sites mobiles sont « médiocres » ou pires (mise à jour de mars 2026, Baymard). Les sites sont évalués selon la méthodologie de Baymard ; il ne s'agit pas d'une conversion mesurée.

Ce qui est recommandé

Parmi les dix pratiques de Baymard (entre parenthèses, la part des sites qui ne les appliquent pas) (Baymard) :

• regrouper les variantes de couleur dans une seule entrée de la liste (42 %) ;
• avoir un bouton « Rechercher » visible à côté du champ de recherche (27 %) ;
• permettre de faire défiler d'un geste les photos de tous les avis (57 %) ;
• valider l'adresse à l'étape de livraison (54 %) ;
• afficher des erreurs précises (93 % ne le font pas) ;
• avoir « Tout afficher » à chaque niveau de catégorie (42 %) ;
• mettre en évidence la catégorie courante dans le menu (94 %) ;
• afficher tous les nuanciers de couleurs dans un défilement horizontal (73 %) ;
• afficher les filtres appliqués au-dessus de la liste (66 %) ;
• proposer les bonnes suggestions pour les fautes de frappe courantes dans une requête (28 %).

Faites un design mobile distinct plutôt que de réduire celui de l'ordinateur, et corrigez d'abord les bases. Sur mobile, les listes de produits et les photos comptent particulièrement, car moins d'articles tiennent sur le premier écran (NN/g). C'est un principe, pas une statistique. Parmi les points pratiques : la suggestion automatique de la ville et du point de retrait du transporteur, et des champs qui font apparaître le bon clavier numérique pour le téléphone et la carte.

Comment les différentes sources voient la question

Mesurez séparément le chiffre d'affaires par visite selon la plateforme pour voir votre propre écart. Baymard se concentre sur des évaluations par rapport à des critères sur de grands sites et note que le problème est probablement encore plus aigu pour les petites boutiques aux budgets plus modestes. C'est une hypothèse, pas un chiffre mesuré.

Un exemple inventé

Les chiffres sont inventés. En un mois, une boutique compte 60 000 sessions mobiles et 40 000 sessions sur ordinateur. La conversion mobile est de 1,0 %, celle sur ordinateur de 2,5 %. Si le mobile passe à 1,5 %, cela fait +300 commandes par mois. Calculez ces écarts de conversion séparément par appareil.

Erreurs courantes

• Considérer qu'un site « adaptatif » est une version mobile terminée.
• De longs formulaires de paiement sur téléphone : voir tunnel de commande.
• Des éléments minuscules et des boutons placés trop près les uns des autres.
• Ne tester que dans un émulateur plutôt que sur de vrais téléphones et avec une connexion lente.
• Regarder la conversion globale sans ventilation par appareil.

FAQ

Pourquoi la conversion est-elle plus faible sur mobile ? Il n'y a pas de chiffre commun récent, et les causes sont multiples : un écran plus petit, des formulaires plus difficiles, des erreurs de mise en page. Baymard montre que la plupart des sites mobiles ont une UX médiocre, mais seules vos propres statistiques par appareil montreront la cause dans votre boutique.

L'affichage adaptatif suffit-il ? Non. NN/g conseille des solutions distinctes pour un autre écran et un autre mode de saisie, et Baymard montre que la plupart des sites mobiles ont un résultat médiocre.

Que corriger en premier sur mobile ? Les bases : les photos et la liste de produits, la recherche, les filtres, le formulaire de paiement. Regardez à quelle étape du tunnel la chute est la plus forte.

Termes associés

• Tunnel de commande (checkout)
• Filtres de catalogue
• Recherche sur le site
• Taux de conversion
• Utilisabilité

Sources

• Baymard Institute. Mobile UX Trends 2026: 10 Best Practices (mis à jour le 14.07.2026) — baymard.com/blog/mobile-ux-ecommerce
• Baymard Institute. Product List UX Best Practices 2025 (mis à jour le 09.09.2025) — baymard.com/blog/current-state-product-list-and-filtering
• Baymard Institute. Product Page UX Best Practices 2026 (mis à jour le 18.03.2026) — baymard.com/research-articles/current-state-ecommerce-product-page-ux