Castorama : un enchainement page-liste / fiche produit mal maîtrisé

La transition entre la page-liste et la fiche produit est un point souvent abordé lorsque l’on parle de site e-commerce. Comment faire en sorte qu’une fois sur la fiche produit, le client puisse facilement accéder aux autres articles de la catégorie ?

Il existe plusieurs techniques offrant à un visiteur la possibilité de balayer rapidement tous les produits d’une page-liste. La plus populaire en ce moment semble être la mini fiche produit (également appelée « Quickview », « Quicklook »…), qui permet d’afficher le détail d’un article sans quitter la page-liste.

L’équipe du site de Castorama a choisi une autre méthode : le carrousel en haut de la fiche produit. Le but de ce billet n’est pas de comparer les 2 techniques, mais de montrer les difficultés que peuvent rencontrer les visiteurs du site de Castorama.

Je me trouve ici sur la page-liste de la catégorie « étagère et armoire », qui comporte 56 produits comme me l’indique le message situé en haut de la page.

Castorama.fr - page-liste

En dessous de la tête de gondole, j’ai accès aux 4 premiers articles de la page. Je clique sur le quatrième, « meuble 4 tiroirs Concept résine 91 x 65 x 45 cm », pour accéder à la fiche produit correspondante.

Castorama.fr - fiche produit avec carrousel

Cette page peut être découpée en 2 parties : le contenu « traditionnel » d’une fiche produit en bas, surmonté d’un carrousel permettant d’accéder à d’autres articles sans repasser par la page précédente.

Premier problème rencontré : il est vraiment difficile de distinguer le produit sur lequel je me trouve parmi tous les articles du carrousel. Le fin contour (2 pixels) bleu canard cernant la miniature manque de visibilité.

Deuxième souci, très gênant : le nombre de produits de la catégorie a été revu à la baisse, passant de 56 sur la page-liste à 17 ici. Où sont passés les articles manquants ? Je me trouve pourtant toujours dans la même catégorie si j’en crois le fil d’ariane. Pour ne rien arranger, l’ordre de ces articles a également été modifié. Dans ces conditions, il est vraiment difficile de s’y retrouver.

Pour finir, les flèches de navigation ont un comportement relativement inattendu : elles ne sont pas cliquables, un simple survol suffit à faire défiler les produits. Et comme les états « il y a des produits de ce côté » et « il n’y a plus de produit de ce côté » sont visuellement identiques, il faudra attendre d’être arrivé au bout du carrousel pour être sûr qu’il n’y a plus rien à voir.

La bonne nouvelle, c’est que contrairement à d’autres sites, il est toujours possible de cliquer sur le bouton « page précédente » de son navigateur pour revenir sur la page-liste.

Il y a beaucoup à dire sur les sites e-commerce de bricolage (et de décoration, et de jardinage, et de…), j’y reviendrai plus tard.

Bonus

Le site de Castorama a été mis à jour durant la rédaction de ce billet. L’opération s’étalant sur plusieurs minutes, une page d’attente accueillait les visiteurs pendant toute la durée de l’intervention.

Castorama.fr - site indisponible, page d'attente

Malheureusement, cette page ne présente aucun lien permettant de « renouveller [sa] visite ultérieurement ». Et comme son url est différente de celle de la page d’accueil, un simple rafraîchissement ne donnera rien. En d’autres termes, il est nécessaire de retaper l’adresse à chaque nouvelle tentative. Pas très pratique.

Snailmailmyemail, un menu presque bien conçu

Snailmailmyemail est un projet étonnant du designer Ivan Cash évoqué sur plusieurs sites ces derniers jours. Son principe est simple :
1. j’écris un message à un ami (ou à qui que ce soit), à l’aide de Word ou Writer par exemple ;
2. je le transmets par mail à l’équipe du projet ;
3. une personne du team Snailmailmyemail le transpose sur papier, y ajoute une petite touche personnalisée et l’envoie gratuitement par voie postale à mon ami.

Le site du projet se compose d‘une page unique découpée en plusieurs rubriques (accueil, galerie, à propos…) Cette structure de plus en plus utilisée présente au moins deux avantages pour l’utilisateur : le contenu est chargé en une fois et est accessible d’un simple coup de roulette.

Snailmailmyemail - page unique (image redimensionnée)

Snailmailmyemail propose également un menu dynamique collé en haut de la page permettant aux visiteurs d’atteindre le contenu qui les intéresse.

Petit plus bien senti : le menu indique à l’utilisateur la rubrique qu’il est en train de consulter (lorsque je lis la partie « galerie », le mot « galerie » du menu est mis en valeur, même si je n’ai pas cliqué dessus pour y accéder.)

Petit point négatif : c’est un soulignement qui indique la rubrique affichée. En d’autres termes, l’élément actif est souligné alors que le reste du menu ne l’est pas.

Différencier l’élément actif des autres éléments du menu est une très bonne chose. Mais utiliser le soulignement, signe distinctif des textes cliquables, pour mettre en valeur un élément qui ne l’est pas, est un choix franchement étrange.

Petit avis personnel autour de l’ « expérience utilisateur » du projet : j’aurais aimé recevoir un message de confirmation (quelque chose comme « votre mail nous est bien parvenu, nous allons le traiter au plus vite »)  après avoir envoyé mon mail à l’équipe. A part ça rien à signaler, l’idée m’a beaucoup plue et mon amie a été très surprise de recevoir une lettre de Minneapolis !

Note : je ne suis pas très fluent en Facebook, du coup je me demande : pourquoi le compteur en haut à droite de la page indique plus de 4000 « j’aime » alors que celui en bas à gauche est actuellement à 650 ?