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.

Lemonde.fr : une gestion des liens très confuse

Les articles des sites d’actualités sont fréquemment assortis de liens permettant aux visiteurs d’approfondir le sujet. Sur le site du Monde ces liens sont en bleus, ce qui les distingue bien du corps du texte noir. Ils passent au rouge et sont soulignés en rollover.

LeMonde.fr - liens en bleu, rollover en rouge

En revanche, ces liens ne changent pas de couleur lorsqu’ils ont déjà été visités. C’est un point régulièrement soulevé par certains experts : dans son livre « Site web : priorité à la simplicité », paru en 2006, Jakob Nielsen parle d’un « problème d’utilisabilité à fort impact ».

Dans les grandes lignes, ce comportement permet entre autres aux utilisateurs :
• de ne pas perdre de temps à consulter les mêmes liens de manière non intentionnelle ;
• de revisiter certains liens intéressants.
L’article détaillé se trouve ici. (1)

Sur le site du Monde, il y a plus gênant. En marge des liens bleus évoqués précédemment, on trouve de-ci de-là des « textes cliquables » (j’utilise cette expression pour les distinguer) qui se fondent dans le corps de l’article et qu’il est quasiment impossible de discerner. Sur l’image ci-dessous, les 2 paragraphes visibles ne contiennent pas 2 mais… 8 liens.
Note : l’article est actuellement consultable à cette adresse.

LeMonde.fr - liens cachés

J’ai isolé 2 types de textes cliquables :
les verbes employés à l’infinitif (« engager », « révoquer », « engager » à nouveau, « agir ») renvoient vers le site http://conjugaison.lemonde.fr ;

LeMonde.fr - page de conjugaison

certains noms propres (« François-Marie Banier », « Jean-René Farthouat ») redirigent le lecteur sur un genre de  SERP (acronyme de Search Engine Result Page, page de résultat de recherche). Certains, mais pas tous ! (Le texte « Liliane Bettencourt » n’est pas un lien par exemple.) Par ailleurs, seule la première itération de ces noms propres est cliquable, les suivantes ne le sont pas.

LeMonde.fr - fausse page de résultats de recherche

Pour savoir que ces textes sont cliquables, il faut passer son curseur dessus : après une seconde de survol (sans bouger !), le pointeur de la souris se transforme en main et le texte se souligne. J’ai testé le site sur PC (Internet Explorer 8, Firefox 3.6) et Mac (Safari 5, Firefox 7), le comportement est le même partout.

Question : pourquoi traiter ces liens de cette manière ? Si on estime qu’ils présentent de l’intérêt pour le lecteur, pourquoi ne pas les mettre en valeur ? Si après réflexion on les considère comme peu appropriés, pourquoi ne pas les supprimer ?

Dans l’état actuel des choses, la plupart des visiteurs risquent de passer à côté.

(1) Je suis d’ailleurs assez ennuyé que mon propre site ne suive pas cette recommandation. Ma connaissance de WordPress est encore un peu limitée…

Twitter, OVH : la force d’un réseau social

Il y a deux semaines, au cours de manipulations que je croyais effectuer sur mon site de test, j’ai supprimé mon blog par erreur. J’ai immédiatement contacté le support de mon hébergeur (par téléphone et via l’interface web dédiée), OVH, pour obtenir de l’aide. J’ai ensuite été confronté à une situation pénible : le manque de retour du service technique.

J’explique mon problème au support par téléphone une heure après ma maladresse. J’obtiens rapidement une première réponse par mail (vers 20h30, très fort !) qui me permet de récupérer mes fichiers, mais pas ma base de données. Le site reste donc inaccessible. J’envoie un message au support en expliquant ce nouveau souci, et c’est là que l’attente a commencé.

Il a fallu environ 36h au support pour me recontacter. Une journée et demi sans savoir si l’on va perdre ou non 4 mois de travail, c’est long. Surtout quand au bout de 36h, la réponse du support ne fait pas avancer les choses. L’interface web me propose de changer d’interlocuteur (une fonctionnalité très intéressante) : j’accepte, mais bizarrement c’est la même personne qui me recontactera un peu plus tard pour m’expliquer d’où vient le problème selon lui. Cette fois encore, son intervention ne m’éclairera pas.

Je tente de trouver de l’aide ailleurs. J’expose mon problème en détail sur le forum d’OVH. Un membre (que je remercie à nouveau) me propose de me contacter par téléphone pour essayer de m’aider (une démarche que je trouve toujours épatante !) Après 45 minutes d’échange, il semble que le problème ne puisse pas être résolu sans passer par le support technique, qui ne répond plus à mes messages.

Un peu énervé par ce manque de communication (j’ai des sauvegardes de ma base de données, mais je n’ose pas toucher au site de peur d’interférer avec une intervention en cours), je tweete mon souci à quelques amis followers (14 personnes à l’heure actuelle, pas de quoi faire trembler des montagnes).

Surprise : quelques minutes plus tard, je reçois un mail d’un nouvel intervenant du support (Steve) qui m’explique clairement d’où vient le problème et comment faire pour le résoudre ensemble. 3 heures et quelques échanges plus tard, mon blog était à nouveau en ligne.

Après plusieurs jours de galère, cette soudaine réactivité m’a étonné. Ce n’est que le jour suivant, en consultant mon compte Twitter (je ne suis pas un utilisateur très régulier), que je comprendrai ce qui s’est passé : la veille, 2 personnes d’OVH avaient répondu à mon tweet (tonyovhcom et olesovhcom, directeur général d’OVH). Je suppose que le message est ensuite passé en interne.

Au final j’ai passé une semaine un peu difficile, à attendre des retours du support qui n’arrivaient pas. Un simple message « nous cherchons une solution à votre problème, nous vous recontacterons dès que possible » aurait suffi à m’apaiser, malheureusement mon premier interlocuteur ne m’a pas tenu informé de ses travaux en cours. Mon message sur Twitter a vraisemblablement fait avancer les choses de manière efficace (et inattendue !), et le talent de Steve m’a sorti d’une galère franchement déplaisante. Je salue donc la prestation (aussi bien technique que « relationnelle ») de mon interlocuteur, ainsi que l’aide providentielle de Twitter !