Comment créer une page de produit parfaite pour votre entreprise de commerce électronique

La conception de votre page produit est l'une des pages les plus importantes et les plus complexes de votre magasin. Considérez toutes les situations dans lesquelles un client potentiel pourrait atterrir sur votre page produit :

• Directement depuis un moteur de recherche
• Après avoir parcouru votre boutique
• Après avoir cliqué sur une publicité ciblée

En tant que l'une des dernières étapes d'une vente, votre page produit doit être :

• Optimisé pour s'assurer qu'il peut être trouvé facilement,
• Assez informatif pour inspirer confiance à votre client, et
• Bien conçu pour offrir une excellente expérience de magasinage en ligne

Il existe une gamme de choses que vous pouvez faire pour améliorer les chances que les gens trouvent votre page de produit et augmenter le taux de conversion une fois qu'ils y sont arrivés. Pour décomposer les choses, nous avons créé un guide en cinq parties pour créer la page produit parfaite.

Partie 1 : Comprendre les composants d'une excellente conception de page de produit

Avant de plonger dans les détails sur la façon d'optimiser chaque aspect de votre page de produit, examinons un excellent exemple de conception de page de produit pour comprendre comment chacun des composants s'intègre et pourquoi ils sont importants.

Uniqlo Australia a un excellent exemple de page produit conçue en pensant à l'utilisateur. Voici une capture d'écran de l'une de leurs pages de produits typiques avec les composants clés mis en évidence :

Immédiatement, vous remarquerez que plus de 90 % de la page est consacrée à fournir plus d'informations au client sur le produit qu'il consulte et presque aucun espace n'est perdu au-dessus du pli. Pour décomposer encore plus chaque section :

• Le titre et l'aperçu du produit sont faciles à localiser. De la même manière que les bâtiments et les panneaux servent de points de référence lorsque vous visitez une nouvelle ville, de bons titres aident les clients à naviguer sur un nouveau site.
• Une galerie d'images présentant le produit sous différents angles, avec un modèle, et de près.
• L'image du produit est à l'avant et au centre. Une photo claire sur fond blanc met en valeur le produit sous son meilleur jour. Les images sont ce que le client recherche, il est donc payant de les mettre en évidence.
• Une description unique et détaillée du produit qui décrit ce qu'il est, l'idée derrière sa conception et comment il résout le problème de l'acheteur.
• Des avis clients sincères qui contribuent à renforcer la confiance dans votre produit et votre marque.
• Les clients savent ce qu'ils veulent, mais ils ne savent peut-être pas comment le trouver. L'affichage de produits récemment consultés ou connexes les aide à affiner leurs options plus rapidement et vous donne la possibilité de présenter les produits que vous pensez qu'ils pourraient préférer.
• De nombreuses options et variantes sur une seule page signifient qu'un client n'a pas à naviguer à travers plusieurs produits.
• Juste après que le client ait fini de sélectionner ses options, le bouton « Ajouter au panier » l'attend.
• Pas prêt à vous engager ? Des liens vers des informations supplémentaires telles que votre politique d'expédition et de retour aident à répondre à toutes les questions en suspens.

Je trouve toujours utile de regarder comment les autres magasins ont conçu leurs pages de produits. Vous n'êtes pas non plus obligé de regarder les magasins du même secteur non plus. Envisagez d'examiner les stratégies que les sites Web populaires dans d'autres secteurs utilisent que les clients aiment mais ne sont pas utilisées par vos concurrents.

Sur la plupart des pages de produits à succès, vous trouverez une variante de ces mêmes composants :

• Des descriptions claires et uniques
• Superbe photographie de produit
• Des avis pour inspirer confiance aux acheteurs
• Options de personnalisation
• Effacer le bouton « Ajouter au panier »
• Informations supplémentaires sur l'expédition ou l'achat

Partie 2 : Répondez à ces questions dans votre copie de produit

Une bonne copie est cruciale pour votre page produit. Pas seulement pour vos clients, mais aussi pour le référencement. L'utilisation d'informations sur les fabricants ou les produits génériques est un moyen infaillible de vous assurer que votre produit n'est pas compétitif dans les classements de recherche.

