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…

Dolce & Gabbana : des carrousels dans tous les sens

Je consulte à l’instant l’article de capitaine commerce concernant le lancement du nouveau site e-commerce de Dolce&Gabbana. A l’instar du site de Zara dont j’ai parlé il y a quelques jours, son look m’a tout de suite plu.

Dolce&Gabbana - homepage du nouveau site e-commerce

Plusieurs choix esthétiques risquent cependant de perturber les visiteurs. Je pense tout d’abord aux textes, très petits, et à leur contraste bien trop faible. Peut-être qu’un test utilisateur a convaincu les concepteurs que les clients de D&G avaient 12/10 à chaque œil ?

Je pense ensuite à ce carrousel central, très tendance, mais dont le contenu défile tellement rapidement qu’il est impossible de lire les descriptions associées aux images (cf. vidéo, plus bas.) Déchiffrer plus de 60 mots en moins de 5 secondes, c’est un challenge… Des flèches permettent de passer d’un contenu à un autre (pour ceux qui trouveraient le défilement par défaut trop lent, sans doute) : l’idée est séduisante, mais pourquoi sont-elles invisibles par défaut ? Et pourquoi leur zone de clic est-elle si réduite ?

Un autre point m’ennuie. Tous les éléments des carrousels sont cliquables et renvoient vers les produits affichés. Dès lors, pourquoi ne pas avoir stoppé le défilement lorsque le pointeur survole un élément ? Si je ne clique pas assez vite sur le produit qui m’intéresse, il risque de disparaître…

Au sujet des petits carrousels, justement : les points d’état (les petits ronds noirs, façon iPhone) sont trop éloignés de leurs intitulés, ce qui rend leur association plus difficile. Le visiteur risque d’associer l’intitulé « nouveautés » avec les points d’état du carrousel des produits les plus vendus. Ce problème est d’autant plus gênant que lors d’une première visite, le dernier encart n’a pas d’intitulé.

Autre point plutôt décevant : le lien « inscription » renvoie sur une page au look très éloigné du nouveau site.

Un petit avis personnel pour finir. Les carrousels c’est bien, c’est tendance – cela dit les fondus auraient pu être mieux gérés. Oui, mais… En faire défiler quatre simultanément, n’est-ce pas un peu trop ? Le look final n’est-il pas un peu éloigné de l’image d’élégance que le site véhicule ? Une petite vidéo, pour mieux se rendre compte :

Bonus

Alors que je m’apprêtais à faire une grosse commande sur le site, un petit message situé en bas du panier m’a beaucoup étonné : « Vous pouvez mettre au maximum 7 articles dans le panier ». C’est bien la première fois que je vois un site e-commerce limiter le nombre d’achats que l’on peut effectuer !

Dolce&Gabbana – page panier

Quant aux carrés coloris présents sur les pages listes, soit ils ne sont pas adaptés aux produits, soit certaines photos d’articles sont à revoir…

Dolce&Gabbana – couleurs et carrés coloris assez éloignés

Zara.fr : quelques soucis sur la page-liste (2/2)

La page-liste du site de Zara s’apparente beaucoup à la page des résultats du moteur de recherche dont j’ai parlé dans mon message précédent. On y retrouve donc le problème du bouton « page précédente » en plus d’un certain nombre d’éléments qui pourraient être améliorés. Tous ne présentent pas la même importance ; je commence donc par les plus anecdotiques, visibles sur cette première copie d’écran.

Zara - quelques soucis mineurs

• La balise ALT des boutons permettant de faire défiler les pages est bien remplie… mais avec du texte en espagnol. Pas très sérieux, mais pas bien grave.
Note : c’est aussi le cas du logo du site.

Plusieurs articles ont des dénominations étranges. Sur la première page de la catégorie « T-shirt », on trouve par exemple un débardeur intitulé « chemise texte ». Dans la catégorie « chemises », les 4 premiers produits sont des tops. Pas sûr que la cliente s’y retrouve.
Note : au lancement du site on trouvait des choses bien plus surprenantes. J’avais lu un message à ce sujet mais je ne le retrouve pas, avis aux connaisseurs…

• Certaines descriptions sont agrémentées d’un lien « + Couleurs » qui renvoie vers la fiche produit. Si l’information « cet article existe en plusieurs coloris » est intéressante pour la cliente, le libellé du lien n’est pas parfaitement adapté. Il l’aurait été s’il permettait par exemple l’ouverture d’un layer présentant l’ensemble des coloris disponibles.

• Un clic sur le lien « collection » du breadcrumb me renvoie… sur la catégorie de produits « trenchs et parkas ». Pas très logique. Par ailleurs, l’arborescence de la boutique « femme » pourrait être simplifiée : quel est l’intérêt de ce niveau « collection » puisqu’il est le seul élément de niveau 2 ?

