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.

Expérience utilisateur : Muji, un site… poussiéreux ? (1/2)

Muji est une enseigne que j’apprécie. Le concept initial, illustré par le nom d’origine « Mujirushi Ryohin » (d’après le catalogue, « produits de qualité sans marque »), me plaît beaucoup. Malheureusement pour moi, les seuls magasins français se trouvent à Paris ou en région parisienne (9 là-bas, aucun ailleurs.) Je me rends donc sur leur site internet pour acheter quelques fournitures de bureau.

En un clin d’œil, je suis de retour 10 ans en arrière. (Un clin d’œil d’une vingtaine de secondes tout de même, le temps pour le site de se charger.)

Note : je ne rentre pas ici dans le détail de chaque page ; je me concentre sur les différentes étapes de ma commande.

Muji.fr - accueil

La page d’accueil remplit son rôle : je trouve rapidement la catégorie de produits qui m’intéresse. Je clique sur « papeterie », dans la colonne de gauche.

Muji.fr - catégorie

Début des réjouissances. Qui a eu l’idée d’utiliser une police aussi petite (de l’arial 10 px apparemment) ? Et pourquoi afficher de si petites images ? La photo du cahier est plus petite que le logo de la Société Générale en bas de la page !

Message personnel : intégrateur, n’affiche surtout pas le code source de ce site. Jamais. (Quatre mots issus de Web Developer, pour l’exemple : « 6 profondeurs de tableaux ».)

Je clique sur le cahier.

Muji.fr - page liste

Bienvenue en 1998.

Premier point, la lisibilité : si les images sont cette fois un peu plus grandes, le texte est lui toujours aussi petit. Pour ne rien arranger, les descriptions des produits sont ENTIÈREMENT EN MAJUSCULE. J’ajoute que le sigle ‘€’ a été étrangement remplacé par les 3 lettres « EUR », que cliquer sur le caractère ‘2’ constitue un challenge en soi, etc.

Je ne vais pas répéter sans arrêt que la lisibilité des textes est mauvaise. J’arrête… non sans avoir précisé que la personne chargée de cet aspect a sans doute également travaillé sur la lisibilité du catalogue papier (disponible ici — attention, ce fichier pdf extrêmement lourd de 6Mo « nécessite une connexion haut-débit »), dont voici un extrait :

Muji.fr - extrait du catalogue

Second point : la présentation. Aucun tri n’est possible : par taille (A4, A5, etc.), par nombre de pages, par prix… rien. Il n’est pas non plus possible d’augmenter le nombre d’articles affichés.

En tête de gondole, les carnets que je recherche. Je clique — sur l’image, puisque la description n’est pas cliquable.

Muji.fr - page d'erreur

Produit non trouvé ? En tête de gondole ? Pas très sérieux, d’autant que cette erreur est en ligne depuis plusieurs semaines il me semble…

Le bouton « continuer » ne me redirige pas sur la page liste pour faire un autre choix mais sur la page d’accueil du site. Bon… Je reviens sur la page précédente et je sélectionne un autre carnet.

Muji.fr - page produit

Bienvenue en ex-URSS.

La description de ce produit est composée de : 4 mots. « Couverture », « kraft », « Format » et « A5 ». De façon intéressante, cette description réussit à être moins informative que le titre de la page, puisque ce dernier contient l’indication supplémentaire « à lignes ».

Bien sûr, la description d’un carnet ne requiert pas des centaines de mots. Cela dit, il y a tout de même une chose que l’on s’attend à trouver : le nombre de pages. Ici, il n’est tout simplement pas indiqué. (Dans le doute, je jette un œil aux carnets A4 et A6 : rien.)

La photo du produit, toujours aussi petite, est accompagnée d’un lien « cliquer pour agrandir ». Je clique : le visuel mesure 287 px. On est loin des 1200 px de La Redoute par exemple.

Muji.fr - zoom produit

Allez, pour un simple carnet, ce n’est pas bien grave. Et sur la fiche produit d’un lit, par exemple, l’image est un peu plus grande. En revanche, on ne trouve pas d’autres photos du produit. Quant à sa description…

Le carnet me convient, je décide de le commander. Je clique sur le bouton « ajouter », un bouton perdu sous le visuel du produit et au contraste proche de zéro. Et là, il ne se passe rien.