Pour créer une excellente copie de page de produit, vous pouvez répondre à quelques questions.

Qu'est-ce que c'est?

La première chose que votre copie de produit doit aborder est ce qu'est exactement le produit. Si le client recherche un produit spécifique, c'est la première chose à laquelle il souhaite obtenir une réponse.

Pour les nouveaux produits, ils veulent savoir de quoi il s'agit exactement et pourquoi ils devraient être intéressés.

Comment résout-il le problème ?

Quel problème votre produit résout-il et comment le résout-il ? C'est la question fondamentale à laquelle vous devez répondre pour vos clients.

C'est peut-être aussi simple qu'une fonction utilitaire comme un pull qui vous garde au chaud. Dans ce cas, indiquez quels matériaux ou procédés de fabrication ont contribué à rendre possible la solution de votre produit.

Ou peut-être que le problème se situe un peu plus loin dans la hiérarchie des besoins, et que le produit vous aide simplement à avoir l'air plus élégant. Quelle histoire ou processus derrière le produit le rend désirable de posséder ?

Quoi qu'il en soit, en identifiant le problème que votre produit résout, vous pouvez comprendre les questions que votre client se poserait lors de l'achat et adapter votre copie pour y répondre.

Pourquoi votre produit ?

Vous avez établi qu'il y a un problème et comment votre produit peut le résoudre. Maintenant, pourquoi devraient-ils choisir votre produit plutôt qu'un produit concurrent ? Quelles mesures supplémentaires avez-vous prises pour vous assurer que votre pull est le plus chaud ? Quels ingrédients utilisez-vous que personne d'autre n'utilise ? Voici votre opportunité de montrer pourquoi votre produit est spécial.

Même si vous vendez des produits d'un autre fabricant, prendre le temps de montrer que vous comprenez pourquoi ce produit est meilleur, montre que vous avez pris le temps de faire vos recherches.

De quoi est-ce fait?

Le dernier détail à ajouter est ce qui pourrait être considéré comme des métadonnées pour votre produit. Fournir des informations sur les matériaux ou les ingrédients qui entrent dans vos produits aide à compenser l'incapacité des acheteurs en ligne à ressentir les produits par eux-mêmes.

Des informations simples telles que les ingrédients et des instructions de base telles que l'entretien ou l'utilisation prévue peuvent aider le client à visualiser le produit et fournir un plus grand contexte aux moteurs de recherche.

Partie 3 : Créez de superbes images de produits

Vos photos de produits sont souvent ce que le client voit en premier sur la page, et ils peuvent instantanément présenter votre produit sous un jour négatif ou positif. Mais en dehors des premières impressions, les photos de produits aident également à transmettre beaucoup plus de détails que possible avec du texte seul, ce qui peut aider à vendre le produit. Une photographie de produit bien faite peut même réduire le nombre de ressources consacrées au service client et aux retours.

Voici donc ce que vous devez faire pour créer de superbes images de produits :

Commencez par une bonne photographie

Des photos mal éclairées prises sans équipement décent peuvent être un drapeau rouge pour les clients. Ne pas prendre le temps de prendre des photos décentes peut en fait vous coûter plus de temps en matière d'édition.

Mais… vous n'avez pas besoin de dépenser beaucoup d'argent pour obtenir une excellente petite configuration de photographie. Le guide A Better Lemonade Stand to DIY Product Photography répertorie comment vous pouvez vous lancer dans la photographie de produits DIY avec n'importe quel budget.

Vos exigences de base pour une configuration de photographie de produits de bricolage devraient inclure :

