La patience est une vertu.
La patience est une vertu.
Publié le 27 septembre 2011 dans Actualités, Design d'interface
12 commentaires
Optimiser la présentation des produits afin de maximiser les ventes ou la rentabilité est un art qui associe le design, l’e-merchandising et l’ergonomie. Alors que la théâtralisation du point de vente est devenue incontournable dans les magasins physiques, nous retrouvons trop souvent les sempiternelles listes produits où les produits sont rangés quatre par quatre, de même dimension, avec la même mise en forme… Si l’architecture de l’information et les options de filtres sont primordiales, cela n’empèche pas de casser cette organisation afin de mettre en scène, séduire et amuser. L’expérience utilisateur, votre image de marque et la mémorisation de votre site en sortiront grandies.
Certains ont déjà eu de bonnes idées, il serait dommage d’en faire l’impasse. Commençons avec le site Tiffany & Co.
Liste produit du site Tiffany & Co.
Le site Tiffany & Co. varie la taille des visuels produits pour créer une dynamique dans la présentation des produits. Au survol s’exécute un zoom sur le visuel ce qui accentue cette dynamique. Il est toutefois dommage de devoir changer de page pour voir le reste des produits. Une liste infini qui se charge au fur et à mesure de notre descente dans la page aurait donné plus de cachet à cette page. Ce que fait d’ailleurs le site de Stella McCartney, notre exemple suivant.
Liste produit du site Stella McCartney
Ici le site a fait le choix de proposer un carrousel discret (les flèches du carrousel, très graphiques, manque de visibilité) en tant que premier élément de la liste. Ce carrousel utilise des visuels de grande taille ce qui permet de mettre un article en tête de gondole ainsi que d’inviter à parcourir la liste. Burton reprend ce principe de tête de gondole pour ses produits populaires sans pour autant proposer un carrousel.
Liste produit du site Burton
La taille du visuel du premier élément de la liste est très grande ce qui invite fortement au clic. Petit plus : il est possible d’afficher l’article dans d’autres coloris directement depuis la page rayon et cela sans rechargement de page. Et contrairement aux exemples précédents, Burton ne fait pas l’impasse sur les filtres produits. Ces derniers sont accessibles en haut de page via un menu apparaissant au survol.
Varier la taille des visuels de la page rayon permet de créer une dynamique dans la présentation de l’offre. Et nous avons vu à travers les exemples de Burton et Stella McCartney qu’il n’y a pas besoin de fortement s’émanciper des présentations classiques. Toutefois d’autres sites vont plus loin et créent de véritables mosaïques. C’est notamment le cas du site Piiq.
Liste produit du site Piiq
Ici l’interface crée du rythme dans la page en proposant trois tailles de visuels. La présentation des produits est originale et fonctionnelle. Il y a fort à parier que cette présentation en mosaïque, ou du moins la variation de la taille des visuels dans les listes produits, se développera sur les sites e-commerce et figurera dans les Trends de conception de l’année prochaine. A surveiller de près !
J’avais déjà vu cela il y a un moment sur headict.com
Je trouve le concept fort intéressant car il casse la monotonie et je pense d’ailleurs l’utiliser pour un futur projet.
Maintenant reste le choix des tailles pour tel ou tel produit, soit mettre en avant l’un d’entre eux, soit laisser place à une taille aléatoire…
Sur Headict c’est bien fait, par contre sur le dernier, je trouve ça trop gênant à cause de 3 tailles différentes.
Et je pense que ça dépendra de l’image que la marque veut se donner.
Un exemple de variation grandes images/petites images tout au long de la page:
http://www.headict.com/fr/110-bonnet-mode
La Redoute met aussi en avant le 1er produit (souvent un produit La Redoute en promotion):
http://www.laredoute.fr/achat-homme-t-shirt-polo.aspx?categoryid=22898417
Oups, j’avais pas vu l’exemple Headict avant…
Chez Tiffany un simple rollover affiche un zoom produit. Il faut attendre un court instant pour que la description et le prix s’affichent. C’est un comportement assez particulier (différence rollover / rollover après 1 seconde).
Les flèches du carrousel du site de Stella Mc Cartney sont effectivement quasi invisibles, et sur ma machine elles ne transforment pas le curseur en « main » (un bug je suppose). Là encore les prix ne sont affichés qu’au rollover.
Pour le site de Burton c’est différent, il n’y a pas de prix puisqu’ils ne vendent pas en France. (Ce qui est assez frustrant d’ailleurs.)
Chez Piiq les prix sont affichés sur les images les plus grandes, pas sur les plus petites. Cela rend l’ensemble difficile à scanner.
Dans l’ensemble ces pages-listes sont très élégantes (celle de piiq me plaît beaucoup, ça doit être mon côté amateur-de-grilles), mais je me demande si elles ont été confrontées à leurs visiteurs.
Les tests utilisateurs effectués chez La Redoute sur ce genre de pages-listes ont montré que les visiteurs aimaient le look mais n’appréciaient pas du tout de devoir passer leur curseur sur tous les produits pour en connaître le prix. Mais ce ne sont sans doute pas les mêmes utilisateurs, et surement pas les mêmes produits.
Merci de ce retour d’expérience.
Ces exemples sont là comme source d’inspiration et leur ergonomie n’est pas la meilleure possible. Et bien sûr cette disposition un peu particulière doit être adapté à l’offre produit. Si la Redoute veut s’inspirer de ces sites pour refondre leurs listes produits, il sera nécessaire d’inclure des réflexions ergonomique lors de la conception, les tester par des utilisateurs voire les confirmer par des tests A/B.
Pour l’affichage du prix, je vous rejoins tout à fait, il s’agit d’une information capitale qui guide les utilisateurs dans leurs réflexions d’achat.
Piiq est un vrai beau contre exemple d’ergonomie cognitive, accumulant tout ce qui empêche une expérience utilisateur optimale.
[…] permet de ranger les produits sur une grille avec deux tailles d’images (ça me rappelle une note sur le blog de Wexperience, d’ailleurs). Là je suis plus […]
[…] permet de ranger les produits sur une grille avec deux tailles d’images (ça me rappelle une note sur le blog de Wexperience, d’ailleurs). Là je suis plus […]
Enfin un peu d’audace dans des e-commerces. J’adore cette présentation
Effectivement, c’est une disposition difficile à mettre en place correctement et Headict en fait une belle démonstration. C’est un peu le fouilli sur le dernier en particulier…
Very nice! ecdfekdfbd