• Lorsque je clique sur le lien « voir tout » tous les produits s’affichent. Pratique… jusqu’à ce que j’affine ma sélection : à chaque nouveau critère, je dois appuyer à nouveau sur le lien.

Je continue avec des problèmes plus gênants, qui concernent à une exception près le module d’affinage.

La taille des boutons de navigation mériterait d’être revue, les 2 flèches sont vraiment trop petites.

• Lorsque je coche un critère (par exemple couleur > « noirs »), la page se rafraîchit et seuls les produits qui correspondent à ma recherche s’affichent. Parfait. Malheureusement, mes critères ne sont affichés nulle part ; le seul indice me permettant de savoir quels critères sont sélectionnés est le graissage du type de critère sélectionné (dans cet exemple, le mot couleur).
Cette absence est gênante pour deux raisons : il est impossible de connaître les critères d’affichage des produits de la page autrement qu’en ouvrant les menus les uns après les autres, et il est impossible de tous les supprimer d’un clic.

Zara - critères sélectionnés masqués impossibles à supprimer d'un seul clic

• L’utilisation de l’affinage par prix est assez obscure, et l’absence de curseur « prix minimal » déroute.

Zara - affinage par prix peu pratique

• Je clique sur « couleur » pour ouvrir le menu correspondant. Si je clique sur une zone vide du menu, celui-ci se referme. Mieux vaut bien viser… Par ailleurs, les intitulés des critères sont cliquables (si je clique sur le texte « noirs », la case se coche) : c’est un bon point, malheureusement peu mis en valeur puisque aucun élément de l’interface n’indique cette possibilité (au passage de la souris, l’intitulé ne change pas d’état – pas de soulignement, par exemple – et le curseur ne se transforme pas en « main »).

Zara - critères cliquables peu mis en valeur

Certaines sélections (même très simples, comme « T-shirt + jaune », « Chaussures + chaussures de sport ») ne retournent aucun produit.

Zara - une sélection simple ne retourne aucun produit

Plusieurs critères de taille sont rangés dans un ordre inexplicable : les pointures ne sont pas dans l’ordre, les ages (mélangés aux codes – XS, XL, L…) non plus. Pire, certaines tailles sont tout simplement incompréhensible (à quoi correspondent les nombres 19, 20, 21 ?) Par ailleurs, j’ai trouvé 2 fois le critère « Autres » (un critère fort utile au passage) dans les couleurs de la sous-catégorie « chaussures femme ».

Zara - ordre inexplicable de certains critères de taille

• Comme je le disais plus haut, lorsque je coche un critère (par exemple couleur > « noirs »), la page se rafraîchit et seuls les produits qui correspondent à ma recherche s’affichent. Parfait… enfin presque, puisque les visuels des articles ne sont pas ceux de la couleur choisie, mais ceux « par défaut ». C’est d’autant plus dommage qu’apparemment tous les produits sont photographiés dans toutes les couleurs possibles (cf. fiche produit).

Zara - les visuels des articles n'affichent pas la couleur sélectionnée

• La catégorie « chaussures » de la boutique femme regroupe plusieurs sous-catégories (« chaussures à talon », « sandales plates » etc.) Étrangement, la sous-catégorie « sandales à talons » ne présente pas le même nombre d’articles que la catégorie « chaussures » agrémentée du critère de sélection « sandales à talons ».
Note : le problème est le même avec les sous-catégories « sandales plates », « talons compensés »…

Zara - mêmes critères, nombre d'articles différent

Bonus

Le premier niveau de l’arborescence du site propose les traditionnelles catégories « femme », « homme », « enfants »… ainsi qu’une catégorie au nom plus obscur, « TRF ». Un clic sur cet intitulé m’indique qu’il s’agit de produits féminins, mais ne m’en dit pas davantage sur la signification de l’acronyme.
Après avoir cherché un petit moment sur le site sans trouver de réponse, je m’en suis remis à Google : le premier résultat de la recherche est le site de la Table Ronde Française, le second une page de Wikipédia traitant d’un groupe de J-pop et le troisième un aéroport d’Oslo. Pas très convaincant. Je demande à plusieurs personnes de mon entourage, certaines travaillant dans la mode : pas de réponse non plus.
Alors d’accord, une recherche un peu plus poussée sur Google me donnera une réponse, mais quand même, ne serait-il pas intéressant d’en dire un peu plus ?
Et ici, quelqu’un connait-il la signification de TRF ?

Bilan

balises ALT mal remplies
libellé approximatif
niveau d’arborescence inutile
fonctionnalités à retravailler
sélections simples vides
affichage des articles dans la bonne couleur
taille des boutons de navigation
affichage des critères d’affinage
détails du layer d’affinage
critères mal rangés
variation du nombre d’articles sur des critères identiques