Optimiser sa page produit pour maximiser ses conversions

icone horloge
6 min
icone connexion personne
B2C
icone funnel
Conversion
Canal :
Site internet
Levier :
Copywriting
Design
Lister et travailler les éléments clés qui doivent apparaître sur sa page produit.
S’inspirer d’exemples concrets avec des boutiques ecommerce de votre secteur d’activité mais aussi d’ailleurs.
Construire le wireframe de sa page produit. L’objectif est de mettre en évidence les éléments les plus importants sans nuire à l’expérience client.
Quelques outils pour optimiser en continu sa page produit.
📣 Ce tuto a été écrit avec la collaboration de
Étape 1

Rassembler tous les éléments clés qui doivent apparaître sur la page produit

Dans cette étape, nous allons travailler chaque élément qui doit apparaître dans votre page produit.

=> Sur mobile, l’idéal est de les faire apparaître dans l’ordre où nous les citons ci-dessous. Attention, avec en moyenne 80% des utilisateurs qui sont sur mobile, c’est super important de penser ses pages produits en “mobile-first”.

=> Sur ordinateur, il faut distinguer ce qui doit arriver avant la ligne de flottaison du reste : tout l’enjeu du haut de votre page produit est de rassurer l’utilisateur sur le fait qu’il est au bon endroit.

  1. Au-dessus de la ligne de flottaison

👉 Travaillez les éléments à faire apparaître en haut de la page produit pour qu’ils soient clairs et rapides à lire.

LA GALERIE PHOTO

✅ Elle doit contenir 3 types d’images :

  1. Photos d’ambiance/lifestyle
  2. Photos produit (aussi appelées “packshot”)
  3. Photos zooms pour montrer la texture du produit

❌ A éviter :

  • Les images de synthèse
  • Les images de mauvaise qualité

#protip : avoir la possibilité de zoomer sur les images permet à l’utilisateur de voir les textures, c’est rassurant.

LE NOM DU PRODUIT (+ LE PRIX)

✅ Il doit être :

  • Facile à comprendre
  • Exhaustif (surtout si vous vendez plusieurs types de produits sur votre boutique)
  • Assez court : 5 ou 6 mots max.

Exemple : “La box mensuelle Sommeil réparateur”

❌ Evitez les noms :

  • Trop alambiqués
  • Trop longs

Exemple : “L’occullus reparato”

LA PREUVE SOCIALE

✅ Les 4 types de preuves sociales que vous pouvez utiliser au-dessus de la ligne de flottaison :

  • Moyennes de vos notes sur 5
  • Logos de vos partenaires
  • Certifications
  • Logo des articles de presse

❌ A éviter :

  • Les faux avis. Personne n’aime les menteurs.
  • Les avis trop détaillés : ils auront leur place un peu plus bas.

LA DESCRIPTION DU PRODUIT

✅ Elle doit :

  • Être courte : 5 lignes max
  • Être visuelle (utilisez des icônes, des listes ou des mini titres) pour permettre une lecture hiérarchisée
  • Mélanger bénéfices et caractéristiques du produit

Exemple : Tous les mois, vous recevez directement chez vous 3 compléments alimentaires à base de plantes naturelles et bio pour retrouver un sommeil réparateur à l’approche de l’hiver :

  • Hibiscus
  • Passiflore
  • Houblon

❌ A éviter :

  • Les descriptions trop longues
  • Trop de détails techniques

LES BLOCS DE REASSURANCE ECOMMERCE

✅ Quelques idées de thèmes que vous pouvez aborder :

  • Temps de livraison, Paiement sécurisé, Retours & Echanges, SAV, Garantie, Satisfait ou remboursé, Sans engagement, 100% Vegan, Etc.

#protip : utilisez des pictos pour permettre une lecture visuelle facile et rapide.

LE BOUTON D’APPEL A ACTION (CTA)

✅ Il doit être :

  • Court
  • Clair
  • Classique (sauf si votre univers de marque est très spécial : gardez le même ton partout)

