- Les fiches produits sont les pages les plus importante d’un site ecommerce. Ce sont celles qui ont le plus d’impact sur la conversion.
- En France, la majorité des visites sur internet sont désormais réalisées depuis un appareil mobile. Cette tendance se confirme d’année en année : les utilisateurs privilégient de plus en plus le mobile (smartphones, tablettes) au détriment des ordinateurs.
La conclusion à tirer de ces deux constats est simple : vous devez à tout prix optimiser les fiches produits de la version mobile de votre site ecommerce. Comment y parvenir ? C’est le sujet de cet article ! Découvrez les différents éléments à travailler pour améliorer l’UX mobile des fiches produits de votre site (descriptions, images, prix, options de livraison, avis clients…).
La description des produits (détails et options)
Le fait de proposer des descriptions détaillées permet à la fois de susciter l’intérêt des internautes et de les rassurer. Les utilisateurs apprécient lorsque les informations importantes sur vos produits sont facilement visibles sur mobile : disponibilité, tailles, couleurs, description, photos, avis-clients, etc. Veillez également à ce que ces informations soient accessibles à tous, notamment via des fonctionnalités d’accessibilité (contrastes adaptés, textes alternatifs pour les images, etc.), conformément aux standards actuels.
La description du produits doit être facile et rapide à consulter. Vous devez vous concentrer sur les informations importantes et spécifiques. Dans les images ci-dessous, l’image de gauche est un exemple de ce qu’il ne faut pas faire, celle de droite un exemple dont vous pouvez vous inspirer.
Pourquoi l’exemple de gauche est plutôt mauvais ? Parce qu’elle laisse les internautes (ou plutôt, les « mobinautes ») sur leur faim, frustrés de l’absence de certaines informations importantes :
- La taille : on ne sait pas quelles sont les tailles disponibles et on ne sait pas non plus quel système de mesure est utilisé.
- Les couleurs : il est impossible de se représenter visuellement à quoi ressemblent les couleurs. Le nom des couleurs ne donne pas suffisamment d’informations.
- La disponibilité du produit : aucunes informations concernant l’état du stock et les options de livraison ne sont données.
- On notera l’absence totale de détails sur le produit.
On en conviendra tous : réunir toutes les informations essentielles sur le produit dans un format qui soit adapté à un écran mobile est une tâche assez complexe. Mais complexe ne signifie pas impossible, comme le montre cet exemple.
Faites-en sorte que le visiteur ait le moins possible besoin de taper sur son écran pour accéder aux informations. Le toucher sur mobile est toujours imprécis et peu conduire à des erreurs. Dans l’idéal, il faut que l’internaute puisse accéder à toutes les informations sans avoir à cliquer. Si vos fiches produits contiennent des boutons, faites-en sorte de limiter le nombre d’options, comme dans l’exemple ci-dessous :
Les images des produits
Les images de vos produits sont vos meilleurs alliés. Elles constituent les éléments les plus importants de vos fiches produits – quel que soit d’ailleurs le type de produits que vous vendez. Les images ont deux fonctions clés : produire une grande impression sur vos visiteurs et délivrer des informations.
Premier conseil : utilisez des images de grande taille et de haute qualité. C’est tout particulièrement important si vous vendez des vêtements : dans ce cas, les visiteurs veulent voir les détails de vos produits. Faites-en sorte que les images soient zoomable, en mettant bien en évidence la loupe, comme dans l’exemple ci-dessous :
Vérifiez qu’aucune image n’apparaît pixelisée, que ce soit en taille originale mais aussi en mode zoom. Cela suppose, vous le savez, d’utiliser des images en haute définition.
L’exemple ci-dessous montre ce qui se produit en cas de zoom lorsque l’on n’utilise pas des images de qualité suffisante :
Autre conseil : laissez à vos visiteurs le contrôle sur le niveau de zoom. Permettez aussi à vos visiteurs de zoomer sur toutes les parties du produit. Ne reproduisez pas l’exemple ci-dessous :
Voici maintenant un exemple intéressant. L’utilisateur a la possibilité d’adapter le niveau de zoom en tapant sur l’écran :
Combien d’images proposer par produit ? La règle générale veut que plus il y a d’images, mieux c’est. Proposer plusieurs images permet de présenter ses produits sous leurs différents facettes et aident par conséquent les utilisateurs à se représenter le produit.
Proposez aux internautes des images montrant certains détails et caractéristiques clés de votre produit. De plus, l’utilisation d’outils de génération d’images assistée par IA (de plus en plus adoptés dans le secteur) permet d’illustrer des variantes ou des mises en situation de vos produits de façon réaliste et rapide.
Pour optimiser l’expérience utilisateur, donnez la possibilité aux internautes de passer d’une image à l’autre en balayant l’écran de droite à gauche. C’est beaucoup mieux que d’obliger l’internaute à scroller de haut en bas.
Si votre site offre la possibilité aux internautes de zoomer sur l’image en pinçant l’écran ou en faisant un double-tap (double clic), il est conseillé de l’indiquer, comme c’est le cas dans les exemples ci-dessous. Si vous ne le faites pas, beaucoup d’utilisateurs passeront à côté de cette fonctionnalité.
Découvrez notre guide complet sur l’art de valoriser les photos de vos produits en ecommerce.
Le prix des produits
Le prix est un élément décisif dans la décision d’achat des internautes. Vous devez prendre le temps de réfléchir à votre stratégie tarifaire pour améliorer le taux de conversion de votre site ecommerce. Il y a deux approches différentes pour présenter et afficher le prix sur les fiches produits de votre site mobile :
- Première hypothèse : le prix est un élément très sensible dans la mesure où vous êtes loin d’être le seul à vendre les produits que vous vendez. Vous proposez des prix très compétitifs. Dans cette hypothèse, nous vous conseillons de mettre le prix en avant, de le placer juste après l’image et le titre du produit.
- Deuxième hypothèse : vous vous différenciez de vos concurrents par un autre facteur que le prix (par exemple, vous vendez des produits uniques, originaux, introuvables ailleurs). Dans ce cas, vous avez intérêt à ne pas mettre en avant le prix, à l’indiquer tout en bas de la fiche produit (après la description des bénéfices et des caractéristiques du produit).
La disponibilité des produits et les options de livraison
Une des raisons principales des abandons de paniers est liée à un manque d’informations sur les options et coûts de livraison. En ecommerce, la livraison est un sujet très sensible. Le fait de ne pas préciser les modalités de la livraison sur les fiches produits oblige les visiteurs de votre site mobile à se rendre sur d’autres pages du site. Cela les distrait et réduit la conversion de votre site.
Il est très important d’indiquer sur les fiches produits la disponibilité des produits, c’est-à-dire l’état du stock. Cette information est essentielle, notamment pour les clients qui souhaitent utiliser des services omnicanaux comme le click & collect ou la livraison express.
Il faut, deuxièmement, que vous indiquiez clairement d’une part le coût de la livraison et d’autre part le délai de livraison. Ces informations doivent être présentées directement sur les fiches produits. Elles doivent être correctement mises en avant (donc : pas reléguées en bas de pages si possible). Il est important, soit dit en passant, que les deux informations soient placées au même endroit : les consommateurs ont l’habitude d’arbitrer entre délai de livraison et coût de la livraison.
Les avis-clients
Un site ecommerce doit inspirer confiance, il doit rassurer. La meilleure manière d’y parvenir consiste à mettre en avant les avis-clients. Les consommateurs se font confiance entre eux : ils auront toujours plus confiance en leurs semblables qu’en vous, car votre discours n’est par définition pas impartial.
Les avis clients sont utilisés de deux manières différentes par les utilisateurs :
- Ils permettent d’évaluer la qualité d’un produit et votre qualité de service. Les internautes veulent s’assurer, en lisant les avis, que ce que vous dites de vos produits est vrai.
- Ils permettent de trouver des réponses à des questions qu’ils se posent et auxquelles vous ne répondez pas dans vos fiches produits.
Le fait d’avoir des avis-clients et de les mettre en avant ajoutera de la crédibilité à vos fiches produits et aura un impact positif sur votre conversion. Voici quelques conseils d’UX pour afficher les avis-clients sur la version mobile de votre site ecommerce, en tenant compte des pratiques actuelles :
- Proposez des options de filtrage et de tri (par note, date, utilité, etc.) afin de permettre aux internautes d’accéder rapidement aux avis les plus pertinents pour eux.
- Ne masquez pas les avis négatifs. Si tous vos avis clients sont très positifs, les internautes finiront par douter de leur validité.
- Indiquez le nombre total d’avis donnés pour crédibiliser la note globale et mettez en avant les avis vérifiés à l’aide d’un badge ou d’une mention spécifique.
Conclusion
Beaucoup d’acheteurs mobile quittent le site lorsqu’ils s’aperçoivent que celui-ci n’est pas optimisé pour mobile. Il est donc très important de travailler l’UX mobile de son site ecommerce, et en particulier les fiches produits. Ce n’est pas un luxe, c’est une nécessité. Vous pouvez vous fixer : atteindre le même taux de conversion sur mobile et sur desktop !
Si le sujet du ecommerce vous intéresse, je vous invite fortement à parcourir ces articles :
- Comment doubler le taux de conversion de vos fiches produits
- 18 A/B tests à réaliser pour booster le taux de conversion en ecommerce (pensez à utiliser des solutions d’A/B testing intégrant l’IA pour une optimisation continue, de plus en plus adoptées en 2025)
- [Tutoriel] Comment vendre vos produits sur Google Shopping ?
- Comment identifier des produits à fort potentiel à vendre dans votre boutique ecommerce
Questions fréquentes
Quels éléments de la fiche produit sont les plus souvent négligés sur mobile d’après votre expérience ?
D’après ce qu’on observe sur le terrain, le visuel produit et les informations clés comme le prix ou le CTA (“Ajouter au panier”) sont fréquemment relégués trop bas sur la version mobile. Beaucoup de marques pensent avoir adapté leur interface, mais en auditant avec de vrais utilisateurs, on voit que les scrollers décrochent avant même de voir ces infos. Un cas typique : sur un projet e-commerce mode, 60% des utilisateurs ne voyaient pas la disponibilité du stock car le bandeau était masqué par le header sticky. Il faut absolument remonter les informations déclenchant l’action d’achat dans le premier écran (above the fold), quitte à résumer davantage le descriptif. Les carrousels d’images sont aussi souvent peu ergonomiques, avec des boutons trop petits ou une navigation peu intuitive.
Comment mesurer efficacement l’impact des améliorations UX sur les fiches produits mobile ?
Sur le terrain, on recommande toujours d’aller au-delà du simple taux de conversion. Chez certains clients, on a mis en place des analyses de scroll (ex : Hotjar, ContentSquare) qui montrent précisément jusqu’où les utilisateurs descendent sur la page. Ce qui ressort, c’est qu’après une simplification des fiches produits, la durée moyenne de consultation a baissé mais les ajouts panier ont augmenté de 20 à 30%. Il est aussi utile de croiser les analytics avec des tests utilisateurs mobiles en situation réelle : sur un site de retail, on a compris que certains éléments étaient ignorés car peu visibles sous le pouce, ce qui n’apparaissait pas dans les chiffres purs. Mettre en place des A/B tests ciblés, même sur des micro-ajustements (taille du bouton, emplacement du prix), donne des insights actionnables rapidement.
Quels pièges éviter lors de l’adaptation des fiches produits desktop vers mobile ?
Un classique qu’on constate trop souvent, c’est le ‘responsive paresseux’ : simplement empiler les blocs desktop sur mobile sans repenser la hiérarchie. Chez plusieurs clients, cela a conduit à des pages très longues où l’utilisateur se perd. Sur un projet avec une DNVB, le taux de rebond sur mobile a chuté de 15% une fois la structure revue spécifiquement pour le mobile, avec des éléments contextuels et des micro-interactions pensées doigt et pouce. Autre piège : oublier le poids des images ou la rapidité d’affichage. Sur mobile, la vitesse perçue est cruciale, surtout pour les fiches très visuelles. Enfin, la navigation secondaire (ex : onglets description/caractéristiques/avis) doit être adaptée en swipe ou en accordéon, pas en simple menu horizontal.
Quels quick wins prioriser lorsqu’on veut améliorer rapidement l’UX des fiches produits mobile ?
Quand on intervient sur des sprints d’optimisation, on cible d’abord la clarté du bouton d’action principal (CTA), la mise en avant du prix et la gestion des variantes (tailles, couleurs). Par exemple, sur un site de cosmétiques, le simple fait d’agrandir le bouton ‘Ajouter au panier’ et de le fixer en bas d’écran a réduit les abandons de fiche de 22%. Autre quick win : raccourcir les descriptions et les basculer sous forme d’accordéons pour éviter le scroll infini. Enfin, afficher les avis clients dans un carrousel déroulant améliore la réassurance sans surcharger la page. Ce sont des ajustements rapides à déployer, qui ont prouvé leur efficacité sans refonte lourde.