Optimiser vos pages rayons pour les sites d’habillement

Un internaute peut arriver sur une page rayon de deux manières. En utilisant la navigation de votre site ou en passant par un moteur de recherche externe. Dans ce deuxième cas, il arrivera directement sur une page rayon (sans passer par la case départ !). Par conséquent, s’il ne s’agit pas de refaire d’autres pages d’accueil, vos pages rayons doivent être séduisantes et convaincantes. Cette page est assimilable à votre catalogue pour un univers spécifique. Ses objectifs sont :

  • Mettre en avant vos produits
  • Inciter l’utilisateur à en savoir plus sur un ou plusieurs produits et le guider vers la fiche produit
  • Provoquer un achat

Voici quelques astuces pour les atteindre.

Les incontournables
Comme sur la majorité des pages de votre site, le header et le footer doivent rester accessibles. Notamment parce que ces deux bandeaux contiennent souvent des éléments de rassurance ainsi que la barre de recherche.

Ensuite, passons aux choses sérieuses à savoir, la présentation de votre catalogue.

Une présentation des produits, oui mais … pas n’importe comment !
Les pages catégories ressemblent fortement aux pages de résultats de recherche. Aussi, plusieurs recommandations faîtes dans notre précédent article (Comment améliorer vos résultats de recherche) sont valables aussi pour cette page.

Commençons par le général. Comme pour la page de résultats, il faut penser à votre entreprise, mais aussi à vos clients. Les promotions et les produits que vous désirez vendre en priorité sont à mettre en avant. Cependant, pour plaire à vos utilisateurs, il faut également placer en première position vos articles les plus populaires. Certains sites optent pour un bandeau contenant les articles les plus populaires ou les plus vus, avant de présenter tous les articles. Cela représente une bonne pratique qui mériterait d’être reprise. Dans la plupart des cas, le tri par défaut des produits est la popularité. Cela satisfait le même objectif. Les derniers produits présentés étant ceux qui ne sont plus en stock. (Pierre Col).

Kiabi a choisi de mettre en avant des produits « Coup de cœur » dans un encart, au-dessus de la liste des produits.
Kiabi a choisi de mettre en avant des produits « Coup de cœur » dans un encart, au-dessus de la liste des produits.

Entrons maintenant un peu plus dans le détail…

Les vignettes produits
Pour donner envie, chaque produit doit être introduit par un aperçu de qualité et de taille assez grande pour voir quelques détails mais pas trop pour optimiser l’espace disponible. C’est le premier élément que l’internaute va regarder et ça doit être le premier élément de la vignette produit. Il va donc influencer les clics sur ce produit. Généralement, la page catégorie va être rapidement balayée pour avoir un aperçu des articles proposés et les comparer entre eux. Encore faut-il que les aperçus soient comparables. Par exemple, il est préférable que les vêtements soient présentés de la même manière. Ainsi, évitez un mélange de « vide habité » et d’aperçus classiques. Par contre, une fois sur la page produit, il est intéressant de multiplier les prises de vues du même produit (mais ça, ça fera l’objet d’un autre article…).

Enfin, pour ne pas surcharger la page mais fournir plus d’informations sur le produit, vous pouvez également, montrer un autre aperçu du produit lorsque l’internaute survole la vignette avec sa souris.

Sur le site de Promod, les produits sont tous présentés portés et au survol, un détail est mis en avant. Ceci permet d’obtenir une quantité d’informations intéressantes avant même d’arriver sur la page produit. Ceci constitue un bon point pour le site.
Sur le site de Promod, les produits sont tous présentés portés et au survol, un détail est mis en avant. Ceci permet d’obtenir une quantité d’informations intéressantes avant même d’arriver sur la page produit. Ceci constitue un bon point pour le site.

 

Sur le site Camaieu, les sacs sont tous présentés de la même manière et le survole permet d’afficher le sac porté. Ceci permet de voir pas mal de détail tout de suite et de se rendre compte de la dimension au survole. C’est également un choix intéressant.
Sur le site Camaieu, les sacs sont tous présentés de la même manière et le survole permet d’afficher le sac porté. Ceci permet de voir pas mal de détail tout de suite et de se rendre compte de la dimension au survol. C’est également un choix intéressant.

