Ecommerce UI Design : Comment créer des pages de collection de produits attrayantes (6 tactiques actionnables)

Intro

Les pages de collection de produits sont malheureusement souvent négligées par les concepteurs et les rédacteurs. Alors que beaucoup d'efforts sont consacrés à la création de pages produits et de pages d'atterrissage extrêmement attrayantes, les pages de collection sont laissées de côté et restent tristement inintéressantes.

Examinons six moyens concrets de créer des pages de collection de produits qui suscitent l'intérêt, incitent à l'action et génèrent du trafic et des conversions.

Veiller à ce que la photo principale du produit soit attrayante

Le premier obstacle à la conception des pages de collection de produits consiste à s'assurer que la photo principale est attrayante et intéressante. Si vous ne parvenez pas à capter l'attention d'un acheteur dès qu'il arrive sur le site ou après quelques clics, vous l'aurez probablement perdue.

Commencez par examiner tout ce que vous savez sur votre public cible. Qu'est-ce qu'ils aiment ? Pourquoi aiment-ils vos produits ? Quels sont les aspects de vos produits qu'ils apprécient ? Comment pouvez-vous mettre ces caractéristiques en avant ?

Commencez ensuite à réfléchir à la mise en page. Les images doivent-elles être agrandies ? Ont-elles besoin d'un arrière-plan vibrant ou neutre ? Combien de produits devez-vous présenter à la suite les uns des autres ?

Dans l'idéal, vous effectuerez des tests A/B sur plusieurs variantes de conception. Parfois, ce sont les plus petits changements qui font la plus grande différence.

Regardez cette page de collection de vêtements pour bébés. Les produits eux-mêmes sont mignons et attrayants, ils n'ont donc pas besoin d'être présentés d'une manière particulièrement originale. L'étiquette "nouveau" distingue clairement certains produits et permet au consommateur de les remarquer.

Placer des produits comme celui-ci sur un fond neutre est un excellent moyen de les faire ressortir.

Source : mamasandpapas.com

Une autre façon de rendre la photo principale d'une page de collection attrayante est de montrer l'objet en cours d'utilisation. Si vous regardez cette page de serres adossées, vous verrez comment cela peut être réalisé sans effort. Chaque image est complètement différente, avec une palette de couleurs différente et montrant l'objet sous un angle différent. Il est facile d'imaginer le produit dans sa propre maison.

Source : greenhouseemporium.com

Il s'agit d'une excellente tactique pour permettre au client de voir plus facilement à quoi ressemblera le produit final et l'aider à imaginer un mode de vie complet.

Veiller à ce que les filtres ne soient pas trop gênants

Les pages de collection ont besoin de filtres pour être utiles. On ne peut pas s'attendre à ce que les clients parcourent des pages et des pages de produits pour trouver un article spécifique. Il est peu probable qu'ils soient conscients de l'étendue de votre offre et ils n'ont peut-être pas le temps de faire du lèche-vitrine.

Les filtres doivent permettre de classer vos produits dans des catégories significatives. Le prix, la taille et le matériau ne sont que quelques-uns des filtres les plus courants. Prenez en compte les produits eux-mêmes et les facteurs de différenciation.

Plus le produit est complexe, plus les filtres doivent être nombreux. Vous pouvez également proposer des filtres utiles tels que "pas pour les débutants" ou "seulement pour les professionnels" s'ils aident les clients à sélectionner le bon article.

Les filtres ne doivent pas non plus être trop gênants. Ils doivent être faciles d'accès, mais ne doivent pas occuper une grande partie de la page, ni interférer de quelque manière que ce soit avec l'expérience de navigation.

Jetez un coup d'œil à cette page de collections de lames de terrasse en matériau composite. Les filtres sont présentés sur la gauche et trouvent le bon équilibre entre visibilité et discrétion. Notez qu'ils sont également rabattables, de sorte que la quantité d'informations ne submergera pas le client.

Ils ont également été classés de manière logique - la plupart des gens voudront réduire les couleurs et les matériaux avant de se plonger dans des détails plus spécifiques, comme la taille.

Source : Ovaeda.com Ovaeda.com

Vous pouvez facilement mettre en œuvre une solution similaire qui ne prendra pas beaucoup de place, mais qui améliorera considérablement l'expérience de l'utilisateur et permettra aux clients d'affiner leur choix en quelques secondes.

Afficher une courte description des produits au survol

Considérez les pages de collection de produits comme un centre d'information. C'est là que vous présentez tous les produits d'une certaine catégorie. Plus vous êtes utile, plus le client est susceptible de se convertir.

Essayez de ne pas obliger les acheteurs à cliquer sur un article, à lire la description du produit, puis à cliquer à nouveau. Ils doivent perdre du temps à faire défiler la page pour retrouver l'endroit où ils se sont arrêtés. En outre, s'ils ouvrent sans cesse de nouveaux onglets, ils seront rapidement submergés par le nombre d'articles qu'ils essaient de comparer.

Plus vous pouvez afficher d'informations utiles sur la page de collection, mieux c'est. En ajoutant une brève description du produit lorsque quelqu'un survole un produit, vous pouvez aider les clients à comparer les produits à ce moment précis.

Cette page de la collection de produits bariatriques à base de calcium fait un excellent travail. Vous obtenez une brève description du produit, qui vous indique les vitamines et les minéraux qu'il contient. Les avantages sont également mis en évidence : le produit a bon goût, il favorise la santé immunitaire, etc.

