Améliorer les sites internet : la frustration

À la recherche d’informations sur Wexperience, une société roubaisienne d’optimisation de l’ergonomie des sites e-commerce à la performance (page qui sommes-nous), je me suis rendu sur leur compte Twitter. J’y ai découvert ce message : « Nouveau site pour @Lexel_FR : http://www.lexelcosmetiques.com/ #wexperienceinside ». J’ai donc été jeter un œil au site pour me faire une idée du travail effectué (malheureusement sans avoir le détail des modifications / améliorations apportées), et j’ai quitté le site quelques minutes plus tard plutôt… frustré. Si optimiser les sites internet est une belle mission, ne pas être en mesure de le faire « à fond » laisse un goût amer aux responsables du projet. Je m’explique.

Voici la page d’accueil du site.

Lexel cosmétiques - page d'accueil

La première chose que je remarque ici c’est son carrousel, qui cumule plusieurs défauts réellement problématiques (pas forcément visibles sur l’image ci-dessus) :
• un défilement automatique impossible à stopper (un élément qui bouge en permanence devient très vite une gêne pour l’utilisateur) ;
• un défilement automatique beaucoup trop rapide (et tant pis si le client n’a pas le temps de lire le texte de chaque bloc) ;
• un défilement manuel de droite à gauche ou de gauche à droite, sans que l’on comprenne pourquoi le sens change (je crois qu’il ne faut pas mélanger le défilement via les flèches et le défilement via les carrés).

J’ajoute qu’un texte est parfaitement illisible (voir la ligne de texte en gris sur l’image ci-dessus), que les boutons aux intitulés mal choisis (« découvrez », « je découvre », bref rien qui puisse renseigner le visiteur sur ce qu’il va trouver derrière) manquent une fois sur deux de visibilité que les éléments de défilement mériteraient un ajustement de contraste (des flèches gris clair parfois sur fond chargé et des carrés blancs parfois sur fond blanc).

Au niveau du header, plusieurs points me chagrinent également. Placer le numéro de téléphone en haut de la page peut être une bonne idée, mais pourquoi en faire une image ? En terme d’accessibilité c’est une très mauvaise idée. Par ailleurs, plusieurs éléments de ce header manquent de contraste : le moteur de recherche en blanc sur fond très clair en particulier, ainsi que plusieurs textes (« dès 60€ d’achat ») et liens (« newsletter »), qui partagent malheureusement les mêmes codes graphiques (même police, même couleur). Mais ce qui me dérange le plus, c’est l’absence de mise en valeur du menu de navigation (et l’utilisation de majuscules qui ralentit la lecture.) Ne serait-il pas plus agréable pour l’utilisateur de bien cerner l’élément de navigation principal ? Exemple de menu revu, rapidement :

Lexel cosmétiques - header & header revu

J’insiste sur le contraste des éléments du site pour une raison simple : je suppose que ce site est destiné (entre autres) à un public plutôt âgé, qui par conséquent n’a pas forcément une très bonne vue.

Je ne m’attarde pas plus longtemps, je clique sur le premier lien du premier menu et je suis redirigé sur une page liste.

Lexel cosmétiques - pageliste par défaut

(J’ai coupé le haut de la page pour afficher davantage de produits.)

Les photos des produits sont de bonne qualité, et leur homogénéité participe au look épuré de la page. Malheureusement, ici aussi plusieurs points m’ennuient.
• La grille de lecture peu marquée peut créer une certaine confusion. Il y a beaucoup trop de blanc entre les photos et les descriptions, ce qui les rend difficile à associer.
• Les démarques elles aussi mériteraient d’être plus proches des produits (ou de leurs descriptions).
• Les prix barrés sont minuscules et trop peu contrastés : à quoi bon les afficher dans ces conditions ?
• Afficher les premiers mots de la fiche produit est une idée intéressante uniquement si ces premiers mots sont bien choisis. « Programme complet de 6 produits pour prévenir les… » ne me donne aucune information de plus que l’ensemble image + nom du produit « programme complet âge prévention ». Par ailleurs, ces premiers mots ne sont pas cliquables.
• Il n’y a quasiment aucun rollover (à part sur le bouton « ajouter au panier »).

Rien de dramatique donc, mais beaucoup de points qui permettraient d’améliorer l’expérience de utilisateur.

Certains choix m’interpellent également.

Lexel cosmétiques - pageliste traditionnelle

(Retour en haut de la page.)

L’importance donnée au bouton « ajouter au panier » suggère qu’une majorité de clients va ajouter le produit sans passer par sa fiche produit. Pour certaines catégories de produits ça ne me surprendrait pas, mais dans l’industrie du cosmétique j’ai l’impression que la description du produit participe au « rêve » et est particulièrement importante.

Autre chose : le choix de la disposition des produits, en haut à droite de la page.

L’affichage par défaut (celui des 2 screenshots ci-dessus) est le plus traditionnel : plusieurs rangées successives de trois produits.

