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à.

Expérience utilisateur : little big mistakes, les petites erreurs qui agacent (Lastminute, Carrefour, EDF)

Petite compilation de bugs, d’oublis et de mesquineries glanés sur l’internet ces derniers jours.

• Lastminute : les cases invisibles

Je lance une recherche sur le site de Lastminute. Après avoir patienté quelques secondes, je suis redirigé sur cette page d’erreur :

Little big mistakes : Lastminute, cases invisibles

Le message indique : « Veuillez relancer une recherche en cochant l’option dates flexibles ». Très bien, mais où puis-je trouver cette case ? Plus loin : « Veuillez aussi ne pas cocher la case vols directs ». Euh… Même question ? J’ai jeté un œil aux combo box à tout hasard, je n’y ai rien trouvé.

J’en profite pour relever une erreur que je croise fréquemment : si j’ai un fils de 2 ans, dois-je le compter comme un enfant (2-11) ou comme un bébé (0-2) ? Dans le doute, je choisirai ce qui me coûte le moins cher…

Une dernière petite remarque. Je ne suis pas certain que beaucoup de gens lisent les messages commerciaux que l’on trouve sur des pages d’erreur, mais tout de même : l’encart de droite, qui liste les avantages du voyage sur mesure, reprend deux fois le point « la flexibilité des dates et horaires de voyage ». Ça ne gênera pas grand monde, c’est le principal.

• Carrefour : triste sournoiserie ?

Je souhaite créer mon espace personnel sur le site de Carrefour. Je me rends donc sur cette page :

Little big mistakes : Carrefour, petite sournoiserie ?

Je passe rapidement sur la balise <title>, qui m’indique que je suis sur la page… « recherche » du site. Je note également que l’url de la page ne me donne pas beaucoup d’informations.

La première rubrique « Vos identifiants » mériterait une structure mieux pensée : séparer à ce point les champs « e-mail » et « confirmer l’e-mail » n’est pas une très bonne idée (même remarque concernant les champs relatif au mot de passe) ; quant au captcha je me demande ce qu’il fait ici. Mais ce n’est pas ce qui m’intéresse.

Ce qui m’intéresse, c’est la troisième partie, étrangement intitulée « Votre information ». Au premier coup d’œil, je distingue quatre cases, bien alignées, à gauche de la page. Les libellés des cases fonctionnent tous de la même manière : d’abord un message qui indique de quoi il est question (exemple : « Recevez des informations de la part de Carrefour Market »), puis la phrase « Si vous le souhaitez, cochez cette case. » Jusque là, pas de problème — même si la tournure pourrait être moins lourde.

Le problème vient de la première phrase du paragraphe. Cette première partie ne fonctionne pas du tout de la même manière que les quatre cases qu’elle surmonte. En terme de structure : la case se trouve à la fin de la phrase, et pas alignée à gauche comme les quatre autres. En terme de message : il ne faut pas cocher la case « si vous le souhaitez » comme c’est le cas en dessous, il faut cocher la case « si vous ne le souhaitez pas » !

Cette façon de présenter m’étonne — à vrai dire, je ne suis même pas sûr qu’elle soit légale. Si je ne dis pas de bêtise, cette première case fonctionne en opt-out, c’est-à-dire qu’il faut la cocher pour éviter de recevoir des messages de Carrefour et des autres sociétés du groupe. Or il me semble bien que cette méthode est interdite en France.

• EDF : un e-mail bien mal conçu

Je me suis inscrit au service « relevé de compteur » d’EDF. Je reçois donc une fois tous les 2 mois un e-mail m’indiquant de faire mes relevés et de les transmettre à EDF.

J’ai reçu mon premier e-mail il y a quelques jours. Je pense qu’il se passe de commentaire.

Little big mistakes : EDF, un e-mail bien mal conçu

À vrai dire je ne sais pas si le problème vient de l’e-mail ou du webmail. Ce que je sais, c’est qu’EDF aurait dû le tester.

