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…

Zara.fr : une recherche chaotique (1/2)

La mise en ligne du site e-commerce de Zara il y a environ un an a été largement commentée sur internet. En décalage complet avec la plupart de ses concurrents (interface très épurée, absence quasi-totale d’opérations commerciales…), il se détache franchement des n°1 de la vente en ligne que sont La Redoute et 3 Suisses entre autres.

Amateur de minimalisme (mes 3 sites internet l’indiquent assez nettement), son look m’a vraiment emballé.

Il y a quelques jours, j’ai tenté de savoir si l’utilisation du site était à la hauteur de mes espérances. J’ai commencé par une simple recherche « veste homme ». La page des résultats indique que 100 articles correspondent à ma requête.

Étrangement, tous les articles de cette première page sont issus de la boutique femme. Les premiers produits « homme » ne sont visibles qu’en page 2. Et comme il est impossible d’affiner sa recherche, il sera nécessaire de balayer les 9 pages de résultats pour tous les découvrir.

Pour ne rien arranger, seuls 11 produits sont affichés sur la première page alors que 12 emplacements sont présents. L’impression d’avoir devant soi l’ensemble des résultats de la recherche risque de détourner les clients qui n’auront pas jeté un œil au nombre total d’articles précédemment évoqué. Et ce n’est pas la taille du bouton « page suivante » qui les aidera à se rendre compte de leur erreur.

Les courageux qui tenteront de fouiller ces 9 pages devront par ailleurs bien faire attention à ne pas utiliser le bouton « page précédente » de leur navigateur : celui-ci renvoie l’utilisateur à la page qu’il consultait avant de faire sa recherche – dans mon cas la page d’accueil du site – au lieu de lui permettre d’afficher la page de résultats précédente.

Cette première expérience plutôt décevante m’a donné envie de me pencher plus longuement sur certains points. Je m’attarderai donc d’ici quelques jours sur la page-liste du site, qui présente plusieurs éléments qu’il serait intéressant de retravailler.