Le deuxième bouton permet de ranger les produits sur une grille avec deux tailles d’images (ça me rappelle une note sur le blog de Wexperience, d’ailleurs). Là je suis plus perplexe.

Lexel cosmétiques - pageliste multi-tailles

Je ne sais pas ce que cette disposition peut apporter au client. Elle permet éventuellement au marchand de mettre en valeur les produits sur lesquels il fait le plus de marge, mais côté client je ne vois pas réellement l’intérêt.

Au survol d’un produit, la photo disparaît et laisse place à plus d’informations… mais certaines sont omises, à l’image de la démarque, qui n’est cette fois plus visible du tout alors qu’elle était très présente dans le mode d’affichage par défaut. J’ajoute que le nombre de produits à l’écran est en baisse (il passe de douze à neuf).

Mais une chose me semble extrêmement gênante : dans ce mode d’affichage, comment passe-t-on en page 2 ? La pagination a disparue ! Et même si je me positionne en page 3 en affichage traditionnel et que je clique sur le bouton d’affichage multi-tailles, je reviens sur les mêmes neuf premiers produits ! Difficile de vendre les 17 autres dans ces conditions… Ou alors j’ai raté quelque chose ?

Petit aparté : cette disposition me rappelle la page liste du nouveau site d’Habitat, que je trouve vraiment raté. (Question subsidiaire : vous avez trouvé les luminaires sur le site ? Avant, ils en vendaient… Bref je digresse.)

Si je clique sur le troisième bouton d’affichage, je bascule en mode carrousel.

Lexel cosmétiques - pageliste carrousel

Ce carrousel est beaucoup plus agréable à utiliser que celui de la page d’accueil : les éléments de navigation (flèches de défilement, rappel de positionnement) sont bien plus visibles. Cependant, je ne saisis pas non plus l’intérêt de ce nouvel affichage.
• Seuls trois produits sont affichés, le client va donc passer beaucoup de temps à naviguer (et moins à consulter les produits). Par ailleurs cela complique les comparaisons de produits, mais je ne sais pas si c’est un point important dans ce domaine.
• Il n’y a aucune information supplémentaire par rapport au mode d’affichage traditionnel.
• Il n’est cette fois encore pas possible de passer à la page suivante !
En d’autres termes ce mode d’affichage n’apporte rien et multiplie les inconvénients. À quoi bon le proposer ?

Le problème de pagination est d’autant plus important que l’affichage sélectionné reste en mémoire. En d’autres termes, si le visiteur sélectionne l’affichage « multi-tailles » et qu’il navigue sur le site, il ne verra jamais plus de neuf produits par catégories ! J’ajoute que de façon assez étrange, il existe un autre type de page liste, accessible lorsque l’on clique sur les noms des catégories dans le menu principal.

Lexel cosmétiques - pageliste alternative

Ici il est possible de changer le nombre de produits par page, en revanche afficher 12 emplacements pour 10 produits, ce n’est pas vraiment une bonne idée…

Je pourrais continuer longtemps sur ces pages et sur les autres (c’est un métier !), mais ce n’est pas le but de cette note.

J’ai dit en introduction que ma visite sur ce site m’avait laissé un sentiment de frustration. Je suis frustré, parce que je sais qu’une société comme Wexperience ne passerait pas à côté de ce genre de choses. Lorsque l’on fait de l’optimisation de sites, on inspecte un tas de trucs pour fournir la réponse la plus adaptée à la problématique posée. Malheureusement, un certain nombre de cas de figure laissent un sentiment d’inachevé (au mieux) :
• le client souhaite se concentrer sur une seule partie du site ;
• le client n’a pas le budget pour revoir tout le site (ce qui revient au même) ;
• le client fait faire des tests, des études… pour finir par suivre l’opinion du directeur, qui prévaut systématiquement (c’est lui le boss, il sait forcément tout mieux que tout le monde) ;
• le client fait faire des tests, des études… mais ne s’en sert pas (ou peu) au final (ce qui revient au même).

Dans ces métiers nous cherchons tous la même chose : la satisfaction du client final. Malheureusement, les difficultés pour y arriver ne se trouvent pas toujours aux endroits où on les imagine.

J’en profite, puisque je parlais de Twitter (mon compte) en introduction : je suis le compte Twitter de Jean-Marc Hardy, qui tient l’excellent blog 60questions.net. Il y a peu, j’ai lu ce message : « Une petite promenade sur ce site vaut bien 2 jours de formation en ergonomie : http://www.abtests.com/ #abtesting ». Là, je ne suis pas d’accord. Les tests A/B permettent effectivement d’améliorer certains points des sites internet, mais ils ne remplacent pas une bonne formation en ergonomie, pas plus que des tests utilisateurs, des tests d’oculométrie ou toute autre méthode du même genre. Toutes ces techniques sont complémentaires, chacune a ses avantages et ses inconvénients.

Dior.com, suite et fin de l’exploration

Je poursuis ma visite du nouveau site de Dior (voir la première note). Je me rends cette fois dans la partie « Mode et accessoires », rubrique femme.

