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.

Poisson Pilote, une excellente collection qui mériterait un meilleur site

Bien qu’amateur de bande dessinée, je ne consulte que rarement les sites des éditeurs. A la recherche d’une date de sortie, je suis allé jeter un œil au site de Dargaud, et plus précisément aux pages relatives à la collection Poisson Pilote. Je ne peux pas dire que l’expérience ait été très agréable.

Dargaud - accueil de la collection Poisson Pilote

La page se divise en 2 parties : à gauche la liste des séries (« Le chat du rabbin », « Back in town », « Biotope »…), à droite un album mis en valeur (ici « Le chat du rabbin »). Je suppose donc qu’un clic sur l’une des couvertures de la partie de gauche va afficher le détail de la série à droite. La réalité est un peu différente : la partie de droite est statique, elle ne se met pas à jour lorsque je clique sur une série de la liste de gauche. Dommage.

Rapidement, au sujet du bas de la partie de droite : le lien « acheter cet album » ne fonctionne pas, le lien « en version digitale sur izneo » me renvoie sur la page d’accueil du site et pas directement sur la série, l’image « App Store » (le texte au dessus est totalement illisible) n’est pas cliquable. Pas très sérieux.

Je reviens sur la partie de gauche. Lorsque je passe mon curseur sur l’une des couvertures, des informations supplémentaires apparaissent (et masquent l’image) : le titre de la série, les noms des auteurs et le nombre d’albums disponibles. En revanche, cette zone « active » n’est pas cliquable, seul le petit lien « en savoir plus » l’est.

Dargaud - rollover sur une couverture

Deux flèches (franchement trop étroites) permettent de découvrir les autres séries du catalogue. Un clic sur l’une de ces flèches fait défiler les couvertures afin d’en afficher quatre autres. Autant dire que pour consulter l’intégralité du catalogue (une cinquantaine de titre selon wikipedia), mieux vaut ne pas être pressé… et ne pas compter sur la vitesse de défilement, qui ferait passer une course d’escargot pour un grand prix de formule 1.

Après avoir repéré une série intéressante, je clique sur le lien « en savoir plus ». Je suis alors logiquement redirigé vers une page contenant davantage d’informations. Pour accéder à une autre série, je dois repasser par la page précédente (via le bouton du navigateur ou le lien dédié), et là horreur : je dois à nouveau faire défiler les couvertures pour revenir à l’endroit où je me trouvais réellement ! Étant donné la lenteur épouvantable du défilement, je doute que quiconque ait le courage de poursuivre la visite.

Je clique à nouveau sur « en savoir plus » afin de revenir à la description détaillée d’une série que j’apprécie beaucoup.

Dargaud - fiche détaillée d'une série

Le fil d’ariane m’indique que je ne me trouve plus dans la partie « Catalogue > Poisson Pilote » mais dans la partie « Catalogue > Série > Le retour à la terre ». Rien de vraiment gênant, sauf lorsque je clique sur le bouton « retour » en haut à droite de la page : ce dernier me redirige sur la partie « Catalogue > Série » et pas sur la page précédente. Si je souhaite y retourner en utilisant les boutons du site, je peux utiliser le menu déroulant de droite, qui mélange étrangement contenu texte (rubrique « à propos de ») et bouton de navigation.

Le contenu de ce menu présente plusieurs surprises. Sur la fiche détaillée de la série « Petits contes noirs », le texte de la rubrique « à propos de » est une description… de la collection Poisson Pilote. Fichtre. La rubrique suivante, « Albums disponibles », ne semble être qu’une reprise du bas de la page « Les albums précédents ». Je note au passage que lorsque je sélectionne un album de cette liste, la zone se transforme en « Vous aimerez également ». Plutôt confus.

Dargaud - fiche détaillée d'un album

Le libellé de la rubrique suivante, « Voir tout l’univers », manque de précision. Qu’est-ce qui compose l’ « univers » d’une série ? Apparemment, il s’agit de différentes éditions (intégrales, rééditions par exemple.)

Le site me propose ensuite divers goodies. Des fonds d’écran tout d’abord, réservés aux écrans pas trop grands (la taille maximale proposée, 1440 x 900, correspond à la résolution d’un écran 19″ de bureau ou 15″ de portable) et dont la qualité laisse parfois à désirer  (le dessinateur de « Commando Colonial » appréciera la qualité du fichier *.jpg qualité 0 proposé en téléchargement).

Des e-cards ensuite, étrangement pas toujours liées à la série évoquée comme sur la fiche d’Isaac le pirate.

Dargaud - ecards "Isaac le pirate"

Je découvre d’ailleurs sur cette fiche la présence d’une rubrique « Autour de la série », dont une partie du texte est bizarrement tronquée.

Cela dit, le plus gros point noir de cette fiche détaillée me semble être la visibilité des planches des bandes dessinées. Je suis passé à côté pendant de longues minutes, sans comprendre comment un éditeur pouvait évoquer ses séries sans en montrer le contenu. En fait c’est très simple : les flèches permettant d’afficher les planches d’une bande dessinées sont situées sur la grande couverture de gauche. Malheureusement comme je le disais plus haut, elles sont très étroites, et parfois sur fond sombre, ce qui les rend franchement difficile à distinguer, comme sur la fiche détaillée de la série « Tout va bien ».

Dargaud - visibilité des flèches de navigation

La taille des planches publiées sur le site ne leur rend pas hommage. On trouve des fichiers plus grands sur Amazon

Dargaud - comparaison d'une même planche sur dargaud.com et amazon.fr

Une dernière remarque, cette fois au sujet du moteur de recherche, en haut à droite de la page. Son fonctionnement est très étrange : il n’est apparemment pas possible de « valider » une recherche – d’ailleurs aucun bouton « rechercher » ou « ok » n’est présent. L’utilisateur est contraint de trouver son bonheur dans les suggestions affichées. Exemple : si je tape les mots « le retour », la saisie semi-automatique me propose « Slumberland, le retour », et c’est tout. Si c’est « le retour à la terre » qui m’intéresse, je devrais me débrouiller sans le moteur de recherche.

Dargaud - saisie semi-automatique du moteur de recherche

Les meilleurs yeux auront repérés le lien « recherche avancée » gris foncé sur fond noir, un peu comme si on voulait le cacher. Je saisis « le retour à la terre » dans le champ  « série » : aucun résultat. Pas facile…

Dargaud - résultat d'une recherche avancée

Bonus

La recherche « poisson pilote » sur Google ne renvoie pas sur le site de Dargaud évoqué ci-dessus mais sur poissonpilote.com, le blog de la collection. Un blog, c’est une très bonne idée, surtout dans le milieu de la BD. En revanche, quand le dernier message date d’il y a plus d’un an…

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 ?