• Un appareil photo ou un smartphone de bonne qualité : Vous n'avez pas nécessairement besoin d'un appareil photo reflex numérique pour la photographie de produits. Votre smartphone produira des photos avec une résolution suffisamment élevée et un nombre suffisant de paramètres pour ajuster les conditions de lumière et d'ouverture.
• Une source de lumière constante : votre éclairage doit aider à éclairer les caractéristiques les plus importantes de votre produit et à masquer les ombres. La lumière naturelle est idéale pour commencer car elle n'est pas aussi chère ou capricieuse que l'éclairage artificiel ; Cependant, vous devrez également utiliser une lumière d'appoint ou un miroir pour répartir uniformément la source de lumière des deux côtés.
• Une toile de fond blanche : les toiles de fond blanches aident à dévier la lumière uniformément, donc moins de travail est nécessaire pour corriger le contraste. Cela facilite également l'édition de la photo plus tard à l'aide de la baguette magique ou de l'outil stylo. Vous pouvez utiliser un rouleau de papier ou même une feuille suffisamment blanche pour commencer.
• Une surface stable : pour prendre vos photos uniformément.
• Clips : Pour maintenir votre toile de fond ou votre éclairage en place.
• Un trépied : pour tenir votre appareil photo. Avoir un trépied n'est pas une nécessité, mais il vous aidera à prendre rapidement des photos cohérentes pour de nombreux produits différents. Si vous êtes une entreprise de photographie à un seul homme, cela peut également faciliter les choses et vous faire gagner du temps en post-production.

Utiliser plusieurs images

Il ne suffit pas d'utiliser une seule photo de produit. Les clients veulent voir le produit sous divers angles et perspectives. Votre photographie de produit peut présenter les aspects les plus importants de votre produit bien mieux que n'importe quelle description, il est donc important que vous ajoutiez autant de photos que nécessaire pour répondre aux questions du client.

Différentes photos peuvent également avoir différents niveaux d'importance à différentes étapes du processus d'achat.

Lorsque de nouveaux clients découvrent votre produit pour la première fois, ils peuvent préférer voir des images d'autres personnes utilisant le produit. Ceci est particulièrement important pour les produits – comme le Tile – où le produit lui-même ne suffit pas à illustrer ce qu'il fait, sans parler de ses avantages. L'entreprise utilise donc la photographie de produits pour illustrer comment et pourquoi vous l'utiliseriez :

Mais lorsque vous creusez dans la page du produit, vous trouvez des photos plus détaillées qui se concentrent sur le produit lui-même. Une fois que les utilisateurs sont sur la page du produit, ils ont découvert comment votre produit résout leur problème et sont plus intéressés à savoir à quel point il le fait.

Modifier vos photos

Une fois que vous avez vos photos, vous devez faire certaines choses pour les préparer à la vente au détail. La tâche la plus évidente est de supprimer leurs arrière-plans. Avoir un écran blanc permet de le faire avec l'outil Adobe Creative Cloud Magic Wand ou Pen sans perdre de temps.

Ensuite, vous souhaiterez peut-être ajuster les paramètres de contraste ou d'éclairage pour améliorer la qualité de votre image ou compenser tout changement de l'éclairage naturel. Assurez-vous cependant de garder les conditions de votre image cohérentes; l'ajout de tout type de filtre n'est pas recommandé.

Si vous n'avez pas accès à un logiciel de retouche photo, vous pouvez utiliser des outils en ligne comme Pixlr qui dispose de tous les outils dont vous avez besoin pour effectuer une retouche photo de base. Des services tels que Pixc peuvent également gérer vos besoins d'édition d'images pour vous en prenant vos images non éditées et en renvoyant des photos de produits éditées par des professionnels.

Optimisez vos images

La dernière étape consiste à vous assurer que vos photos sont optimisées à la fois pour la vitesse et le référencement.

Assurez-vous que les tailles de vos images sont raisonnables. Shopify recommande de conserver les images de vos produits sous 70 Ko. Cela peut être réalisé en sachant dans quel type de format de fichier enregistrer vos images. En règle générale :

• Les GIFS sont des images de mauvaise qualité qui conviennent aux icônes et aux vignettes. Ils prennent également en charge l'animation mais ne conviennent pas aux images volumineuses en raison de la taille du fichier et de sa mauvaise qualité.
• SVG est un format vectoriel, ce qui signifie qu'il utilise XML pour décrire le contenu de l'image au format texte. Il chargera les icônes et les images de base presque instantanément et avec une très petite taille de fichier, mais les images normales seront trop complexes à utiliser avec ce format.
• Les images PNG sont des fichiers plus rapides qui prennent en charge moins de compression, ce qui signifie qu'elles conserveront la qualité d'image d'origine. Ils prennent également en charge les niveaux de gris et la transparence, mais la taille du fichier est généralement trop importante pour le commerce électronique.
• JPG fait référence à une méthode de compression qui vous permet de modifier le degré de compression. En règle générale, les images JPG peuvent réduire la taille du fichier jusqu'à 10 fois sans perte de qualité perceptible. Cela les rend idéales pour créer des images de produits de haute qualité et de faible taille.

