Bershka, un lookbook à améliorer

Je poursuis mon exploration du nouveau site e-commerce de Bershka (voir la note précédente). Je m’attarde cette fois sur le lookbook, accessible depuis le menu supérieur du site.

Bershka - lookbook homme

Un clic sur ce lien « Lookbook » me renvoie sur une page élégante, à l’aspect très épuré… mais au contenu difficilement déchiffrable. Les textes et pictogrammes affichés au dessus du visuel de fond manquent vraiment de lisibilité.

Les 3 liens du menu de gauche, aux intitulés pas franchement explicites (je suppose que « Bershka » = femme et que « BSK » = adolescente), sont en gris, ce qui ne me permet pas de distinguer la rubrique actuellement consultée. Je déduis du visuel qu’il s’agit de la partie « Homme ».

Je remarque 2 petites flèches en dessous du texte « Lookbook ». Lorsque je clique sur celle de droite, il ne se passe rien. Lorsque je clique sur celle de gauche, il ne se passe rien non plus… Ah si : il faut attendre quelques secondes pour que le contenu se charge. Je me trouve désormais sur le lookbook de septembre, mais apparemment plus dans la rubrique « homme ». J’ai été automatiquement redirigé vers une autre partie (la femme ou l’adolescente, difficile à dire).

Bershka - lookbook de septembre

J’utilise le bouton « page précédente » de mon navigateur pour revenir sur le lookbook d’octobre : je suis redirigé sur la page d’accueil du site. Il n’est donc pas possible de naviguer à travers le lookbook en utilisant les boutons de mon navigateur.

Je retourne sur la page de garde du lookbook et clique sur « BSK ».

Bershka - lookbook BSK

L’utilisation d’un visuel principal sur fond blanc rend certains textes (blancs eux aussi) totalement invisibles ! Quelqu’un a-t-il consulté ce lookbook avant de le mettre en ligne ?

Note : ce problème est apparemment récurrent : on le retrouve dans les rubriques « BSK » et « Homme » du lookbook de septembre.

Je clique sur le lien « Bershka ».

Bershka - lookbook Bershka (femme)

Les éléments du menu, ici sur fond pastel, sont cette fois un peu plus lisibles.

Je m’attarde un instant sur la silhouette principale. Lorsque je passe mon curseur sur le visuel, le texte « voir l’information » (encore une traduction intéressante…) apparaît. Le lookbook permet donc d’accéder directement aux fiches produits ! C’est une très bonne chose, mais une fois encore, pourquoi ne pas mettre cette fonctionnalité plus en avant ?

Je clique sur la silhouette et un nouveau menu apparaît.

Bershka - lookbook Bershka (femme) avec menu

Si j’en crois la première ligne de ce nouveau menu, je me trouve sur le look 3. Étrange, je ne me souviens pas avoir consulté d’autres looks.

Je constate que le premier article que l’on me propose est une paire de chaussures. Le premier… Et le seul en réalité, puisque les petites flèches à gauche et à droite du visuel produit sont ici inactives (pire, elles ont l’air actives mais ne le sont pas). Je refais le test sur la silhouette suivante (intitulé « look 2 », bizarre) : heureusement, deux produits sont cette fois disponibles.

Ce test me permet de trouver un bug (Firefox 7, Safari 5) dans l’affichage des articles de ce petit menu :
• je vais sur le look 2 ;
• je clique sur « voir l’information » ;
• je clique sur la flèche droite pour afficher le second produit ;
• je retourne sur le look 3 en utilisant la flèche à gauche de la page ;
• je clique sur « voir l’information ».
À ce moment-là, plus aucun produit n’est affiché dans le petit menu.

Un dernier commentaire à propos du lien « afficher tout » situé en bas du menu de gauche : comme son nom l’indique, il permet au visiteur d’afficher l’ensemble des silhouettes du lookbook sur une seule page. Malheureusement, aucun lien « retour » n’est présent pour revenir à la page précédente. La fonctionnalité existe, mais elle est cachée : il faut passer son curseur dans les marges (à gauche ou à droite des silhouettes) pour voir apparaître le texte « Volver » (« retour » en espagnol).

Bershka - lookbook "afficher tout"

Note : avec une résolution d’affichage de 1024 x 768 pixels, traditionnellement utilisée comme standard pour la création de sites internet, ces marges sont à peine visibles.

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…