Les articles de la catégorie « Graphisme »

Un exemple d’infographie vide de sens

Ce midi je suis tombé sur cette infographie dans l’édition du jour du 20 minutes :

Les loyers des étudiants

Je suis bien resté cinq minutes à chercher le sens et l’intérêt de cette infographie, et surtout quelle information j’étais censé en retirer. Et je n’ai pas trouvé de réponse. Sébastien Desbenoit appelle ça une VIDANJ : « Visualisation de Données Accompagnant un Néant Journalistique. » J’aime bien cet acronyme.

Mais surtout j’adore cette infographie. Mais pas dans le bon sens du terme. Voici quelques points que j’ai relevé :

  • La représentation sous forme de carte géographique laisse penser qu’on chercher ici à comparer les prix des loyers entre les différentes villes. Sauf qu’on ne compare pas toujours les mêmes surfaces, ce qui rend la lecture vraiment compliquée. 
  • Chaque ville est représentée par deux barres représentant un loyer minimum et loyer maximum. Mais les surfaces choisies pour la comparaison sont bien étrange. À Lille, on compare un 30 m² et un 35 m². Il n’y a vraiment pas de plus petit loyer qu’un 30 m² ni plus grand qu’un 35 m² à Lille ?
  • Les sommes inscrites sur la carte semblent toutes avoir été arrondies, sauf le loyer maximum à Strasbourg qui est de 583 €. Ces trois euros ont-il une importance ? Ou alors c’est vraiment un coup de bol que toutes les autres moyennes tombaient juste à la dizaine ?

Tout ça m’a fait repensé à une conférence que j’avais adoré, d’Irene Ros à la Take Off Conference à Lille en janvier dernier : Responsible use of data visualization. Et en particulier cet exemple (à 18 min) :

Comparaison du chiffre d'affaires et des dépenses publicitaires entre Coca-Cola et Pepsi Cola

Un autre exemple rigolo, c’est de mal représenter des données. Tout le monde aime les infographies. Mais ici c’est un peu une véritable boucherie d’infographie.

Ils comparent le chiffre d’affaire annuel et les dépenses publicitaires entre Coca-Cola et Pepsi Cola. Et ils utilisent des camemberts pour ça. Il n’y a aucune raison à ça. Ça veut dire quoi 35,2 milliards de dollars… d’une capsule ? Et il n’y a aucune relation entre la taille des deux données comparées. Remarquez comme les 1,1 milliards de dollars sont plus gros que les 35,2 milliards de dollars. Et je ne suis pas sûr s’il faut que je regarde l’espace vide ou alors l’espace plein.

Ce qu’ils auraient dû faire, c’est plutôt ça.

Non seulement maintenant vous pouvez vraiment comparer visuellement les deux sociétés. Mais vous pouvez aussi comparer les deux catégories. C’est probablement plus important que de voir une capsule en 3D.

L’imbécile regarde le doigt

Récemment, j’ai grincé des dents en tombant sur une maquette avec des boutons contenant des flèches pointant vers l’extérieur. Ça n’est pas nouveau, et il suffit d’aller sur Awwwards (le « prestige » du web design) pour se rendre compte que cette pratique est répandue comme la peste au quatorzième siècle.

Des boutons pour les imbéciles

C’est l’une des premières choses abordées dans l’excellent livre sur l’ergonomie et l’utilisabilité de Steve Krug, « Don’t make me think » (horriblement traduit dans une première édition par « Je ne veux pas chercher« ).

Un de mes exemples préférés est la boîte de recherche sur drkoop.com (le site de santé de C. Everett Koop).

Le bouton pour imbécile

A chaque fois que je l’utilise, je dois réfléchir, parce que le bouton qui exécute la recherche ne ressemble pas à un bouton. Pourtant celui-ci présente deux excellents indices visuels : il contient le mot « Rechercher », qui est l’un des deux labels parfaits pour un bouton de recherche, et c’est la seule chose qui se trouve à proximité du champs de recherche.

Il y a même une petite icône triangulaire, qui est l’une des conventions sur le web pour inciter à « cliquer ici ». Mais la flèche pointe à l’opposé du texte, comme si elle pointait vers quelque chose d’autre, alors que la convention voudrait qu’elle pointe vers le texte cliquable.

Bouger la flèche vers la gauche suffirait pour éliminer le point d’interrogation au-dessus de ma tête.

Le bouton pour les autres

Cela me fait penser à ce proverbe chinois et ce passage dans Le fabuleux destin d’Amélie Poulain :

L'imbécile regarde le doigt

Monsieur, quand le doigt montre le ciel, l’imbécile regarde le doigt !

Vos utilisateurs ne sont pas des imbéciles. Évitez de les forcer à se comporter comme tels.