Assurez-vous également de nommer vos images avec des noms de fichiers appropriés et d'utiliser des titres et des balises alt qui décrivent l'image et le contenu avec précision. Les balises Alt peuvent être utilisées pour inclure des mots-clés notables, mais leur objectif principal est de faciliter l'accessibilité.

Partie 4: Gardez votre photographie de produit cohérente

Les grands magasins de commerce électronique utilisent des photos de produits qui fonctionnent aussi bien sur une page de produit individuelle que dans une collection de produits similaires. Avoir des images cohérentes facilite la recherche et la comparaison de produits et peut également créer une cohérence et un professionnalisme autour de votre marque.

Voici les meilleures façons de garder la cohérence de vos photographies de produits :

Photographiez vos produits sur un fond blanc

L'un des moyens les plus simples de produire systématiquement de superbes photos de produits est d'utiliser un fond blanc. Dans notre précédent article sur la photographie, nous avons expliqué comment vous pouvez créer votre propre configuration de photographie et prendre des photos de produits de qualité professionnelle.

Avoir vos photos sur fond blanc vous permet de :

• Créez une cohérence entre tous vos produits
• Améliorer certains aspects de votre produit
• Modifiez facilement vos photos à l'avenir et
• Vendez vos produits sur des places de marché comme Google Shopping et Amazon qui nécessitent un fond blanc.

Utiliser les mêmes dimensions ou proportions

Rien ne ressort plus sur une page de collection que des images de différentes tailles. À moins que vous n'ayez spécifiquement défini la hauteur et la largeur minimales à l'aide de CSS, vos pages de collection seront un vrai fouillis. Les utilisateurs devront passer leur précieux temps de magasinage à déchiffrer où cliquer.

Considérez même une simple page de collection de produits. Dans quelle mesure est-il plus facile de parcourir et de comparer les produits carrés sur la droite par rapport aux produits multi-tailles sur la gauche ?

Qu'est-ce qui a l'air mieux ?

Bien qu'il existe des applications et des plugins disponibles qui alignent vos images pour vous, la meilleure approche consiste à vous assurer que les images de vos produits sont toujours enregistrées avec des dimensions spécifiques.

Créer vos images avec des dimensions comprises entre 1000px et 1600px sur le côté le plus long est acceptable, mais vous devriez également essayer de garder toutes vos images carrées. Les images carrées auront fière allure, que l'image soit horizontale ou verticale, et garderont vos images cohérentes dans votre magasin.

Utiliser des modèles de produits

Pour créer une boutique de commerce électronique d'aspect professionnel, vous devez créer une cohérence entre vos images de produits. Cela signifie avoir des photos qui ont non seulement la même dimension, mais aussi un style similaire et un positionnement cohérent dans l'image.

Si vous regardez n'importe quel magasin de commerce électronique à succès, vous verrez que leurs images se démarquent d'elles-mêmes mais s'intègrent également bien dans une collection car elles sont toutes positionnées à la même distance de la caméra.

S'assurer que vos produits sont positionnés de manière cohérente sur toutes vos photos peut être délicat. C'est là que les modèles de produits peuvent vous aider.

Les modèles de produits garantissent que vos produits sont positionnés de manière cohérente dans la même zone de la photo et sont correctement mis à l'échelle. Ils peuvent être particulièrement importants si vous incluez du texte sur les images de vos produits.

Pour créer un fichier de modèle de produit de base à l'aide de Photoshop :

• Créez un nouveau fichier photoshop avec la largeur et la hauteur souhaitées. Assurez-vous que votre mode de couleur est défini sur Couleur RVB – 8 bits, la résolution est d'au moins 72 pixels/pouce et le contenu de l'arrière-plan est blanc ou transparent.

• Ensuite, sous « Affichage » dans le menu principal, sélectionnez « Nouveau guide ».