Dior.com - mode & accessoires Femme

Le carrousel qui m’accueille ici risque de dérouter de nombreux utilisateurs.
Les minuscules puces (façon iPhone, déjà vues sur le site de Dolce&Gabbana entre autre) permettant de passer d’un élément à un autre sont quasiment invisibles ;
le contenu défile en permanence sans qu’il soit possible de l’arrêter, même en cliquant sur l’une des puces ;
le contenu défile de droite à gauche de façon infinie, ce qui empêche le visiteur de cerner l’ensemble des éléments du carrousel.

L’apparence des liens présents sur cette page (header, footer, carrousel… en fait, tous les liens du site !) risque également de perturber la consultation : les polices utilisées sont très petites (les textes du footer en 8pt, sincèrement…) et les liens manquent vraiment de contraste.

J’ouvre le menu en passant sur le lien « Haute couture » et je clique sur « Découvrir ».

Dior.com - découvrir le savoir-faire haute couture

Je suis surpris par le look de la page qui s’affiche alors. Peu de texte, pas de lien visible… C’est en passant le pointeur un peu partout que j’ai découvert que les 2 pavés de textes « Silhouettes légendaires » et « Le savoir-faire haute couture » étaient cliquables !

Un mot au sujet du comportement du menu, assez étrange. Lorsque je place le pointeur sur un élément (par exemple « Haute couture »), un bandeau blanc se déroule du haut vers le bas. Une fois le point le plus bas atteint, les liens s’affichent. Problème : si je déplace mon curseur dans le bandeau blanc avant que les liens ne soient affichés, le menu se referme. En vidéo :

Dior.com – menu from uxui on Vimeo.

Autre petite surprise concernant le menu : le premier élément (le mot « femme ») est suivi d’une flèche qui incite au clic… mais qui n’est pas cliquable. Le mot « femme » l’est, en revanche, mais il nous redirige… sur la page actuelle, ce qui ne présente pas un grand intérêt.

Je clique sur le lien « L’inspiration » de la catégorie « Collection automne hiver 2011 ».

Dior.com - Inspiration

La scrollbar permettant de faire défiler le texte de droite mesure 1 pixel de large ! De nombreux visiteurs risquent de ne pas comprendre que le texte est plus long qu’il n’y paraît, d’autant que le paragraphe se termine proprement (il n’y a pas de ligne tronquée horizontalement permettant de comprendre qu’il reste du texte à lire.)

Et que dire de la lisibilité des liens du bas de la page ?

Retour au menu : je clique sur le lien « les silhouettes », toujours dans la catégorie « Collection automne hiver 2011 ».

Dior.com - défilé des silhouettes

Le look de ce carrousel rappelle celui du mur des vidéos vu dans l’article précédent (il est d’ailleurs plutôt long à se charger, lui aussi). Il fonctionne de la même manière : le déplacement du pointeur sur l’axe horizontal fait défiler les silhouettes.

Petit bug au passage : si j’ouvre le menu et que j’essaie de cliquer sur le lien de gauche « voir le défilé automne hiver 2011 » , rien ne se passe (alors que le lien fonctionne lorsque l’on se trouve dans d’autres parties du site.)

Je place mon pointeur sur la première silhouette : une infobulle s’affiche et m’indique en quelques mots quels sont les vêtements portés par le mannequin. Je clique.

Dior.com - silhouette

Changement de méthode de défilement : ici ce n’est plus le déplacement du pointeur qui fait défiler le contenu, mais sa position. Si le visiteur le place en bas de l’image (dans une zone dont les limites ne sont pas visibles), la photo va se décaler vers le bas. Pourquoi changer de méthode ? C’est une drôle d’idée, d’autant que l’arrêt du défilement (si le visiteur positionne son curseur au milieu de l’image), assez abrupt, manque un peu d’élégance.

Les deux flèches du petit menu de droite permettent de passer d’une silhouette à l’autre sans revenir au carrousel. C’est une bonne nouvelle, chaque retour au carrousel impliquant un rechargement complet de l’ensemble des silhouettes (comme pour les vignettes du mur des vidéos, donc.)

Je clique sur le bouton « détail » de ce petit menu.

Dior.com - détail de la silhouette

Une seule ligne de texte (un texte déjà visible en infobulle sur la page du carrousel) pour présenter les créations de Dior, vraiment ?

Au final difficile d’être séduit par l’expérience proposée par ce nouveau site. Mon opinion rejoint en partie (je n’ai pas traité les mêmes sujets) celle de Fred Cavazza : il y avait vraiment mieux à faire, en particulier lorsque l’on travaille sur la vitrine web d’une enseigne aussi prestigieuse. Une autre fois peut-être ?

Bilan

élément qui incite au clic non cliquable
lien vers page en cours
description des silhouettes
comportement du menu
rechargements inutiles
soucis liés au carrousel (début de la note)
lisibilité (taille, contraste) des liens
navigation invisible
scrollbar invisible
bug

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…