Cover

Comment créer une fiche produit sur mobile ? 1/ La présentation du produit

Nous entamons une série d’articles pour vous aider à optimiser vos fiches produits sur mobile. Vous trouverez dans ces articles des exemples de bonnes pratiques, des études de cas, des témoignages d’utilisateurs et des statistiques clés.

La fiche produit est une étape cruciale sur mobile car elle représente le point d’entrée dans le tunnel d’achat. La difficulté principale, c’est que vous devez communiquer une grande quantité d’informations à travers votre fiche produit, et sur mobile c’est loin d’être évident, avec des écrans 4 à 5 fois moins grands. Trop d’informations et vous risquez de noyer vos visiteurs, pas assez et vous risquez de créer de la confusion et d’empêcher vos visiteurs d’avancer dans le tunnel.

La clé est donc de bien présenter votre fiche produit, pour que tout le monde s’y retrouve. Une évidence nous direz-vous, et bien pas tant que ça… L’étude menée par Tapbuy sur les parcours d’achat mobile des 50 plus gros e-commerçants en France montre que 30% d’entre eux proposent une fiche produit “décevante” d’après les utilisateurs interrogés, 62% offrent une fiche produit “moyenne” et seulement 8% offrent une fiche produit jugée comme “très satisfaisante”.

Si l’efficacité de la fiche produit dépend à la fois du secteur du e-commerçant ainsi que du positionnement de la marque, il existe néanmoins un certain nombre d’éléments qui permettent d’améliorer l’expérience utilisateur sur mobile.

Dans cet article nous nous penchons sur la présentation des produits, un des critères principaux d’une fiche produit réussie, selon les utilisateurs. La mise en avant du produit concerne les éléments situés en haut de la fiche produit, qui vont permettre à l’utilisateur de directement identifier votre offre sur mobile.


Adoptez une mise en avant claire de vos produits

La première impression est souvent la bonne, c’est pareil sur mobile. Il est important de bien soigner ce que verront vos utilisateurs en arrivant sur votre fiche produit, c’est à dire l’ensemble des éléments situés au-dessus de la ligne de flottaison (la limite à partir de laquelle il faut scroller pour voir le reste de l’écran).

Les éléments à faire figurer au-dessus de cette ligne : le header du site mobile, le nom du produit, la photo du produit, son prix et éventuellement la note des avis clients. Ces éléments constituent le haut de la fiche produit.


Proposez un header épuré

Le header se situe tout en haut de la fiche produit. Ses fonctions de base : permettre aux utilisateurs de naviguer sur le site et d’avoir accès au panier. Le header doit donc être composé des éléments suivants :

  • Le menu du site, généralement accessible sous la forme d’un burger menu
  • L’icône d’accès au panier avec le nombre d’items mis au panier indiqué
  • L’icône d’accès à la barre de recherche
  • Le logo de la marque ou du site en question

fiche-produit-mobile-camaieu-adidas

Ces éléments figurent dans 100% des headers du top 50 e-commerce en France.

D’autres éléments peuvent apparaître dans le header :

  • L’icône d’accès au compte. Elle permet aux utilisateurs de se créer ou d’accéder à son compte. 50% des e-commerçants du top 50 la proposent dans leur header avec une présence qui varie en fonction des secteurs (100% dans l’électronique).
    fiche-produit-mobile-fnac
  • La géolocalisation. Dans le cas d’un brick and mortar, la géolocalisation permet de trouver les boutiques à proximité. Seuls 21% des e-commerçants du top 50 proposent la géolocalisation à partir du header.fiche-produit-mobile-but
  • La liste des favoris. Se présentant souvent sous la forme d’un coeur, cette option permet aux utilisateurs d’accéder à une liste d’articles précédemment sauvegardés. Elle est proposée par seulement 20% du top 50 m-commerce mais cela monte à 37% pour le secteur de la mode.
    fiche-produit-mobile-blancheporte
  • Un fil d’ariane. Il permet de remonter au niveau de la catégorie pour explorer plus de produits. Il est peu utilisé par les e-commerçants du top 50, seulement 22% l’utilisent sur la fiche produit. Les fils d’ariane sont généralement plus difficiles d’utilisation sur mobile, car ils sont (1) très petits et (2) situés entre plusieurs zones cliquables.
    fiche-produit-mobile-darty

