À 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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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.