À la recherche de la page produit parfaite

Depuis plus de 15 ans que je fais ce métier, j’ai eu l’occasion d’être impliqué dans de nombreux projets de boutique de ligne. S’il y a bien un exercice de conception sur lequel tout le monde s’arrache les cheveux, c’est celui de concevoir la fiche produit parfaite. Nous sommes tous d’accord pour dire que la perfection n’existe pas et que les objectifs divergent si vous êtes distributeurs (efficacité avant tout) ou fabricants (séduction avant tout). Il n’empêche que l’on peut quand même se poser légitimement la question. D’ailleurs je ne suis pas le seul puisque d’autres se la sont posée aussi : Ecommerce product pages: where to place 30 elements and why et Optimisation d’une fiche produit e-commerce.

Toute la difficulté de la conception d’une bonne page produit est qu’il faut faire rentrer un maximum d’informations en un minimum de place :

  • Le nom du produit, sa référence, sa gamme, éventuellement son fabricant ;
  • Le visuel du produit, le zoom, les autres vues ou vidéos
  • La description courte du produit, l’appréciation des internautes ainsi que les outils de partage ;
  • Le prix, la décote en période de soldes, les variantes, la disponibilité, l’ajout au panier, les conditions de livraison et autres éléments de réassurance ;
  • La description longue, les produits associés et complémentaires, les packs…

Autant vous dire que c’est un authentique casse-tête et que chacun a son interprétation de la fiche produit idéale. L’exercice se complique à partir du moment où vous prenez également en compte la nature du produit (on ne vend pas de la même manière une fringue qu’un produit technologique).

Bref, c’est une quête impossible. Sauf que… il est possible de lister un certain nombre d’exemples qui se rapprochent de la perfection. Chacun ayant ses avantages / inconvénients. Aussi je vous propose de faire le tour des meilleures pratiques en matière de page produit pour de l’habillement. Vous constaterez que la totalité de mes exemples est étrangère, je dois bien vous avouer avoir un faible pour les boutiques en lignes US qui sont particulièrement bien structurées.

Commençons donc notre quête avec le roi Amazon :

La page produit d'Amazon
La page produit d’Amazon

Disons-le tout de suite : c’est très décevant. Malgré le fait que cette page produit exploite la dernière version des boutons d’ajout au panier, l’incitation et la séduction sont au plus bas. De plus, la colle centrale est bien plus chargée que les deux colonnes latérales. Assurément un exemple à ne pas suivre.

Pour remonter le niveau, je vous propose d’étudier le site de GAP :

La page produit de GAP
La page produit de GAP

Là nous avons une page produit beaucoup plus cohérente avec une très belle construction en trois colonnes. Par contre, la photo est un peu trop petite, de même que le bouton d’ajout au panier, rédhibitoire selon moi.

Montons le niveau encore d’un cran avec L.L.Bean :

La page produit de L.L. Bean
La page produit de L.L. Bean

Toujours la même mise en page en trois colonnes, une large place réservée au visuel et une très belle scénarisation de l’ajout au panier en 3 étapes. Les textes sont encore un peu trop petits et la proximité des produits complémentaires avec le bouton d’ajout au panier me dérange un peu.

Poursuivons avec American Eagle, un site que j’utilise souvent en exemple :

La page produit d'American Eagle
La page produit d’American Eagle

Ce site privilégie visiblement la simplicité avec une réduction au maximum des frictions. Du coup, il y a quand même beaucoup d’espace blanc et la description est vraiment minimaliste.

Dans la série minimaliste, je vous propose également John Lewis :

La page produit de John Lewis
La page produit de John Lewis

si vous êtes fan de grille de lecture ben carrée, vous êtes servi ! La lisibilité de cette page est parfaite, par contre elle manque un peu de relief dans la mesure où il n’y a quasiment pas de hiérarchisation de l’information.

Encore plus minimaliste, Le nouveau site de Mark & Spencer :

La page produit de Mark&Spencer
La page produit de Mark&Spencer

Si j’apprécie énormément la petite coche qui accompagne la sélection de la couleur et de la taille avant de mettre au panier, tout cet espace blanc me fait carrément angoisser ! Je ne sais pas pour vous, mais j’ai l’impression que l’on me cache des choses sur ce site…

Tant qu’à faire dans le minimalisme, je ne peux pas faire l’impasse sur The North Face :

La page produit de The North Face
La page produit de The North Face

Là nous avons un bel exemple de page produit 100% visuelle dans la mesure où la description et autres éléments textuels sont relayés en bas de page,  faisant ainsi de la place pour afficher une immense photo. Très bien, mais ça manque carrément de caractéristiques, d’autant plus que cette marque propose des vêtements censés être très « techniques ».

