UX – Comment optimiser vos fiches produits sur mobile ?

9 min de lecture
Rédigé par Franck Mairot le 3 mai 2018
Sommaire

Partager sur :

  • 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, près de 60% des visites sur internet sont réalisées depuis un appareil mobile. C’est une tendance de fond : les gens utilisent de plus en plus le mobile (smartphones, tablettes), de moins en moins les 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.

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.

fiche produits mobile details

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.

Découvrez comment améliorer le taux de conversion et l’expérience client sur mobile.

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.

Un dernier conseil : 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 :

fiche produits mobile radio button

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 :
fiche produits mobile images

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.

fiche produits mobile images zoom

L’exemple ci-dessous montre ce qui se produit en cas de zoom lorsque l’on n’utilise pas des images de qualité suffisante :

fiche produits mobile overstock

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 :

fiche produits mobile zoom

Voici maintenant un exemple intéressant. L’utilisateur a la possibilité d’adapter le niveau de zoom en tapant sur l’écran :

fiche produits mobile zoom 2

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. Par exemple, si vous vendez du matériel Hi-fi, il est tout à fait pertinent de montrer la partie arrière de vos produits, là où se branchent les câbles et les fils électriques.

fiche produits mobile yamaha

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.
fiche produits mobile horizontal swipping

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é.
fiche produits mobile pinche

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.

fiche produits mobile asos

  • 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. C’est une information très importante, surtout pour les clients qui souhaitent retirer leur produit dans un point de vente physique (si vous faites du click & collect).

fiche produits mobile stock

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.

fiche produits mobile livraison

Découvrez comment construire votre stratégie de frais de port.

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 :

  • Proposez des options de filtrage afin de permettre aux internautes d’accéder aux avis qui les intéressent.

fiche produits mobile reviews

  • Ne masquez pas les avis négatifs. Si tous vos avis clients sont très positifs, les internautes finiront par douter de leur validité.

fiche produits mobile reviews 2

  • Indiquez le nombre total d’avis donnés pour crédibiliser la note globale.

fiche produits mobile reviews 3

Découvrez comment utiliser les témoignages clients pour booster la conversion d’un site e-commerce.

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 !

Recevez nos actualités chaque semaine

Entrez votre adresse email et recevez chaque semaine les actualitésde La Fabrique du Net, rédigées par nos experts.

En vous inscrivant vous acceptez notre
politique de protection de données personnelles.

Nos autre articles en liens avec Prototypage

Prototypage
8 min
Comprendre la différence entre UX et UI
Par Franck Mairot, avril 2 2019
Prototypage
6 min
Page Paiement – Les bonnes pratiques UX / UI
Par Franck Mairot, septembre 25 2018

Aucun commentaire

Historique

Nos experts mettent à jour nos articles lorsque de nouvelles informations sont disponibles.
  1. 22 janvier 2025
    Modifié par
    Franck Mairot
  2. 3 mai 2018
    Créé par
    Franck Mairot
Voir plus