Ce billet propose une analyse de la construction des pages de catégorie à travers l’exemple du site Anntaylor.com
Sur Anntaylor.com, toute la place est donnée aux photos produits
Tandis que la page produit et la home page se disputent toutes les faveurs des ergonomes et des merchandizers (oui, oui, je sais que j’exagère un peu), la page catégorie, cette intermédiaire « encombrante » entre les points d’entrée et les points de sortie du site, est souvent le parent pauvre des refontes de site : « On n’a qu’à mettre les photos en colonnes, mettre un ou deux filtres et hop ! pas besoin de se casser plus la tête », peut-on entendre.
La page catégorie est stratégique
Appelez la « page rayon » ou « page univers », comme vous voulez, c’est dans celle-ci que les internautes font leurs choix, qu’ils fouillent du regard des dizaines de produits et qu’ils décident de cliquer dessus ou… de partir. C’est pourquoi, en réalité, il est primordial de s’attacher à présenter les pages de catégorie de manière à retenir le plus possible l’attention de l’internaute, de le séduire et de l’aider à faire son choix dans des gammes parfois très larges.
Bien souvent, pourtant, cette page n’est qu’un empilement de vignettes trop petites, à la lisibilité douteuse, empêtré dans des multitudes d’informations parasitant la lecture, prix barrés, stickers de promos, etc.
Comment améliorer l’usabilité de cette page ?
Pour moi, il faut rendre le choix des produits agréable, clair et lisible, simple et reposant. Aussi une page catégorie se devrait de respecter plusieurs règles :
- des visuels suffisamment grands pour bien voir le produit
- des informations textuelles discrètes qui ne viennent pas perturber la lecture des articles
- un système de filtre pour pouvoir rapidement classer les produits
- un module de navigation rapide (des liens de pagination en haut et en bas, assez grand pour que l’internaute puisse bien cliquer dessus)
L’important pour moi demeurent les visuels. Sur tous les tests que j’ai pu réaliser, la plupart des internautes fouillaient une page du regard en ne regardant que les photos. Les informations nom du produit, prix, taille ou couleur n’étaient pas prises en compte dans ce qu’on pourrait appeller une recherche purement visuelle. Après tout, c’est comme en magasin, avant de regarder l’étiquette, vous fouillez les rayons du regard, puis de la main, vous ne regardez le prix que si un produit vous plaît et vous vous moquez parfaitement de la façon dont il s’appelle. Seul le web a besoin de dénommer les produits pour aider à comprendre leur nature (et aussi pour que le moteur de recherche puisse le retrouver), mais un bon visuel devrait normalement se suffir à lui même.
L’esthétique des produits n’est souvent pas mise en avant
Il est étonnant que si peu de marchands, surtout dans la mode, ne mettent pas plus en avant l’esthétique de leurs produits. C’est une question de budget, me direz-vous. Il est vrai que peu de sociétés ont les moyens de « shooter » leurs produits spécifiquement pour le web et proposent aux internautes des photos propres à ce média. Toutefois, je pense que cela se fera de plus en plus à l’avenir. On ne fait pas de photos produits pour le web comme on le fait pour un catalogue (suivez mon regard 
). Les sites, comme en France MonShowRoom.com, qui montrent des photos prises pour le web ont un véritable avantage concurrentiel qu’il ne faut pas négliger.
Un contre-exemple : Anntaylor.com
Mais ne blâmons pas les commerçants français, car leurs homologues américains ne font pas tellement mieux, excepté peut-être pour AnnTaylor.com que je viens de trouver (grâce à Twitter, c’est génial Twitter, rhoooo). Regardez bien la manière dont les produits sont organisés dans la page catégorie (qui peut être aussi la page de résultats de recherche, soit dit-en passant).
- La taille des photo est « immense » : 325 sur 400px
- Les produits sont « portés » sur des mannequins dans des poses qui mettent en valeur le « tombé » du tissu, mais aussi qui sont toutes à la même échelle (rien de pire qu’une page catégorie avec des produits dans des échelles de taille différentes)
- Il n’y a aucun espace entre les photos, tout est réservé aux visuels : les visuels, rien que les visuels
- Les prix, les remises, les options ne sont affichés qu’au survol de la souris. Encore une fois, l’objectif est de ne pas encombrer le regard d’informations qui ne sont pas utiles durant la recherche visuelle de l’internaute
C’est un véritable régal que de surfer sur ces pages qui approche le plaisir que l’on a à feuilleter les pages d’un catalogue papier (quoiqu’on dise, le papier a encore beaucoup d’avenir). Tout va dans le sens d’une séduction maximum. Le regard, donc l’attention, sont suffisamment retenus pour que l’internaute n’ait pas envie de s’enfuir. C’est vraiment une belle réalisation !
J’ai juste quelques petites questions?
- Par « page catégorie », vous entendez bien page listant des produits de la même catégorie et non pas page listant les différentes catégorie?(c’est con mais au début de la lecture j’ai vraiment douté…)
- Quels sont selon vous les différences entre un shoot web et un shoot catalogue papier?
Pour finir je pense aussi que ça dépend pas mal de la nature du produit (et la façons dont le client à l’habitude de le percevoir). La catégorie « barrette de mémoire vive » en photo je suis pas sur que ça cartonne. Et il manque peut être un petit mot sur les fonctions de « tri » et non pas de « filtre », comme discuter hier, essentiel à ces pages listant des produits.
@Marco : merci de tes questions. Il s’agit bien de la page listant les produits et non pas celles listant les catégories qui devrait ne plus exister à mon avis.
Concernant les photos : pour le web, nous nous étions beaucoup posé la question chez 3 Suisses de savoir s’il fallait mettre des vides habités, des portés ou des photos d’ambiance. Je ne vous donnerai pas la réponse car elle concerne uniquement 3 Suisses, mais sachez que les 3 étaient bonnes en fonction de la nature de la navigation du client.
Pour moi, shooter des photos pour le web, c’est prévoir à l’avance des expositions de mannequins plein pied sur fond neutre, si possible dans une pose unique ou variant légèrement. C’est également prévoir d’autres propositions comme des photos produits (je précise que je parle de la mode) « posées à plat ». C’est également prévoir à l’avance des shoots sur les détails des produits : un bouton, une couture, une étiquette, etc. Concernant des produits en « volume », chaussures, sacs, prévoir des photos sous plusieurs angles. Tout cela n’empêche pas la photo d’ambiance qui était plutôt la règle dans le catalogue.
Quand aux autres types de produits, cela dépend évidemment de l’importance du visuel dans le facteur déclenchant d’achat. Comme vous le dites, pour une barette mémoire, on s’en f… excepté que la photo de celle-ci peut quand même apporter des renseignements sur sa compatibilité avec un PC. Dans ce cas, pas besoin de zoom, une photo claire et suffisamment grande jouera son rôle.
Pour un produit blanc, évidemment qu’il faut beaucoup de photos : sur le produit en plan large, sur des détails de l’interface d’utilisation, sur son intérieur, sur son extérieur. Un zoom ne sera pas forcément nécessaire.
Bref, à chaque typologie de produit sa configuration.
Pour moi qui suis un visuel, tout ces détails comptent beaucoup, mais les tests utilisateurs ont pu me faire rendre compte que je n’étais pas le seul.
Merci OlivierS pour ces précisions. Faut dire que je suis pas un grand connaisseur du métier de la mode aussi^^.
Et effectivement le visuel est souvent plus important que le produit lui même, surtout pour le grand public (c’est un peu la base du marketing quand on y pense). D’autant plus sur internet ou on ne peut pas toucher, sentir, gouter un produit. L’entendre c’est un gros sujet de discussion à part.
Cette analyse est intéressante pour les produits prêt-à-porter / mode mais pas pour les produits techniques qui nécessitent d’avoir plus d’infos en page liste pour commencer à comparer les produits. Le critère d’achat n’est pas le visuel (je vous mets au défit de choisir une TV dans une page liste où elles se ressemblent toutes en faisant votre choix uniquement basé sur la photo). Il faut alors un minimum d’infos (prix, note des internautes, plus produits…). La présentation passe alors très souvent en mode horizontal.
C’est discutable ton histoire de critère sur les TV… Parce que dire que le visuel ne compte pas dans l’objet que l’on regarde le plus dans dans un salon je trouve ça assez marrant. Pour des machines à laver (histoire de rester dans la mode^^) j’aurais rien dit mais là.
Tu met une photo de la TV avec la valeur de la diagonale sur l’écran, un sticker prix, le logo de la marque et pour finir un logo HD-Ready autre du style t’as toutes les infos de comparaison qu’attendent 90% des acheteurs potentiels. Tout tiens sur une image et c’est 10X plus lisible qu’un tableau.
Après y a le choix final entre peut être 2-3 produits mais la on passe par la fiche produit détaillée plutôt.
Bonjour
De base, il ne faut négliger aucunes des pages composant la navigation de l’internaute à travers la palette de produit composant votre offre.
C’est vrai que le gros problème pour un généraliste (comme 3 Suisses) est d’arriver à proposer une navigation qui fonctionne aussi bien avec des barrettes mémoires qu’avec des articles de mode. Pour un petit e-commerçant spécialisé dans une gamme de produit c’est normalement plus facile (comme toujours il y aura des exceptions qui confirment la règle).
Dans l’exemple donné la liste est bien présentée mais je trouve qu’il manque quand même un ou deux articles de la gamme choisie mis en avant pour générer des ventes impulsives ou dirigées.
Devant trop de choix donné l’indécision peu nuire à la navigation et au final aux conversions. Il ne faut pas oublier que certains clients ont besoin qu’on leur montre ce qu’il faut acheter. Mettre un ou deux produits en « focus » en haut de la page permet de contenter ce type de clientèle.
Par contre, je ne sais pas si c’est un bug chez moi mais lorsque je clique sur l’une des photos rien ne se passe (J’ai un firewall au travail qui bloque parfois des javascripts liés).
@Marco Guignard : Mis à part la différence au niveau de la scénographie des photos destinées au web il faut savoir que l’espace calorimétrique d’une photo imprimée par rapport a celles utilisée pour le web n’est pas le même (RVB – CMJN).
Un bon retoucheur pour le print fini ses retouches (équilibrage couleurs) en CMJN. En CMJN on a moins de couleurs disponibles.
Il serait idiot de limiter l’espace calorimétrique du RVB pour une utilisation web qui permet d’offrir un bien meilleur rendu sur les lumières. Par contre en voulant donner du « peps » à la photo attention à ne pas tomber sur des couleurs qui ne correspondent plus à la réalité des motifs imprimés sur les vêtements (en poussant le contraste c’est si vite arrivé).
Attention au coté obscur de la retouche jeune Jedi…pchh…
Oups je voulait dire : Colorimétrique bien sûr
Deux fois la même faute j’ai fait fort
@Marco Guignard
« Tu met une photo de la TV avec la valeur de la diagonale sur l’écran, un sticker prix, le logo de la marque et pour finir un logo HD-Ready autre du style t’as toutes les infos de comparaison qu’attendent 90% des acheteurs potentiels. Tout tiens sur une image et c’est 10X plus lisible qu’un tableau. »
==> Qui le fait correctement ?
J’ai pas vu ça souvent… Faut pas confondre une page liste web où la place est limitée car il faut pouvoir balayer toute l’offre et les tracts publicitaires que tu reçois dans ta boîte aux lettre où tu as plus de place pour t’exprimer sur ce type de détails visuels.
Boulanger : non http://www.boulanger.fr/webapp/wcs/stores/servlet/CategoryListDisplay?storeId=10001&cache=yes&jspStoreDir=BoulangerStg&categoryId=16303&redirect=true&langId=-2&catalogId=10001&ddkey=CategoryDisplay
Darty : non http://www.darty.com/nav/achat/hifi_video/televiseurs-grand_ecran_plat/index.html
Pixmania : met les pictos mais c’est illisible en page liste http://www.pixmania.com/fr/fr/59/xx/xx/8/3/criteresn.html
Rue du commerce : non http://www.rueducommerce.fr/TV-Hifi-Home-Cinema/85-TV-LCD/
…
Sympa l’image d’ambiance en début de page liste (qui pourrait aussi servir de tête de gondole avec un petit prix en plus) ;o) !?
Marco, je ne suis pas en phase sur le principe de rassembler toutes ces infos sur la même image. Ton exemple qui pourrait fonctionner avec une TV, n’est pas viable sur tous les produits.
Sans parler du fait de poluer un visuel par des infos qui pourraient être affichées en texte (référençable) ?
En tous cas, merci Capitaine pour ce bench très sympa ;o) !
@Nico: Effectivement si ça peut fonctionner sur la TV je suis d’accord que sur d’autre type d’article c’est pas possible.
@Sylvain: Ces sites sont des « généralistes », on remarque que la présentation de catégorie est pareil que ça soit pour un ipod, un appareil photo ou une TV (pas pousser la recherche jusqu’à la machine à laver). Il n’y a aucune optimisation pour mettre en valeur les listes d’articles en fonction de leur nature mais uniquement une solution passe partout générale. Ca revient à ce qu’à dit Munchausen, c’est un casse tête pour eux (et c’est la que un site spécialisé peut faire la différence sur les grosses usines à gaz entre autre).
Et vu qu’on me demande un liens présentant une liste de TV présentée uniquement par des images.
http://www.bang-olufsen.com/video
@Marco : bien vu pour BO mais cette marque est spécialisée sur le design et c’est leur principale clé d’achat.
Tu remarqueras qu’à la redoute, il y a des pages listes « séductions » (prêt-à-porter) et des pages listes « techniques » car on ne vend pas une TV comme on vend une jupe, tout site « généraliste » qu’on soit (enfin qu’on fut car je n’y bosse plus):-)
[...] Ne négligez surtout pas la page catégorie [...]
Je viens de mettre un billet en ligne sur l’affichage grille/liste de la page catégorie sur http://www.jible.fr/e-commerce-afficher-les-categories-en-grille-ou-en-liste
ca peut donner des idées et des pistes