Nos conseils concernant le header :

1. Limiter les éléments. Il n’est pas recommandé de multiplier les éléments dans le header. Par exemple, la liste des favoris est seulement utile si l’utilisateur a un compte et est logué. Veillez donc à ne pas offrir trop de distractions à vos utilisateurs, sous peine de les perdre sur votre site mobile.

fiche-produit-mobile-ikea

L’avis des utilisateurs :

User-1Alexandre, 32 ans

“J’ai du mal à m’y retrouver dans tous les menus proposés. Je ne comprends pas bien à quoi correspond le bloc-note tout en haut et ce qu’il me permet de faire. Le reste des onglets me paraît inutile, en tout cas ici.”


2. 
Ne détachez pas la barre de recherche. 32% du top 50 e-commerce utilise une barre de recherche détachée du header, ce qui a pour effet d’introduire inutilement des éléments dans le haut de la fiche produit. L’idéal est d’intégrer une icône loupe directement dans le header. Les utilisateurs reconnaissent ce symbole et savent que le champ de recherche apparaît en un click. L’espace gagné favorise la mise en avant du produit.

fiche-produit-mobile-leroy-merlin
Barre de recherche détachée du header, où le champ de recherche est visible.


Soignez la qualité et la quantité des photos du produit

L’image est un élément essentiel d’une bonne fiche produit sur mobile. Nous y consacrerons prochainement un article complet. En attendant, les éléments à prendre en compte sur les images :

  • La taille de l’image. Il faut que l’image du produit soit bien adaptée à la taille du smartphone, donc suffisamment grande pour avoir une bonne vue du produit, et située suffisamment haut sur la fiche produit pour qu’elle soit visible sans devoir scroller.  54% du top 50 m-commerce propose une image bien adaptée sur la fiche produit mobile selon les utilisateurs.
  • La qualité de l’image. Les utilisateurs que nous avons interrogés sont très attentifs à la netteté des images. Globalement, le devoir est bien assuré par le top 50 m-commerce, avec 76% des sites mobiles testés qui proposent des images nettes.

fiche-produit-mobile-nike-yves-rocher

L’avis des utilisateurs :

User-3Julie, 28 ans
“La photo de gauche est bien grande, adaptée à la taille de mon iPhone. Je peux facilement voir les détails de la chaussure comme les nuances de couleurs. Pour le vernis c’est plus compliqué, l’image est plus petite et moins nette, du coup j’ai peur de me tromper car je ne vois pas bien les couleurs.”

  • Proposer plusieurs photos. Lorsqu’ils se rendent en boutique, les utilisateurs ont besoin de voir le produit qu’ils comptent acheter sous plusieurs angles, il est donc nécessaire de répéter cette habitude pour l’expérience en ligne sur mobile. Seuls 62% des e-commerçants du top 50 proposent plusieurs images sur la majorité des pages produits testées.

fiche-produit-mobile-camaieu-galeries-lafayette

L’avis des utilisateurs :

User-4Anne-Charlotte, 32 ans
“Je peux voir le produit de gauche sous toutes les coutures, du coup je vois bien à quoi ressemble la doudoune. En revanche j’hésiterais à acheter le manteau de droite, car je ne vois pas complètement à quoi il ressemble.”

La taille des images, leur netteté et leur nombre sont des éléments  très importants sur mobile, car ils permettent de conforter les utilisateurs dans leur volonté d’acheter.


Veillez à faire ressortir le titre et le prix du produit

Deux autres éléments doivent ressortir dès le haut de votre fiche produit : le prix et le nom du produit.

1. Le prix. En fonction du secteur, les choix concernant la visibilité du prix ne seront pas les mêmes. Vous pouvez jouer sur deux dimensions principales :

  • La police du prix. Certains acteurs du secteur de l’électronique ou du bricolage vont faire ressortir les prix par l’utilisation d’une couleur différente du reste (rouge, vert…) et une police plus grasse.
fiche-produit-mobile-alinea-grosbill
Écran de gauche : Alinéa, via un Iphone 6. Écran de droite : Grosbill, via un Iphone 6.

L’avis des utilisateurs :