Sous l’aperçu, la vignette va contenir le titre du produit ainsi qu’un léger descriptif. Ce descriptif étant très court, il faut sélectionner avec attention les informations qu’il va contenir. Il doit donner envie de cliquer. En fonction de la gamme de produit que vous proposez, vos utilisateurs vont regarder quelques critères spécifiques afin de comparer le produit avec d’autres. Ce sont ces critères qu’ils doivent trouver dans le descriptif. Par exemple, pour les vêtements, ce qui est important ce sont les tailles et les coloris disponibles.

Sur Zalando, les coloris et les tailles disponibles apparaissent au survol. Ainsi, la page n’est pas surchargée mais toutes les informations sont présentes à la demande.
Sur Zalando, les coloris et les tailles disponibles apparaissent au survol. Ainsi, la page n’est pas surchargée mais toutes les informations sont présentes à la demande.

De manière générale sur tout le site, il faut veiller à utiliser le langage de votre cible afin qu’elle puisse trouver facilement ce qu’elle cherche (vous ne créez pas le site pour vous mais pour vos clients). Il est vrai que ça demande un petit effort mais ça ne le rendra que plus utilisable.
Ensuite, élément très important, le prix du produit. Il doit être mis en avant par rapport au reste et ne doit donc pas être noyé dans le reste de la vignette.

Sur Vertbaudet, le prix des produits est bien mis en évidence grâce à sa mise en forme (couleur plus vive, graisse, taille de police plus grande, etc.). Petit bémol pour cette page, le descriptif du produit est souvent placé un peu loin du visuel.
Sur Vertbaudet, le prix des produits est bien mis en évidence grâce à sa mise en forme (couleur plus vive, graisse, taille de police plus grande, etc.). Petit bémol pour cette page, le descriptif du produit est souvent placé un peu loin du visuel.

Comme dit précédemment, l’objectif de cette page est de susciter des clics vers les pages produits. Pour cela, il existe plusieurs solutions. La vignette peut comporter un bouton « voir plus d’infos » ou encore « détails » renvoyant vers cette page. Autre possibilité, la vignette est mise en évidence au survol ce qui montre son caractère cliquable.

Sur certains sites d’habillement, une nouvelle option est apparue sur ces vignettes. Il est possible d’enregistrer un produit comme « favoris » grâce à un bouton souvent nommé « coup de cœur » ou « mes envies ». Cette opportunité est intéressante lorsque l’on souhaite réfléchir avant l’achat ou si on est interrompu avant de pouvoir finaliser la commande. Cela évite de devoir recommencer la recherche.

coup de coeur asos1

Sur Asos, cette option est disponible au survole sous l’intitulé « Enregistrer ». Une fois enregistré, l’intitulé devient « sauvegardé ». Cette option est disponible de manière discrète (au survole). C’est un vrai plus.
Sur Asos, cette option est disponible au survol sous l’intitulé « Enregistrer ». Une fois enregistré, l’intitulé devient « sauvegardé ». Cette option est disponible de manière discrète. C’est un vrai plus.

Toujours pour les sites de vêtements, pourquoi ne pas proposer un guide des tailles ? Bien souvent, la taille fait partie des filtres sur cette page mais le guide des tailles est bien camouflé et n’est visible (et encore pas toujours …) sur la page produit. Présenter cet outil au niveau du filtre taille aidera vos internautes à affiner leur recherche (encore faut-il qu’il soit utilisable…).
Visuellement, vous pouvez proposer un affichage par défaut de 3 ou 4 vignettes par colonne par exemple. Par contre, certains internautes apprécieront d’avoir le choix de personnaliser l’affichage des produits pour l’adapter à leur support de consultation. Aussi, vous pouvez proposer par exemple, d’afficher un produits en plus (ou en moins) par colonne.

Le site Asos propose d'afficher 3 ou 4 produits par colonne et modifie la taille des vignettes pour que la largeur d'écran reste inchangée. Cela permet de choisir entre la quantité de produit visible par ligne et la taille d'affichage.
Le site Asos propose d’afficher 3 ou 4 produits par colonne et modifie la taille des vignettes pour que la largeur d’écran reste inchangée. Cela permet de choisir entre la quantité de produit visible par ligne et la taille d’affichage.
En choisissant 4 produits par ligne, l'utilisateur peut comparer les produits plus rapidement mais l'aperçu est plus petit...
En choisissant 4 produits par ligne, l’utilisateur peut comparer les produits plus rapidement mais l’aperçu est plus petit…

