Pimkie, une page d’accueil… surprenante

Je découvre sur le site de Mathieu Fauveaux la nouvelle fiche produit du site Pimkie. Curieux, je vais jeter un œil au reste du site.

Voici une copie d’écran de la page d’accueil.

Pimkie.fr - homepage

Autant le dire tout de suite, ma visite s’arrêtera là.

L’inconvénient d’une copie d’écran, c’est que l’on ne voit pas les animations. J’ajoute donc cette mention : le menu « LA COLLECTION », ouvert sur le screenshot ci-dessus, se ferme au bout de quelques secondes.

Je la refais, pour être le plus clair possible : le menu de navigation s’ouvre lorsque j’arrive sur le site et se ferme quelques instants plus tard.

Quel peut être le but de cette animation ? Malheureusement, je n’en vois qu’un seul : les clients ne trouvent pas immédiatement ce qu’ils sont venus chercher sur le site. À ce moment-là, pourquoi, pourquoi ne pas avoir modifié la barre de navigation en y insérant les catégories de produits ?!

L’équipe qui a conçu le site veut manifestement pousser des contenus : blog, jeu concours, looks du moment. Très bien, mais pas à cet endroit ! Les clients s’attendent à trouver les catégories de produits dans la barre de navigation principale, pourquoi y mettre autre chose ?! Point important : ce n’est pas parce que ces contenus figurent à un endroit « chaud » (la barre de navigation principale) qu’ils seront vus par le client.

De mémoire, la barre de navigation principale du site de Pimkie a toujours fonctionné de cette manière. Cette animation à l’ouverture du site me laisse penser que le problème posé par ce choix est connu, alors pourquoi ne pas le résoudre sérieusement plutôt que de chercher des solutions alternatives incongrues, lourdes et peu efficaces ? Cette animation est d’autant plus inutile qu’elle ne concerne que les visiteurs qui passent par la page d’accueil, autant dire certainement pas la majorité.

Bon, voilà pour le point qui m’a le plus marqué sur cette page d’accueil. Cela dit, ce n’est pas la seule chose qui me chagrine, loin de là. Le point suivant est un grand classique du moment : le carrousel.

Pimkie.fr - carrousel en homepage

Je fais court : les slides défilent automatiquement, beaucoup trop vite et en permanence (c’est tellement pénible que j’ai préféré fermer la fenêtre pour rédiger mon article) et le contrôle utilisateur est quasi-inexistant. Confrères concepteurs, je vous renvoie à ces deux articles sur le sujet : 5 big usability mistakes designers make on carousels et Ergonomie des carrousels : 10 principes à respecter. Oh, et à ce bref article de Jakob Nielsen : Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility.

Quant au reste de la page, je fais plus court :

• les textes sont beaucoup trop petits. La barre de navigation principale utilise une police en équivalent 10px, même les liens du footer sont plus grands ! Encore une lecture intéressante (là aussi, on en trouve des milliers sur internet) : 16 pixels for body copy. Anything less is a costly mistake.

• Toujours au sujet de la barre de navigation : les items du menu sont trop proches et peu lisibles. L’ajout de caractères fantaisistes, très tendance bien sûr, n’arrange rien.

• Color forecast : c’est quoi ? Vous connaissez beaucoup de gens qui vont trouver le temps de flâner sur votre site et s’amuser à cliquer sur un lien (joli contraste, au passage) sans savoir ce qui se trouve derrière ?

• Le poids donné aux différents éléments du header me laisse perplexe : l’encart Facebook prend plus de place que les liens « mon compte » et « mon panier » réunis !

• Le faux champ texte d’inscription à la newsletter, en dessous du carrousel, est particulièrement énervant : lorsque je clique dedans pour insérer mon adresse e-mail, une fenêtre s’ouvre et m’impose de remplir un long formulaire (oui, 8 questions pour une simple inscription à la newsletter c’est TRÈS LONG). Pas du tout décourageant.

Pimkie.fr - layer d'inscription à la newsletter

(Il y a même un bouton « Annuler » ! Ça faisait longtemps.)

• L’intégration des encarts sociaux (Facebook, Google+, Youtube, Twitter, n’en jetez plus !) est dégueulasse.

• Plus anecdotique : certaines majuscules ont des accents (NOUVEAUTÉS), d’autre pas (VIDEO, CONNECTES).

• Plus anecdotique mais amusant : on peut faire une recherche sans remplir le champ de recherche.

Bien. Comme je le disais plus haut, ma visite s’arrêtera là.

Design : une illustration peut-être, une infographie sûrement pas !