Muji.fr - ajout au panier

Ah, si : la ligne de texte située au dessus du visuel indique désormais « 1 produits | 2 EUR » (la faute d’orthographe, c’est cadeau). Étant donné la taille du texte… Mais j’ai dit que je ne revenais pas dessus.

Je termine cette première partie sur une note plus positive. Puisque le nombre de pages du carnet n’était pas indiqué sur la fiche produit, j’ai contacté une boutique Muji par téléphone. Une personne m’a répondu et est allée me trouver l’information directement dans le magasin.

Bien sûr, ça fait un peu vingtième siècle, mais au moins j’ai eu l’information que je cherchais !

Interface utilisateur : les détails qui font la différence (vidéos)

Sur le principe de littlebigdetails*, quelques exemples de détails d’interfaces plus ou moins utiles qui nous simplifient la vie.

• Mac OS X : menu contextuel dynamique

Le clic droit offre à l’utilisateur de la plupart des systèmes d’exploitation un certain nombre de commandes pas ou peu accessibles autrement. Certaines fonctions restent cependant masquées, comme « ajouter au menu démarrer » sur Windows XP par exemple (il faut maintenir la touche Shift enfoncée avant d’effectuer un clic droit pour faire apparaître cette ligne.)

Les concepteurs d’OS X ont pensé à une alternative pour ces fonctions cachées : elles s’affichent dynamiquement (c’est la différence avec l’exemple ci-dessus) lorsque l’utilisateur enfonce la touche Alt.

• Mac OS X : affichage en colonnes et lisibilité du texte

Le Finder de Mac OS X permet à l’utilisateur de sélectionner un mode d’affichage parmi quatre. Le mode « colonnes » présente l’ensemble des fichiers de la machine sous forme de colonnes successives.

Lorsque la colonne est trop étroite pour afficher le nom entier du fichier présenté, des points de suspension remplacent les lettres manquantes. Mais avant d’afficher ces points, OS X diminue légèrement l’interlettrage afin de garder le nom du fichier entier.

Vous me direz : au lieu de s’amuser à implémenter ce genre de fonctionnalités, les concepteurs du Finder feraient bien d’améliorer le Finder lui-même. Je suis bien d’accord.

• Dailymotion : progression de la vidéo

Un classique. Lors de la lecture d’une vidéo sur Dailymotion (et lorsque le pointeur de la souris ne se trouve pas sur la vidéo), le logo « Dailymotion » situé en bas à droite se remplit progressivement de blanc.

Bien sûr, on pourrait assez facilement faire l’inverse de Littlebigdetails et créer un blog répertoriant les erreurs les plus « évitables » qui soient.

• Littlebigmistakes : publier une vidéo sur Vimeo

Pour publier une vidéo sur Vimeo avec un compte gratuit, il vaut mieux être patient : le site impose un délai de 30 minutes entre le moment de l’envoi et la mise en ligne réelle du fichier. Soit, c’est une restriction comme une autre. En revanche, j’ai été très surpris de voir qu’il existait une limite à la taille du fichier publié. Une limite… basse, c’est-à-dire qu’il est impossible de mettre en ligne une vidéo trop légère !

Littlebigmistakes - poids minimal d'une vidéo sur Vimeo

L’erreur ici est de ne pas préciser quelle est cette limite…

• Littlebigmistakes : mettre à jour ses logiciels Adobe

Application Manager est un petit programme d’Adobe qui s’installe automatiquement avec la suite CS et qui permet de maintenir à jour l’ensemble des logiciels qui la composent. De temps en temps, lorsque je lance l’un de ces logiciels, une icône apparaît dans la barre supérieure de l’écran. Si je clique dessus, un message m’indique que « [l’]Ouverture de l’actualiseur [est] en cours… ». (Note : la vidéo suivante contient une musique qui illustre assez bien le propos.)

L’ouverture n’est évidemment pas en cours ; pour afficher l’actualiseur il faut cliquer sur le libellé. Un bien mauvais choix de mots…

* Littlebigdetails.com est un blog visiblement très apprécié sur lequel différents contributeurs publient de nombreux détails d’interfaces qui les interpellent.