Google maps avant, Google maps après

La nouvelle version de Google Maps est en cours de déploiement ; il ne sera donc bientôt plus possible d’accéder à l’ancienne mouture. J’en profite pour faire une rapide comparaison.

Voici une copie d’écran de l’interface de saisie d’un itinéraire. À gauche, l’ancienne version.

Google Maps : avant, après

Plusieurs changements méritent quelques commentaires. Je commence en haut de l’écran.

• Moyen de transport

Google Maps avant, après : moyen de transport

Ancienne version : boutons de type on/off. Pictos explicites (en voiture, à pieds, à vélo.)

Nouvelle version : une succession de pictos sans bouton. Picto du milieu peu clair (bus, train, transports en commun ?), disparition du picto vélo. Trois teintes utilisées : bleu (sélectionné), gris clair et gris foncé, sans que l’on comprenne au premier coup d’œil la différence entre ces deux couleurs (en fait, le gris clair signifie non applicable). Picto ‘…’ stupide (il me rappelle un peu le picto sandwich qui fleurit un peu partout) et apparemment inutile : au survol deux pictos supplémentaires apparaissent, pourquoi donc les masquer puisqu’il y a suffisamment de place pour les afficher ?

• Zone de saisie

Google Maps avant, après : zone de saisie

AV : deux champs texte. Le texte saisi n’est pas très grand mais reste bien lisible. Le champ sélectionné est cerné de bleu avec une ombre interne. Un bouton à droite permet d’inverser les destinations. Deux liens en texte brut, de petite taille mais bien lisibles, permettent d’ajouter une destination et d’afficher les options. Un gros bouton bleu Itinéraire permet de lancer la recherche.

NV : aucun champ texte. Le texte saisi est plus grand mais moins lisible (la police est sans doute plus claire, ou plus fine et plus lissée, difficile à dire). Le « champ » sélectionné est souligné d’un liseret bleu très peu visible. Un picto ‘+’ moyennement explicite permet d’ajouter une destination ; le texte Options d’itinéraire, gris clair, est cliquable (alors que d’autres textes utilisant cette teinte ne le sont pas). Le bouton permettant de lancer la recherche a perdu son intitulé et se retrouve flanqué en haut à droite de la fenêtre, à côté du bouton Fermer. Note : sur cette copie d’écran ce bouton est bien visible puisqu’il est sur un fond blanc ; en réalité il est positionné par dessus la carte et devient donc moins visible.

• Itinéraires

Google Maps avant, après : itinéraires

AV : trois itinéraires proposés. Ils se présentent sous la même forme : nom de la route aligné à gauche, distance et durée alignés à droite, informations trafic en dessous. Le détail du premier itinéraire (mis en valeur par un fond bleu clair et des caractères gras très lisibles) est directement visible, en dessous des trois propositions. L’information Cet itinéraire comprend des péages est mise en avant à l’aide d’un fond jaune clair.

NV : trois itinéraires proposés. Ils se présentent sous la même forme : moyen de transport, nom de la route et distance alignés à gauche, durée alignée à droite. L’information mise en valeur (en gras) est le moyen de transport, ce qui permet désormais à Google de pousser son nouveau service de vente de billets (voir copie d’écran ci-dessous).

Google Maps : service de vente de billets d'avion

La lisibilité de l’ensemble des textes est problématique : la police plus fine et/ou plus lissée manque vraiment de contraste (gris clair sur fond blanc). Le détail de l’itinéraire principal n’est pas affiché : il faut désormais cliquer sur le lien Itinéraire complet pour ouvrir une nouvelle page et récupérer sa route. Un nouveau lien Aperçu permet d’afficher les étapes de l’itinéraire l’une après l’autre (sur l’ancienne version cette information était disponible au survol des étapes de l’itinéraire.)
L’information Cet itinéraire comprend des péages est illisible et de toute façon très peu mise en avant (un petit picto avertissement a remplacé le fond jaune). Les informations relatives au trafic et à la durée du trajet dans les conditions actuelles de circulation sont désormais privilégiées (textes bleus et verts).