Source : Bariatricfusion.com

Notez la brièveté des descriptions. Vous pouvez les lire en quelques secondes et continuer à comparer les produits.

Lorsque vous appliquez cette tactique, réfléchissez bien à la description du survol. Elle ne doit pas nécessairement être identique à la description figurant sur la page du produit. Elle doit présenter brièvement les avantages ou les principales caractéristiques de l'article, en le distinguant clairement des autres produits de la page.

Concentrez-vous sur l'information plutôt que sur la vente. Les clients sont plus enclins à se convertir s'ils sont sûrs de leur choix.

Ajoutez une preuve sociale

La preuve sociale est un excellent outil pour rendre les pages plus attrayantes et utiles. Elles montrent à vos clients que vous êtes digne de confiance, fiable et que vos produits sont de bonne qualité. C'est particulièrement important pour les nouveaux clients qui ne connaissent pas encore votre marque et qui peuvent hésiter à se convertir.

La preuve sociale se présente sous de nombreuses formes, mais l'évaluation par étoiles est le type de preuve le plus utile à placer sur vos pages de collecte. Elles servent plusieurs objectifs :

• évaluer la qualité du produit individuel
• indiquer combien de clients l'ont acheté et ont pris le temps de l'évaluer
• aider les clients à prendre des décisions d'achat plus rapides

Les classements par étoiles sont faciles à intégrer. Regardez la page de la collection de palettes d'ombres à paupières de Sephora. Elles sont faciles à repérer et affichent toutes les informations pertinentes : le nombre d'avis et le degré de satisfaction globale à l'égard de l'article. Vous pouvez également voir clairement que l'une de ces palettes est beaucoup plus populaire que les autres.

Source : sephora.com

Les notifications de vente en temps réel constituent un autre signal de preuve sociale important à incorporer dans vos pages de collection.

Jetez un coup d'œil à cette page d'autocollants personnalisés pour ordinateurs portables. Pendant que vous naviguez, une fenêtre contextuelle discrète apparaît dans le coin inférieur droit, vous indiquant qui a effectué un achat sur le site web, d'où il vient et ce qu'il a acheté.

C'est un excellent moyen d'ajouter un peu de FOMO à vos tactiques de marketing. Les clients verront d'autres articles, des articles qui sont manifestement populaires parce que quelqu'un vient de les acheter. Cela envoie également des signaux forts de confiance et de crédibilité.

Veillez à ce que la fenêtre contextuelle ne soit pas trop voyante ou distrayante. Essayez également de les espacer afin qu'elles ne commencent pas à gêner les acheteurs.

Source : vinylstatus.com

Afficher plusieurs vues de produits

Plus les clients sont en mesure de voir un produit, plus ils ont de chances de le convertir. Plus vous affichez d'images d'un article sur la page de collection, plus vous suscitez l'engagement et l'intérêt.

Vous pouvez incorporer plus d'une image de plusieurs façons. Vous pouvez autoriser le défilement d'une galerie de produits ou afficher une photo différente au passage de la souris.

Cette page de vêtements pour garçons de H&M comporte une galerie de produits déroulante. Vous pouvez voir toutes les photos qui figurent sur la page de chaque produit directement à partir de la page de la collection, de sorte que vous n'avez pas besoin de cliquer.

Source:hm.com

Si vous préférez afficher une photo différente au passage de la souris, inspirez-vous de la page de cette collection de vêtements de plage pour femmes. La marque affiche astucieusement le dos de l'article au survol, ce qui permet de voir la pièce dans son intégralité sans avoir à ouvrir une autre page. C'est une excellente tactique pour les marques de vêtements.

Source:simplybeach.com

Lorsque vous choisissez d'ajouter une galerie ou une photo de survol, tenez compte de la nature de l'article. Combien de photos l'acheteur a-t-il besoin de voir ? Et quelles doivent être ces photos ?

Vous pouvez montrer le produit en cours d'utilisation ou présenter des photos de clients si elles sont plus susceptibles d'influencer un nouvel acheteur. Vous pouvez montrer l'article de près ou même énumérer les caractéristiques du produit.

Afficher les articles récemment consultés

Les recommandations de produits sont généralement réservées aux pages de produits individuels. C'est également là que les marques placeront le carrousel "récemment consulté".

Cependant, en l'affichant sur la page de la collection, vous pouvez gentiment rappeler aux clients les articles qu'ils ont déjà vus et aimés. Vous leur épargnerez ainsi le temps et les efforts nécessaires pour consulter leur historique en ayant plusieurs onglets ouverts en même temps.

Consultez la page des chaussures de course Adidas pour hommes. Dès que vous visualisez un produit individuel, vous obtenez une fonction "récemment consultés" au bas de la page de la collection, ce qui vous permet de garder un œil sur les articles qui ont suscité votre intérêt.

Source : adidas.com

Le même carrousel est également présenté sur les pages des produits individuels, ce qui permet une expérience de navigation personnalisée.

Vous pouvez également recommander des produits aux clients en fonction des articles qu'ils ont consultés, comme vous le feriez sur les pages de produits.

Conclusion

Réfléchissez aux tactiques de conception de pages de collections de produits que vous pouvez mettre en œuvre sur vos propres pages. Peut-être que les six peuvent jouer un rôle dans l'augmentation de vos taux de conversion.

Gardez toujours à l'esprit la nature de vos produits et les difficultés rencontrées par votre public. Que recherchent-ils et comment vos efforts de conception peuvent-ils les aider à les trouver ?