• Créez un guide vertical à 10 % et répétez les étapes pour obtenir :
  • 10% de guidage vertical et horizontal
  • 90% de guidage vertical et horizontal
  • 50% de guidage vertical et horizontal

• Tu devrais finir avec ça :

• Vous pouvez maintenant placer votre image sur le modèle. Les guides vous donneront une référence pour savoir que votre image est centrée à la fois horizontalement et verticalement. Cela vous aidera également à vous assurer que vos produits sont tous placés à une échelle cohérente.

Maintenant, enregistrez simplement votre fichier en tant que document Photoshop standard (.PSD) et vos guides vous attendront. Le guide que vous avez créé vous permettra de télécharger rapidement toutes les photos de produits modifiées et de vous assurer qu'elles ont toujours une belle apparence sur votre site Web.

Partie 5 : Faites passer vos photos de produits au niveau supérieur !

Si vous avez de superbes photographies de produits et d'excellentes descriptions de produits, vous avez tout ce qu'il faut pour une page de produit à fort taux de conversion. Mais, il y a encore quelques dernières choses que vous pouvez faire pour améliorer vos photos de produits afin de vous assurer d'avoir la meilleure page possible.

Accélérez vos images

Les images peuvent avoir un impact énorme sur les temps de chargement des pages. Si vos pages de produits sont lentes à charger, vos visiteurs seront frustrés d'attendre qu'ils se chargent et en visiteront moins. En effet, 40% des visiteurs abandonneront votre site s'il met plus de 3 secondes à se charger. Les pages de produits doivent donc être rapides à charger et faciles à parcourir. Voici plusieurs façons d'optimiser vos images pour y parvenir.

D'une part, utilisez CSS pour l'arrière-plan de votre page au lieu d'une image. De même, CSS doit être utilisé pour créer des bordures autour des images et des éléments de bouton.

Les bibliothèques externes qui chargent des plugins ou des galeries d'images peuvent également ralentir le temps de chargement global de votre page et doivent être évitées pour les éléments critiques de votre page.

Vous pouvez également exécuter votre page via Google PageSpeed ​​Insights pour identifier les moyens d'accélérer à la fois votre site mobile et votre site de bureau. Google PageSpeed ​​vous dira quelles images peuvent être compressées, comment optimiser vos images et combien d'espace vous pouvez économiser en le faisant.

Les outils de développement intégrés de votre navigateur peuvent également identifier comment votre page charge les fichiers et quels fichiers prennent trop de temps.

Pour le faire dans Google Chrome :

• Faites un clic droit sur la page que vous souhaitez analyser
• Sélectionnez réseau"
• Actualiser la page

Vous pouvez trier par fichier « Type » pour voir quelles images prennent le plus de temps à charger, par « Taille » pour voir les fichiers les plus volumineux, par « Temps » pour voir combien de temps ou par « État » pour voir si des fichiers ne peuvent pas être chargé.

Assurez-vous également que vos images sont optimisées pour la vitesse et le référencement en utilisant les conseils de la partie 3.

Optimisez votre page pour mobile

Il est crucial de passer du temps à regarder comment vos pages de produits sont affichées sur divers appareils mobiles. Des outils comme Hotjar vous permettent de créer des cartes thermiques de la façon dont les utilisateurs interagissent avec vos pages. Et, si vous avez installé Google Analytics, vous pouvez comparer vos taux de conversion sur mobile et ordinateur pour déterminer si votre expérience d'achat sur mobile est à la hauteur.

Google Analytics peut vous fournir une mine de données de commerce électronique utiles sur les taux de conversion et les parcours d'achat, mais le moyen le plus simple de découvrir à quoi ressemble votre site Web sur plusieurs appareils est de le découvrir vous-même. À l'aide de la barre d'outils de l'appareil Chrome – ou du mode Responsive Design si vous utilisez Firefox ou Safari – vous pouvez voir à quoi ressemble votre page de produit sur n'importe quel appareil.

Quelques considérations pour vos pages de produits mobiles :

