Flipboard : une désinscription aux newsletters bien conçue, mais…

Hier j’ai décidé de ne plus recevoir les newsletters de Flipboard. Je jette un œil au dernier e-mail reçu, inspecte l’entête puis le pied de la news et trouve finalement un lien de bonne taille vers une page de désinscription. Son contraste pourrait être amélioré, mais rien de trop grave.

Newsletter de Flipboard : lien de désinscription

Après avoir cliqué sur le lien, je suis redirigé vers une page qui m’indique via un layer que mon désabonnement a bien été pris en compte.

Flipboard : layer de confirmation de désabonnement

L’utilisation d’un layer n’est pas forcément la meilleure idée qui soit en terme d’utilisabilité, mais rien de trop grave ici aussi.
Un message me propose ensuite de « visiter le gestionnaire des courriels pour nous dire quels genres de courriels vous voudriez voir dans votre boîte de réception. » Je clique sur le bouton, seul moyen de fermer le layer, et j’accède au gestionnaire.

Flipboard : gestionnaire de courriels

Je peux ici facilement me désabonner de chacune des news individuellement. Le contraste des liens pourrait être meilleur, le bouton de désinscription à toutes les news pourrait être plus visible, mais rien de trop grave une fois encore. J’ajoute que positionner ici les pictos relatifs aux réseaux sociaux sur lesquels Flipboard est présent me semble être une idée pertinente.

En un mot j’ai trouvé ce système de désabonnement plutôt bien conçu. Une seule chose me gêne, une chose que je n’ai pas évoquée pour le moment : comment se fait-il que je sois inscrit à toutes ces news alors que je ne l’ai pas demandé ? La réponse est tristement simple : comme beaucoup trop d’autres services, l’abonnement aux newsletters (et elles sont nombreuses ici !) est imposé lors de la création du compte. Il n’y a pas de case à cocher ni même de case à décocher, c’est imposé, point final — en tout cas sur la version mobile, je n’ai pas testé l’inscription au site depuis la nouvelle version desktop.

Le titre du gestionnaire de courriels est « Nous voulons seulement vous envoyer les courriels que vous aimez. » Il faudrait peut-être envisager d’ajouter « mais nous allons vous envoyer tous nos courriels, dans le doute, hein, vous savez ? »

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.

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.