Si la vignette est convaincante, l’utilisateur peut décider d’acheter le produit sans avoir vu la « Fiche produit ». Dans ce cas, inutile de l’obliger à passer par cette étape. Proposez plutôt un bouton « Achat express » en bas de la vignette.

tati achat express

En survolant la vignette, un bouton « achat express » emmène l’utilisateur sur une page très succincte où seules les éléments nécessaires à l’achat sont présents (taille, couleur, quantité, ajouter au panier).
En survolant la vignette, un bouton « achat express » emmène l’utilisateur sur une page très succincte où seules les éléments nécessaires à l’achat sont présents (taille, couleur, quantité, ajouter au panier).

Qu’en est-il de la pagination ?
L’apparition du scroll infini a bouleversé l’affichage des pages rayons mais ne fait pas consensus. En effet, la pagination actuelle engendre des clics inutiles et force l’utilisateur à se souvenir de l’emplacement d’un article qu’il souhaite voir à nouveau ou commander. Et bien que le scroll infini permette d’éviter des clics, ce n’est pas la solution idéale pour autant (comme l’explique très bien cet article http://www.doisjeutiliser.fr/unInfiniteScroll/). Un des principes en ergonomie est qu’un système ne doit effectuer que les actions demandées par l’utilisateur, au moment où il les demande. Ceci permettant une meilleure compréhension. Autre point important, le scroll infini empêche l’utilisateur d’atteindre le bas de page (ou c’est très fastidieux) et de savoir où il en est. En effet, comme l’âne avec sa carotte, l’utilisateur qui pense arriver au bout de sa navigation voit le curseur remonter inévitable et sans aucune indication (fiable !) du chemin restant à parcourir. Par conséquent, le scroll infini n’est pas la meilleure solution ! Néanmoins, il est possible de conserver cette option comme alternative à la pagination classique pour les internautes le désirant. Pour ce qui est de la pagination classique, laissez le choix du nombre de produits par page. Ainsi, vos pages rayons plairont au plus grand nombre.

Ce site propose soit de conserver une pagination classique, soit d’adopter un scroll infini. Ceci semble être un bon compromis.
Ce site propose soit de conserver une pagination classique, soit d’adopter un scroll infini. Ceci semble être un bon compromis.

Aider l’utilisateur dans sa recherche
En général, les utilisateurs ne vont pas plus loin que la deuxième ou troisième page de produits (selon le rapport du Nielsen Norman Group E-Commerce User Experience). Surtout lorsque vous proposez une gamme étendue, il est nécessaire de proposer un système permettant d’affiner la recherche afin de ne pas proposer trop de pages (ceci constitue un autre point commun avec les pages de résultats de recherche). Un système de filtre et de tri EFFICACE est donc important. Si j’insiste autant sur le mot efficace, c’est également parce qu’un système mal présenté ou inadapté peut être pire pour votre site que pas de filtre du tout. Cet outil étant très bien présenté dans notre précédent article, seules quelques précisions seront apportées ici.

Pour la question des filtres, un grand classique consiste à proposer les sous-catégories (elles sont surtout utiles quand l’utilisateur est passé par la barre de recherche ou que la gamme de produits est étendue). Ensuite, regarder les caractéristiques demandées par vos internautes va vous permettre de dégager les filtres qui seront recherchés par ces derniers. L’étendue de votre gamme de produit va également déterminer les filtres qui seront retenus. Il va s’agir des caractéristiques possédant un pouvoir discriminant important. Aussi, si 90% de vos produits possède la même caractéristique, cette dernière ne sera pas retenue pour intégrer vos filtres. Dans le secteur de l’habillement, les grands classiques sont le type de produit (chemise, jeans, polo, etc.), la taille, le prix, la couleur ou encore la marque. Enfin, attention à ne pas en proposer trop ! Ne gardez que les plus pertinents.

Enfin, privilégiez la sélection multi-critères (ou par facette) ce qui évite de passer à côté de certains articles en ne sélectionnant qu’un seul critère.

Par exemple, il est possible de choisir plusieurs couleurs en même temps sur le site Zalando.
Par exemple, il est possible de choisir plusieurs couleurs en même temps sur le site Zalando. Point négatif, seuls quelques filtres sont visibles par défaut et seuls les intitulés sont visibles ce qui engendre des clics inutiles.

Pour ce qui est des tris, ne vous contentez pas de proposer deux flèches qui risquent d’être mal interprétées. Privilégiez une liste qui propose plus d’option que le prix croissant ou décroissant (articles populaires, nouveautés, promos, etc.).
Afin d’être efficace, proposez un rechargement automatique lorsqu’un filtre ou un tri est sélectionné. Autre possibilité, proposer un bouton valider. Dans ce dernier cas, le rendre bien visible et placé près du filtre pour qu’il soit bien vu et utilisable (comme sur l’exemple précédent). Pour le côté technique, utilisez un rechargement partiel de page (de type AJAX) qui diminuera le temps de chargement de la page.

Susciter un sentiment d’urgence
Une fois vos produits bien présentés, ce n’est pas fini ! Vos vignettes ont réussi à susciter de l’intérêt ? Très bien. Cependant, l’utilisateur peut décider d’acheter dans une semaine ou un mois… Pour provoquer l’achat, il faut induire un sentiment d’urgence chez ce dernier. Une possibilité toute simple consiste à placer des étiquettes « Stock limitée », « Plus que X articles », « Nouveauté », etc.

Sur graindemalice.fr, les opérations commerciales ou les nouveautés sont mises en évidence par une étiquette bien visible sur la vignette. Cette mise en forme attire bien l'attention des internautes.
Sur graindemalice.fr, les opérations commerciales ou les nouveautés sont mises en évidence par une étiquette bien visible sur la vignette. Cette mise en forme attire bien l’attention des internautes.

Petite précision concernant les promotions, le prix initial doit obligatoirement apparaitre sur la vignette.
De la même manière, si un produit n’est plus disponible, il faut l’indiquer sur cette page sous peine de décevoir l’internaute. En général, ces produits seront placés dans les dernières pages qui sont peu regardées…

Rassurer pour mieux convertir
Enfin, puisqu’il est question de transactions financières, les internautes ont besoin de se sentir en confiance pour aller jusque l’achat. Cela est valable avant même d’entrer dans le tunnel de commande. Placez des éléments de rassurance sur cette page (comme au-dessus du footer par exemple) permet de ne pas charger la page. Ces éléments doivent informer l’utilisateur sur la sûreté de la livraison, celle du paiement, les conditions de retour, les délais de livraison, etc.

Voilà, à vous de jouer !

6 commentaires

  1. Certains sites de vente en ligne devraient lire cet article car parfois c’est un grand n’importe quoi incompréhensible… et la minute d’après on se retrouve sur un site concurrent beaucoup plus lisible.

  2. Bravo pour cette vision d’ensemble des principaux éléments à prendre en compte dans l’optimisation de ces pages listes. Je mettrai cependant davantage l’accent sur l’ordre des produits car quand on a plusieurs centaines de produits par catégorie, c’est une vraie question stratégique de déterminer l’ordre optimal des produits qui doit idéalement être différent selon le visiteur. En particulier je suis très frileux quant à la règle des « meilleures ventes/produits les plus populaires » qui peut vite devenir un cercle vicieux: un produit en haut de page se vend mieux, c’est donc une meilleure vente, elle est donc en haut de page…:D En résumé une bonne page liste doit être souple, intégrer de nombreuses règles business (popularité et stock certes, mais aussi saison, listes de marques à privilégier, nouveauté, etc.) ainsi que des éléments de personnalisation (ne serait ce que entree de gamme/haut de gamme selon l’historique d’achat et de navigation du visiteur)

  3. Merci beaucoup à Capitaine Commerce pour cet article très détaillé. Pour maximiser l’impact de toutes ces bonnes pratiques sur les ventes, nous recommandons également de réduire au maximum le temps de chargement des pages produit et panier. Une excellente ergonomie accompagnée d’une rapidité extrême est la recette gagnante pour convertir toujours plus.

    Chez Quanta Computing, nous avons pu le mesurer concrètement : suite à un travail d’optimisation chez un de nos clients, nous avons observé jusqu’à *47% de conversion supplémentaire* en travaillant *uniquement* sur le temps de chargement des pages(*). Il est donc important de se doter d’une stratégie de performance technique à coté d’une stratégie SEO, etc.

    (*) Case-study sur cette expérience client à paraitre début septembre.

    Bonne continuation,

    Guillaume

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.