.png){kind=icon}
.png){kind=icon}
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.
👉 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 :
❌ A éviter :
#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 :
Exemple : “La box mensuelle Sommeil réparateur”
❌ Evitez les noms :
Exemple : “L’occullus reparato”
LA PREUVE SOCIALE
✅ Les 4 types de preuves sociales que vous pouvez utiliser au-dessus de la ligne de flottaison :
❌ A éviter :
LA DESCRIPTION DU PRODUIT
✅ Elle doit :
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 :
❌ A éviter :
LES BLOCS DE REASSURANCE ECOMMERCE
✅ Quelques idées de thèmes que vous pouvez aborder :
#protip : utilisez des pictos pour permettre une lecture visuelle facile et rapide.
LE BOUTON D’APPEL A ACTION (CTA)
✅ Il doit être :
✅ Vous avez maintenant les top arguments à faire apparaître en premier sur votre page produit.
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 :
#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é) :
AVIS & TÉMOIGNAGES
✅ Ils doivent être :
#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.
Vous avez maintenant tout ce qu’il faut pour faire augmenter le taux de conversion de votre page produit.
Voici 4 exemples de pages produit (sur ordinateur) dont vous pouvez vous inspirer.
Et voici un exemple de page produit sur mobile dont vous pouvez vous inspirer :
Vous avez fait le plein de nouvelles idées.
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.
Vous n’avez plus qu’à intégrer tout ça ou à le faire passer à votre développeur ;)
Voici quelques outils utiles pour améliorer le taux de conversion de votre page :
Et des outils utiles pour voir comment optimiser en continu :