J’espère qu’il s’agit d’un bug ponctuel : le webmail de Voila est le même que celui d’Orange, et j’imagine que de nombreux utilisateurs d’Orange sont aussi abonnés au service « relevé de compteurs »…

Expérience utilisateur : interlude sécurité

L’une de mes premières notes traitait du site d’Ameli et de la sécurité toute relative qu’offre un mot de passe composé uniquement « de 8 à 13 chiffres ». En ajoutant les contraintes « pas de numéro de sécu, pas de suite de chiffres ni de date de naissance personnelle », je tablais sur un grand nombre de dates de naissance (enfant, conjoint) et de numéros de téléphone.

J’ai aujourd’hui trouvé plus fort. Chez Verspieren, le mot de passe doit impérativement être… une suite de 4 chiffres. Je table cette fois sur un (très) grand nombre de dates de naissance et de codes de carte bleue (ou de codes PIN, ce qui revient au même, non ?)

Interlude sécurité - un mot de passe à 4 chiffres chez Verspieren

Note : j’aime beaucoup la mention « site sécurisé » en bas à droite.

Verspieren est une mutuelle (entre autre). On trouve ainsi sur le site différentes données plus ou moins intéressantes : le nom du client, son adresse, son numéro de téléphone, son e-mail, son numéro de sécurité sociale, ses coordonnées bancaires, ses remboursements, etc.

Quatre chiffres pour protéger ce genre de choses ? 10000 possibilités, est-ce vraiment sérieux ?

J’en ai discuté avec une amie. Sa réaction m’a particulièrement étonné : « Tu sais, la Caisse d’épargne fait pareil ». Une banque ?!

Je me rends sur le site de la Caisse d’épargne, j’entre son identifiant client pour tester et je valide. La page se recharge et m’affiche ceci :

Interlude sécurité - le clavier spécial 4 chiffres du site de la Caisse d'épargne

Il s’agit bien d’un code confidentiel à 4 chiffres. Avec une petite différence toutefois : il est impossible de taper le code dans le champ dédié. L’utilisateur doit impérativement utiliser le clavier numérique affiché sur la page, clavier dont les numéros s’affichent dans un ordre aléatoire.

Je ne sais pas ce que cette méthode vaut en terme de sécurité (mais 4 chiffres, ça m’inquiète un peu). Je ne sais pas non plus ce qu’elle vaut en terme d’accessibilité (mais j’ai une petite idée). Ce que je sais, c’est qu’en terme d’expérience utilisateur, cette méthode n’est pas satisfaisante du tout.

Je suis très surpris de voir des sites aussi importants imposer des mots de passe aussi faibles.

Il y a quelques jours, une personne a hacké (je suppose) mon compte Vimeo. Je ne sais pas comment ça s’est passé*, j’ai simplement constaté qu’une vidéo au titre particulièrement explicite avait été postée sur mon compte. Mon mot de passe n’était pas extrêmement sécurisé (j’utilise différents mots de passe, je les sélectionne entre autre en fonction de l’importance des données protégées) mais présentait tout de même 8 caractères alphanumériques.

Interlude sécurité - compte Vimeo hacké

S’il est si facile de récupérer un mot de passe potentiellement complexe, j’ai bien peur que quatre petits chiffres ne résistent pas longtemps à une personne mal intentionnée et un peu douée…

Bonus

On trouve à l’inverse de très bonnes initiatives visant à sécuriser l’accès à un compte personnel. Chez Twitter par exemple, l’utilisateur est assisté lorsqu’il crée un mot de passe. Un message lui indique en temps réel le niveau de sécurité du code utilisé. (L’image ci-dessous est un gif animé, apparemment elle ne s’anime pas lorsqu’elle est redimensionnée… Il faut cliquer dessus pour l’afficher.)

Interlude sécurité - assistant de création de mot de passe Twitter

* Je me suis toujours connecté depuis mon ordinateur portable, que je n’ai jamais prêté et que j’avais avec moi le jour où c’est arrivé. J’ai peut-être commis une erreur, j’aimerais bien savoir laquelle.