Au final j’ai l’impression que Google donne désormais trop d’importance au look de son outil, au détriment de la lisibilité. Le cas des polices est révélateur : Google a remplacé l’Arial bien contrastée mais un peu old school par une Google font plus claire, plus douce, plus « sympa »… et beaucoup moins lisible. C’est un constat que l’on peut faire sur plusieurs outils et ce n’est pas une très bonne chose, surtout pour une entreprise qui a tant misé sur la facilité d’utilisation de ses produits.

Cdiscount et ses dark patterns

Je me rends aujourd’hui sur le site 24joursdeweb pour consulter l’article de Christelle Mozzati Les dark patterns en design d’interface, article très intéressant et bien illustré dont je recommande la lecture (pas la peine d’aller plus loin sans l’avoir lu !) J’ai été particulièrement surpris de lire que « CDiscount […] ne procède[nt] pas (ou plus) aux dark patterns tels que listés plus haut ». Hum, peut-être pas exactement ceux-là, mais…

Voici la fiche d’un article du site.

Cdiscount - fiche produit

Le prix affiché en énorme et en rouge est de 597,56€. Si je le fais remarquer, c’est bien entendu parce que ce n’est pas le véritable prix de cette machine à laver. Pour le connaître, il faut regarder la minuscule ligne de texte gris clair en dessous du prix : « + Eco Part. : 6,00€ soit un total de 603,56€ ». Le véritable prix ne sera indiqué en gros (et seul !) qu’à la dernière étape du fil de commande, au moment du paiement. Surprise !

Voilà donc un dark pattern en or (allez, en argent, le véritable prix est écrit…) dès la fiche produit du site. La bonne nouvelle, c’est qu’il semble que les comparateurs de prix ne se fassent pas avoir. C’est déjà ça.

Au passage, j’ajoute que considérer le layer « alerte infos » (à droite de l’image – très joli en 1024 x 768 !) comme un élément de design persuasif me semble un peu trop gentil. Je l’envisage plus comme un parasitage intrusif et insupportable (laissez-moi lire votre fiche produit !), mais c’est un avis personnel.

Je clique sur le bouton Ajouter au panier. Je suis redirigé sur une page qui me propose des articles complémentaires… derrière un layer « Garantie sérénité ».

Cdiscount - garantie sérénité

Pas de dark pattern ici, la garantie n’a pas été automatiquement ajoutée à mon panier. Sauf que… Le layer présente deux boutons : Refuser la garantie et Continuer mes achats (beaucoup plus contrasté). Et que se passe-t-il si je clique sur le bouton Continuer mes achats ? Le layer se ferme et… la garantie est ajoutée à mon panier. Le voilà, le dark pattern !

Voici donc mon panier :

Cdiscount - panier

La garantie sérénité est bien présente (le site a un certain culot lorsqu’il indique « Avec cet article, vous avez ajouté » : je n’ai rien ajouté du tout…) Je clique donc sur la petite corbeille pour ôter cette garantie indésirable. Le layer suivant s’affiche :

Cdiscount - suppression garantie sérénité

J’ai cliqué sur la corbeille pour virer la garantie, un layer s’ouvre, instinctivement je clique sur le bouton OUI (le plus contrasté, cette fois encore), pensant que c’est le bouton qui me permettra de supprimer ce truc. Erreur : ici aussi il faut bien lire le petit texte, « OUI je souhaite souscrire à la garantie sérénité ». J’ai cliqué sur un bouton de suppression et on me recolle la garantie ? Troisième dark pattern…

Voilà pourquoi je pense qu’il n’est pas correct de prendre Cdiscount en exemple lorsque l’on évoque l’absence de mauvaises pratiques. D’autres sites sont bien plus recommandables à mon avis – le premier qui me vient à l’esprit est materiel.net mais je n’ai pas été vérifier récemment.

PS. Pour les amateurs de layer (JLPS je pense à toi) voici les deux fenêtres qui s’ouvrent lorsque l’on ajoute au panier certains articles, comme une montre connectée par exemple :

Cdiscount - double layer

Les clients qui ont ajouté l’offre « 60 jours pour vous décider » (à droite sur la capture) et qui souhaitent la supprimer une fois arrivés au panier auront droit au layer suivant :

Cdiscount - fautes diverses

J’apprécie tout particulièrement le texte explicatif bien rédigé « Avec 60 JOURS pour vous décider 0 an, […] » et le libellé du bouton, tout simplement incomplet « OUI je souhaite souscrire à ».

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