Peut-être la solution se trouve-t-elle dans un secteur connexe, à savoir la chaussure… du coup je vous propose une visite chez Zappos :

La page produit de Zappos
La page produit de Zappos

Là encore, on se contente de strict minimum avec une photo du produit posé sur un mannequin. Certes, les larges gouttières de chaque côté du visuel mettent en valeur le produit, mais le cadre de la photo attire immanquablement l’oeil vers le bas… et les produits associés. Vous devez certainement penser que je suis bien présomptueux de critiquer le site de Zappos, mais j’ai l’impression qu’il joue dans sa propre catégorie, un peu comme Amazon (cette fiche produit est difficilement répliquable, car elle ne fonctionne que pour eux).

Ces chaussures nous amènent vers le site de Crocs :

La page produit de Crocs
La page produit de Crocs

Là nous commençons sérieusement à nous rapprocher de la perfection avec une très belle utilisation de l’espace pour y faire rentrer les éléments essentiels tout en proposant une grille de lecture très rigoureuse afin de bien démarquer les différentes unités d’information.

Finalement le meilleur exemple que j’ai trouvé est celui d’Eddie Bauer :

La page produit de Eddie Bauer
La page produit de Eddie Bauer

Comme pour la boutique précédente, tous les éléments importants sont là, parfaitement agencés, en un minimum de place. Ils ont réussi l’exploit de tout faire rentrer dans un cadre de 1024*768. Certes, cette limitation n’est plus réellement d’actualité en 2014, mais je ne peux que reconnaitre l’excellent travail de hiérarchisation et de structuration de l’information de cette fiche produit. Tout est parfait : lisibilité, contraste, parcours de l’oeil…

Notre recherche de la page produit parfaite s’achève-t-elle sur cet exemple ? Oui, car je n’ai pas trouvé mieux. En revanche, cette page produit ne fonctionne pas sur les smartphones, car ceux-ci nécessitent une conception spécifique (Eight brilliant mobile product pages). La quête continue… si vous avez de bons exemples, n’hésitez pas à les partager dans les commentaires.

8 commentaires pour “À la recherche de la page produit parfaite”

  1. Posté par SébastienCochard a dit : le

    Excellent article, et effectivement un exercice difficile. C’est une de nos préoccupations majeure dans le cadre du développement de notre application. Je serais interessé d’avoir votre avis sur notre produit. pimwi.com
    N’hésitez pas à me contacter directement sur le sujet. Clt

  2. Posté par Christophe BENOIT a dit : le

    Il y a le beau et il y a l’efficace. Parmi tous les exemples cités, je pense que certains ont dû mettre en place des tests utilisateurs et des batteries de tests A/B afin de mesurer quelles mises en pages convertissent mieux.
    Si on prend l’exemple d’Amazon avec un nombre de produits très différents, il doit être difficile de trouver le compromis idéal étant donné que les profils d’acheteurs sont très variés de ceux d’une boutique spécialisée.

  3. Posté par Agence Web Imago a dit : le

    L’important, me semble-t-il, dans une page produit n’est pas tant la position relative des éléments les uns par rapport aux autres que la position où l’on s’attend à trouver un éléments particulier. C’est donc davantage une certaine « norme implicite » des sites de e-commerce qui guide l’organisation de la page produit qu’une logique d’efficacité. Ainsi quasiment tous les sites proposés ici ont la même structure: photo à gauche, add to cart à droite avec sélecteur au-dessus et description en bas.

  4. Posté par Les articles publiés sur mes autres blogs en mars 2014 « FredCavazza.net FredCavazza.net a dit : le

    […] À la recherche de la page produit parfaite […]

  5. Posté par Ambazad a dit : le

    Je fais part de mon modeste exemple (dans la chaussure)
    http://www.ambazad.com/m-by-monderer-scotland-boots-bottines-marron

    On a essayé de faire une approche épurée avec la part belle à la photo du produit.
    Le site est jeune, il va encore évoluer d’ici cet été. On améliorera notamment cette page produit.

  6. Posté par Simple idée a dit : le

    Il n’y a pas de page produit type ou parfaite. Il n’y a que des pages produits qui savent mettre en avant leurs produits. C’est ce qui s’appel joindre la technique et la créativité.

  7. Posté par 42 articles de référence pour les nouveaux e-commerçants a dit : le

    […] À la recherche de la page produit parfaite […]

  8. Posté par Romain Lange a dit : le

    Quid de la page événement parfaite?