Archives des picto - Page 2 sur 2

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.

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

• 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

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

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

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.

Une amie m’a transmis hier via Twitter un lien intitulé « Les français et le nouveau monde du numérique ». Je me suis rendu sur le site et j’ai noté quelques points qui pourraient être améliorés.

Plusieurs choses me perturbent dès la première page.

• On y trouve de nombreux éléments peu hiérarchisés. Le titre « Les Français et le Nouveau Monde numérique » (avec toutes ces majuscules, oui oui) est heureusement mis en avant ; le reste du contenu ressemble à un assemblage hétérogène de logos et de blocs.

• Son intérêt m’échappe. Je comprends qu’il soit important de mettre en avant les partenaires de l’opération, mais est-ce une bonne façon de faire ? Quelles informations le visiteur peut-il tirer de cette page, que je qualifierais de simple splashpage ? N’aurait-il pas été intéressant d’utiliser cet espace pour présenter le site et expliquer clairement de quoi il retourne ?

Note : Cette explication existe mais n’est pas vraiment mise en valeur (elle se cache derrière le lien « À propos du baromètre » situé dans le footer.)

• Le gros bouton permettant de passer à la page suivante manque réellement de contraste. Ce problème est d’autant plus important qu’il s’agit du seul élément offrant l’accès au véritable contenu du site : il serait dommage de passer à côté ! Même souci pour son contenu : une flèche blanche dans un bouton gris clair, le tout sur un fond gris clair, est-ce vraiment une bonne idée ?

Globalement, cette entrée en matière manque un peu d’intérêt et de clarté.
Je clique sur le gros bouton gris pour accéder à la page suivante.

Deux possibilités : à gauche découvrir les résultats de l’enquête, à droite faire le test.

Ici aussi les boutons permettant d’accéder au contenu manquent de contraste. Par ailleurs, ils portent tous les deux le même libellé peu informatif « Commencer ». N’aurait-il pas été plus intéressant de rendre les légendes « Découvrez… » et « Faites le test » cliquables ?

Je constate également que le logo Inria a été modifié : sa taille a été réduite afin de permettre l’ajout d’éléments « sociaux » (bouton Twitter). Je ne sais pas si c’est à cet endroit que les visiteurs s’attendent à trouver ce type de contenu ; ce que je sais c’est qu’ils risquent de passer à côté.

Au sujet du choix des mots : le second bouton est intitulé « Et vous, quel voyageur êtes-vous ? » Je comprends l’image « nouveau monde numérique / voyageur », mais ce genre de figure de style n’a pas vraiment sa place ici. Remplacer « voyageur » par « internaute » me semble plus approprié.

Un dernier point pour finir : il n’est pas possible de revenir à la page précédente. Le bouton « page précédente » de mon navigateur me renvoie au site précédemment consulté.

Je préfère commencer par faire le test, je clique sur le second bouton.

La structure de cette nouvelle page me surprend : la question se trouve à droite, les réponses à gauche. Les occidentaux lisent de gauche à droite, il me semble donc plus logique de commencer par la question plutôt que par les choix proposés comme c’est le cas ici. La question est fortement mise en valeur dans un bloc rouge, peut-être pour pallier cette présentation inversée.

Le formulaire utilise des éléments d’interface relookés (les cases à cocher, en rouge). C’est plus élégant… mais moins clair. Lorsque je clique sur l’une de ces cases, un carré rouge apparaît à l’intérieur pour me signaler que la case est cochée. Rouge sur fond rouge, encore un choix qui dégrade la lisibilité.

Toujours au sujet des choix : les libellés ne sont pas cliquables. Encore une fois ce n’est pas très grave, mais ça aurait amélioré l’expérience.

Un bouton gris en haut de la page me permet d’accéder aux résultats de l’enquête. Bon point : si je veux jeter un œil aux résultats et revenir au test ensuite, je n’aurai pas à répondre à nouveau aux questions auxquelles j’ai déjà répondu. Mauvais point : si je clique sur le logo Inria (cliquable ici alors qu’il ne l’était pas avant), je retourne à la splashpage et mes choix ne sont pas mémorisés. En d’autres termes : je devrai répondre à nouveau à toutes les questions auxquelles j’ai déjà répondu.

Note : le message d’erreur « Réponse obligatoire » pourrait être davantage mis en avant (il y a de la place). Mieux : la mention « Toutes les réponses sont obligatoires » (puisque c’est le cas) pourrait figurer sur le questionnaire.

Après avoir répondu aux 18 questions, je suis redirigé sur une page de résultat.

Là encore, beaucoup de contenu peu hiérarchisé. Le titre « Vous êtes plutôt parmi » est bien visible, à l’inverse du nom de la catégorie « Les grands explorateurs », quasiment invisible. Il s’agit pourtant d’un élément très important, j’ai répondu à 18 questions pour en arriver là ! La page, très chargée en couleurs / blocs / textes / pictos / illustrations, manque vraiment de lisibilité.

Bonne idée : je peux connaître les autres profils d’internautes. Je note toutefois que si je clique sur un picto (dont il faut deviner la signification puisqu’il ne sont pas légendés), le texte et l’illustration changent… mais pas le titre « Vous êtes plutôt parmi ». Pas très cohérent.

Mauvaise idée : si je quitte cette page, il me sera impossible de revenir dessus autrement qu’en refaisant tout le test !

Je terminerai ma visite du site dans les prochains jours, avec deux points qui m’ont particulièrement ennuyé.

Bonus

En cliquant sur le menu du haut, j’ai fini par arriver sur cet écran.

Pour reproduire ce bug (Firefox & Safari), il faut se placer sur la page « Faire le test », cliquer 2 fois sur l’intitulé « Faire le test » puis une fois sur « Les résultats de l’enquête ». Rien de grave bien sûr, mais c’est la conséquence d’autres choix plus gênants.

Bilan

libellés peu clairs
structure de certaines pages
éléments de formulaires revus
bug
manque de hiérarchie
manque de lisibilité
pictos non légendés
splashpage
boutons gris très peu visibles
modification d’éléments d’interface au fil du site
bouton page précédente non fonctionnel
choix non mémorisés si retour à la splashpage
impossible de revenir sur la page du résultat du test

Étiquette : picto

Google maps avant, Google maps après

Baromètre INRIA, un « nouveau monde numérique » peu clair (1/2)