✅ Vous avez maintenant les top arguments à faire apparaître en premier sur votre page produit.

  1. En-dessous de la ligne de flottaison

Tous les éléments qui arrivent ensuite ont pour rôle de répondre aux questions et/ou objections de votre visiteur. Si le haut de la page l’a convaincu, il descendra pour tout connaître du produit qu’il s’apprête à acheter.

FONCTIONNALITES & BENEFICES

✅ Cette partie doit être :

  • Visuelle
  • Cohérente avec les éléments mentionnés sur votre homepage, vos landing pages et vos campagnes marketing

#protip : utiliser une vidéo ou un gif peut être un bon complément pour éviter de trop charger la page et expliquer rapidement comment ça marche.

#protip bis : les vidéos de témoignage client sont un un outil hyper puissant à insérer à cet endroit.

DETAILS TECHNIQUES

Cette partie pose rarement problème car c’est souvent la partie que l’on maîtrise mieux. S’il y a un seul endroit dans votre site internet où vous devez détailler vos textes, c’est bien celui-ci.

✅ Quelques thèmes à aborder (cela dépend énormément de votre secteur d’activité) :

  • Matières utilisées, Dimensions, Spécifications, Ingrédients, Etc.

AVIS & TÉMOIGNAGES

✅ Ils doivent être :

  • Complets et détaillés

#protip : les vidéos témoignages ou les publications instagram de vos clients sont des éléments de preuve sociale super puissants.

AUTRES ÉLÉMENTS

Vous pouvez aussi ajouter d’autres éléments qui sont pertinents pour votre boutique et votre secteur d’activité comme des produits complémentaires, un guide d’achat, un guide des tailles, une FAQ etc.

icone check

Vous avez maintenant tout ce qu’il faut pour faire augmenter le taux de conversion de votre page produit.

Étape 2

S’inspirer d’exemples concrets

Voici 4 exemples de pages produit (sur ordinateur) dont vous pouvez vous inspirer.

  • Back Market : vente de produits électroniques de seconde main

  • Allbirds : vente de chaussures éco-responsables

  • Beardbrand : vente de produits de beauté pour hommes et d’entretien pour la barbe

Et voici un exemple de page produit sur mobile dont vous pouvez vous inspirer :

  • Hoopal : vente de vêtements éco-responsables


icone check

Vous avez fait le plein de nouvelles idées.

Étape 3

Mettre en forme sa page produit avec un template (aussi appelé wireframe)

Quand il s’agit de passer à l’action et de renseigner ses informations bancaires, le cerveau humain devient tout à coup très pragmatique. Il y a un enjeu financier et donc des “codes” à respecter. Ce n’est pas pour rien que toutes les pages produits (ou presque !) sont globalement structurées de la même manière : galerie photo à gauche et tout le reste à droite par exemple.

👉 Dans cette étape, vous allez construire le wireframe de votre page produit grâce à l’outil gratuit Mockflow en intégrant tous les éléments que vous venez de rassembler.  Bien sûr, chaque business est différent : vous devrez sûrement composer avec les contraintes techniques de votre site internet.

Passer par l’étape du wireframe permet de s’assurer que tous les éléments sont placés et qu’on a rien oublié.

Pour l’exemple, nous avons construit ce wireframe dont vous pouvez vous inspirer (pour voir le wireframe en entier, cliquez ici) :

👉 Dans Mockflow, cliquez sur “new project”.

Il vous suffit ensuite de cliquer/glisser les éléments du panneau à gauche pour les insérer dans votre wireframe.


icone check

Vous n’avez plus qu’à intégrer tout ça ou à le faire passer à votre développeur ;)

Étape 4

icone check
BONUS

Quelques outils pour optimiser en continu sa page produit

Voici quelques outils utiles pour améliorer le taux de conversion de votre page :

Et des outils utiles pour voir comment optimiser en continu :

  • Hotjar : pour générer des heatmaps qui permettent de voir à quel endroit les utilisateurs cliquent le plus, passent du temps ou au contraire ne regardent pas du tout.
À vous de jouer ! :)
pierre et mégane marketing flow