User-2Bruno, 36 ans

“Les prix sont bien visibles, ce que j’apprécie. Ils sont bien mis en avant donc je peux les voir directement sans faire d’effort.”

 

  • L’épuration des autres éléments. On comprend néanmoins que des acteurs du secteur de la mode, ayant un univers visuel plus marqué, n’aient pas envie de recourir à ce type de pratique. Dans ce cas là, il faut limiter les autres éléments parasites de la fiche, de façon à ce que le prix ressorte naturellement.

fiche-produit-mobile-zara

L’avis des utilisateurs :

User-5Mathilde, 24 ans
“J’aime beaucoup cette fiche produit car je vois tout de suite les principales informations : la photo du produit et son prix ! Je ne suis pas fan des fiches produits où il y a trop de choses, après on ne s’y retrouve plus.”

L’important est donc que les utilisateurs puissent identifier le prix rapidement.

2. Le nom du produit. Deuxième élément incontournable de la fiche produit, le nom du produit doit être facilement identifiable par l’utilisateur. Il doit être situé près de la photo du produit, pour faciliter la lecture de l’utilisateur. 64% des e-commerçants du top 50 choisissent de le placer au dessus de la photo du produit, contre 36% en dessous.

 

Utilisez un call-to-action bien visible

Le call-to-action de mise au panier est un élément essentiel de la fiche produit sur mobile. Il conditionne le passage de l’utilisateur vers la seconde étape du tunnel d’achat. S’il n’est pas suffisamment visible ou suffisamment clair, il peut freiner l’utilisateur dans son parcours.

68% des m-commerçants du top 50 utilisent des call-to-action de mise au panier suffisamment visibles et clairs, selon les utilisateurs. Les éléments importants à prendre en compte pour un call-to-action optimisé :

  • La taille. Veillez à ce que votre call-to-action prenne au moins 80% de la largeur de l’écran mobile, le clic sur mobile étant moins précis que sur desktop. De plus, l’utilisateur doit pouvoir voir le bouton, même avec le doigt dessus.
  • La couleur. Utilisez une couleur qui fasse bien ressortir votre call-to-action de mise au panier par rapport aux autres éléments de la fiche produit.
  • La distance par rapport au header. Remontez un maximum votre call-to-action de façon à ce qu’il soit rapidement visible à l’écran. Cela évitera à l’utilisateur de devoir trop scroller pour passer à l’action.
  • L’intitulé. Il est important de donner un intitulé au call-to-action de manière à bien indiquer à l’utilisateur l’action déclenchée par le bouton. La mention “Ajouter au panier” est l’intitulé privilégié par le top 50 du m-commerce dans 86% des cas.
fiche-produit-maisons-du-monde-darty
Écran de gauche : Maisons du Monde, via un Iphone 6. Écran de droite : Darty, via un Iphone 6.

L’avis des utilisateurs :

User-6Paul, 44 ans
“Le bouton à gauche est clair, pas de problème. Par contre à droite je suis un peu perdu. Déjà ils sont tous petits, et ensuite pourquoi est-ce qu’il y en a deux ? Est-ce que si je clique sur le rouge ça veut dire que je ne peux pas retirer mon produit en magasin ? C’est pas super clair…”

Certains acteurs utilisent des call-to-action “flottants”, c’est à dire qu’ils restent toujours en bas de l’écran, même si les utilisateurs scrollent. Si vos utilisateurs sont intéressés par le produit, puis décident de lire plus en détails les caractéristiques et choisissent finalement de l’acheter, cela leur évite de devoir revenir sur le haut de la fiche produit pour effectuer la mise au panier.

adidas
En résumé : le haut de la fiche produit doit être simple et clair

La checklist à bien valider :

  • Le header n’est pas trop chargé. Il comprend au moins le logo, l’icône d’accès à la barre de recherche, le burger menu et l’icône de mise au panier.
  • Les photos sont adaptées à la résolution du smartphone, nettes et multiples.
  • Le titre du produit et le prix sont facilement identifiables dès l’arrivée sur la fiche produit.
  • Le bouton de mise au panier est bien visible et facilement cliquable sur mobile.

Et pour ne pas oublier, un exemple de schéma récapitulatif 😉 :

 

Schema-fiche-produit