• Mettez vos images au premier plan. Des informations supplémentaires doivent être disponibles pour les utilisateurs quand ils le souhaitent, mais elles ne doivent pas gêner les images.
• Accélérez votre site en vous assurant que la taille de vos images a été réduite et que vous ne chargez pas trop de plugins tiers. Les temps de chargement sont particulièrement importants pour les clients qui chargent sur un réseau mobile.
• Pensez à utiliser une barre de menu fixe afin que le client ait toujours accès à la barre de recherche, au menu principal et au panier.

Les clients passeront moins de temps à parcourir et à lire du contenu sur des appareils mobiles, les images joueront donc un rôle particulièrement important pour vos acheteurs mobiles. Assurez-vous que vos images sont bien visibles et rapides à charger pour vous assurer d'offrir la meilleure expérience d'achat sur mobile.

N'oubliez pas le référencement

Les pages produits semblent souvent être une ressource sous-utilisée en termes de référencement. Vos pages de produits vous donnent la possibilité de présenter certains de vos contenus les plus précieux et uniques qui peuvent aider votre magasin à se classer plus haut dans les listes de recherche. Le plus souvent, la page produit correspond exactement à ce que votre client veut voir.

Pour renforcer le référencement de votre page produit :

• Rédigez une description de produit unique qui décrit clairement votre produit et correspond aux termes recherchés par vos clients.
• Optimisez les métadonnées de votre image en incluant des balises ALT pour décrire l'image, des balises de titre appropriées et des noms de fichiers pertinents.
• Pensez à ajouter des vidéos à votre page produit. La question de savoir si l'ajout de vidéos à votre page aide ou non au référencement fait l'objet d'un débat, mais elles peuvent aider à donner un plus grand contexte à vos produits, ce qui peut améliorer vos conversions.

Optimiser les images pour le zoom

Avez-vous remarqué comment la plupart des sites de commerce électronique vous permettent de survoler l'image pour « zoomer » sur le produit ? C'est devenu une caractéristique qui est presque une seconde nature. Nous nous attendons à obtenir une version plus grande du produit lorsque nous cliquons ou survolons celui-ci.

Avoir cette fonctionnalité sert un objectif important. Il permet aux clients de vérifier en détail la qualité du produit. Cela aide également à inspirer confiance dans l'achat du client lorsqu'il ne peut pas physiquement sentir ou voir le produit. Parfois, la qualité des coutures ou la nuance de couleur peuvent faire la différence entre le client qui choisit votre produit plutôt que celui d'un concurrent.

Alors, comment vous assurez-vous d'avoir une fonction de zoom fonctionnelle ? Le secret est de savoir utiliser les bonnes tailles d'image.

La plupart des sites Web de commerce électronique auront divers « modèles ». Ces modèles redimensionneront votre image pour qu'elle corresponde à cette taille de modèle. Par exemple, vous pourriez avoir :

• Un modèle de vignette de 50px x 50px
• Un modèle d'image de collection de 100px x 100px
• Un modèle d'image connexe de 150px x 150px
• Un modèle de photo principal de 500px x 500px

La fonction de zoom fonctionne généralement en affichant l'image dans sa taille d'origine. Donc, si vous avez une image que vous avez enregistrée à 1000px x 1000px, lorsque vous survolez le modèle de photo principal (qui fait 500px x 500px), elle sera affichée à deux fois cette taille.

Cela signifie que pour que la fonction de zoom fonctionne, vous devez vous assurer que les dimensions de votre image sont plus grandes que votre modèle photo principal.

S'ils sont de la même taille, l'utilisateur regardera la même image lorsqu'il survolera. Mais si elles sont trop grandes, la taille de l'image peut avoir un impact négatif sur les temps de chargement et être trop grande pour être pratique.

Les dimensions de l'image entre 1 000 pixels et 1 600 pixels sont généralement un bon compromis entre la taille du fichier et une image pouvant fournir suffisamment de détails en gros plan.

Conclusion

Dans ces cinq chapitres, nous avons été en mesure de couvrir largement les domaines les plus importants auxquels vous devez prêter attention lors de la création de vos pages de produits. Si vous suivez ces directives, vous aurez une page produit qui offrira une excellente expérience d'achat à vos clients et bénéficiera de taux de conversion élevés. Maintenant que vous avez un guide, c'est à vous de créer une page produit gagnante qui crée des ventes pour votre boutique en ligne.