D’après la définition de Wikipedia (la définition du Larousse ne s’applique pas), l’infographie de presse « désigne des graphes destinés à mettre en image des informations généralement statistiques au moyen de diagrammes. »

Il s’agit d’un moyen très en vogue sur internet (autant dire que ce n’est pas récent) pour illustrer des informations de toutes sortes : l’usage des téléphones mobiles, les revenus des artistes… voire l’utilisation des infographies elles-mêmes. Je me suis moi-même amusé à retravailler mon CV sous cette forme il y a quelques années.

Lorsqu’elles sont bien conçues, ces infographies permettent de mieux comprendre les données qu’elles mettent en scène. Voici un exemple très simple tiré de la première page du site de Dave Mc Candless, Information is beautiful, dont je parlais dans une note précédente :

infographie de Dave Mc Candless issue du site Information is Beautiful

Chaque carré est composé d’une couleur (le type de catastrophe, avec un repère en prime) et d’une surface (l’étendue de la catastrophe). L’ensemble est parfaitement compréhensible et permet de comparer les données entre elles. J’ajoute que l’auteur explique sa façon de procéder dans l’article associé et qu’il fournit un lien permettant de consulter les données utilisées.

Ça, c’est une infographie de qualité : facile à appréhender, utile et claire.

Il y a deux jours, je suis tombé sur un article intitulé « 2011 en réseaux », publié sur le site d’ecrans.fr et relayé ici ou . Je cite la première phrase : « Libération a publié le 30 décembre cette infographie bilan de 2011 sur les réseaux sociaux ». Voici l’infographie en question :

infographie de Liberation "2011 en réseaux"

Cette image met en avant un grand nombre de données. Ces données sont présentées de façon presque totalement anarchique : par nombre d’utilisateurs ? Linkedin devrait se trouver entre Twitter et Google+, pas en bas de page. Par genre ? Google+ et Tumblr, qui n’ont rien à voir, sont côte à côte. Quant aux autres chiffres, ils ne sont pas comparables entre eux : 870 millions d’utilisateurs de Facebook (à mon avis il s’agit plutôt du nombre de comptes existants, ce qui n’est pas du tout la même chose lorsque l’on parle de près d’un milliard de profils), 15 millions de titres disponibles sur Spotify, 500% de tweets postés depuis le Japon dans l’heure qui a suivi le séisme…
(Note : je pourrais continuer très longtemps sur ce sujet, mais je préfère raccourcir.)

Pire : l’illustrateur a ajouté un tas d’éléments visuels qui viennent perturber encore plus la lecture. Que font tous ces oiseaux-logos-de-Twitter partout ? Que font tous ces pictos en plein milieu de l’image ? Et pourquoi mettre un # devant « amywhinehouse », alors que le texte associé ne fait pas référence à Twitter mais à Facebook ?

Quant aux sources, une phrase absolument illisible indique… qu’il faudra se débrouiller pour aller les chercher. L’image était destinée à l’édition papier du journal : peut-être que des liens étaient fournis à côté ?

Alors : une infographie, vraiment ? Si je reprends la définition de Wikipedia, ça ne colle pas : il n’y a pas de diagramme sur cette image. Mais au delà de cette définition, le plus gros problème de cette image, c’est qu’elle informe (vraiment) moins bien qu’une simple liste à puces. En d’autres termes, elle n’est pas seulement illisible, elle est aussi superflue !

Je suis très ennuyé de parler de cette manière d’un travail qui a dû demander beaucoup de temps, mais je n’arrive pas à comprendre comment on peut produire une image de ce type. Cela dit je me trompe peut-être : si la demande initiale était « flanquez-moi toute une série de chiffres relatifs aux réseaux sociaux sur une illustration », ça colle. En revanche, si la demande ressemblait à « aidez les lecteurs à mieux cerner la diversité et l’utilisation des réseaux sociaux », il y avait sans doute beaucoup mieux à faire.

Bonus

En retournant sur le site d’ecrans.fr à l’instant, je tombe sur cet article (en page d’accueil) : « le journalisme les doigts dans les données ». On y lit des choses très intéressantes, comme cette phrase : « Pour le moment, faute de moyens et de réelle volonté, ces travaux qui se revendiquent du journalisme de données restent souvent coincés quelque part entre l’infographie et l’animation de chiffres, n’atteignant que rarement le travail de fond désormais courant dans la presse anglo-saxonne. »

Publier cette phrase quatre jours après avoir publié (relayé) l’infographie ci-dessus ? C’est un choix intéressant.

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 !