Quelque part vers la diapositive huit d’un deck client, j’ai un jour vu une infographie parfaitement valable perdre instantanément en crédibilité. Rien ne clochait avec les données. Les couleurs correspondaient au guide de marque. Mais trois des icônes avaient une fine ligne de contour, deux étaient des remplissages pleins, et une — clairement importée depuis un pack d’icônes gratuites à 2 heures du matin — avait une ombre portée que les autres icônes n’avaient pas. Personne dans la salle n’aurait pu dire ce qui les dérangeait. Ils ont simplement cessé de faire confiance au graphique à côté. C’est là le paradoxe des styles d’icônes : ils sont rarement la raison pour laquelle une diapositive est louée, mais ils sont très souvent la raison pour laquelle elle est mise en doute. Et la plupart des conseils sur le sujet s’arrêtent à « choisissez un style et restez cohérent », ce qui est vrai mais aussi inutile, car cela ne vous dit pas quel style choisir, pour quelles données, à quelle taille.

Le poids de la ligne est l’indice, pas le remplissage

Les gens supposent que la différence visible entre les styles d’icônes réside dans le fait qu’elles soient plates ou en 3D, ou remplies ou en contour. Ce n’est généralement pas ce qui révèle un ensemble incohérent. C’est le poids de la ligne. Une icône en ligne de 2 px placée à côté d’une icône en ligne de 1,5 px provenant d’un autre ensemble semble « décalée » avant même que le spectateur ne puisse articuler pourquoi — l’œil perçoit plus rapidement une incohérence de poids qu’une incohérence de style.

Voilà la vraie raison pour laquelle mélanger des packs d’icônes est risqué : ce n’est pas que les styles plats et en 3D « entrent en conflit » conceptuellement, c’est que deux bibliothèques d’icônes indépendantes ne partagent jamais de norme de poids de ligne, de rayon de coin ou de taille de grille. Prenez cinq « icônes en ligne » issues de cinq sources gratuites différentes et vous obtiendrez cinq largeurs de trait légèrement différentes, même si chacune est techniquement une icône en ligne. La solution n’est pas « utilisez un seul style », mais « utilisez une seule source ». Une seule bibliothèque d’icônes, un seul lot d’exportation, une seule grille — l’étiquette du style compte bien moins que l’origine de production commune.

Adaptez le style des icônes à ce que les données font, pas à ce qui semble joli

Voici où la plupart des conseils deviennent flous : ils traitent le style des icônes comme une décision de marque, déconnectée du graphique ou de la mise en page qui les entoure. En pratique, le style des icônes doit suivre le type d’infographie que vous construisez.

  • Les infographies statistiques (un grand nombre accompagné d’une icône de soutien) tolèrent des icônes plus audacieuses et pleines — elles sont conçues pour être lues en moins d’une demi-seconde, et une forme solide résiste mieux qu’un contour délicat à cette vitesse de lecture.
  • Les infographies de processus ou d’étapes lisent généralement mieux avec des icônes en ligne cohérentes, car vous avez besoin que l’œil suive une séquence sans que chaque étape ne concurrence visuellement les autres en poids.
  • Les mises en page de comparaison — ceci contre cela, avant contre après — sont le seul endroit où les ensembles d’icônes en duotone ou à deux couleurs méritent leur place, puisque la deuxième couleur peut encoder la comparaison elle-même plutôt que de simplement décorer.

Choisissez le style des icônes après avoir décidé du type d’infographie que vous créez, pas avant. Inversez cet ordre et vous finirez par forcer un ensemble d’icônes joli sur une mise en page pour laquelle il n’était jamais adapté.

Le problème de taille que personne ne mentionne jusqu’à ce qu’il soit trop tard

Les choix de style d’icônes qui semblent nets dans une maquette en plein écran s’effondrent souvent dès qu’ils sont réellement utilisés — réduits dans une légende, une tuile de tableau de bord ou une miniature de diapositive dans un deck partagé. Les icônes à contour fin ont tendance à disparaître ou à flouter dès qu’elles mesurent moins d’environ 20 px, tandis que les icônes pleines ou en duotone conservent leur forme.

Cela compte plus qu’il n’y paraît, car la reconnaissance se fait plus rapidement que ce que l’on pourrait imaginer. Une couverture d’une étude de 2014 du MIT menée par la chercheuse Mary Potter a rapporté que le cerveau humain peut traiter des images complètes vues pendant seulement 13 millisecondes, bien plus rapidement que l’estimation de 100 millisecondes que les chercheurs avaient précédemment supposée. En d’autres termes, les spectateurs identifient déjà les formes des icônes presque instantanément — ce qui signifie qu’une forme ambiguë à petite taille n’a pas une deuxième chance d’être comprise ; elle est simplement mal interprétée ou ignorée. Si une partie de votre infographie finira petite — un dépliant imprimé, une vue mobile, une exportation en PDF — testez le style des icônes à cette taille avant de vous engager, pas après que le deck soit terminé.

Quand rompre sa propre règle de cohérence est la bonne décision

"Restez cohérent" est correct dans presque tous les cas, ce qui explique pourquoi il est utile de nommer l’exception. Si une catégorie dans votre infographie a vraiment besoin de se démarquer — un drapeau de risque, une étiquette « nouveau », une seule icône d’alerte dans un tableau de bord autrement calme — donner à cette seule icône un style différent des autres n’est pas une erreur, c’est tout le but. Dès que toutes les icônes partagent le même poids et le même remplissage, vous supprimez aussi votre capacité à signaler « celle-ci est différente », ce qui est souvent exactement le message que la diapositive doit transmettre.

Je ne recommanderais pas de faire cela plus d’une fois par infographie, cependant. Un seul élément distinct délibéré est perçu comme une emphase. Deux ou trois commencent à ressembler à une incohérence, et le spectateur ne peut plus distinguer quels décalages étaient intentionnels et lesquels étaient simplement des icônes laissées en vrac d’un brouillon précédent.

Construire un style que vous pouvez vraiment terminer

Une chose que les gens négligent : la contrainte qui décide du style des icônes n’est souvent pas esthétique du tout — c’est la couverture. Un ensemble d’icônes dessinées à la main avec 40 icônes ne survivra pas à une infographie de 25 catégories ; vous manquerez d’icônes correspondantes vers la catégorie 30 et devrez soit mélanger les sources (retour au problème du poids de ligne), soit éditer manuellement des icônes qui n’étaient jamais destinées à être modifiées. Avant de tomber amoureux d’un style, vérifiez si la bibliothèque source contient suffisamment d’icônes, dans suffisamment de catégories, pour couvrir l’ensemble des données — pas seulement les trois exemples que vous avez vus dans l’aperçu.

Pour toute personne qui construit cela de manière répétée plutôt que ponctuelle, travailler à partir d’un ensemble de modèles avec des formes et des actifs d’icônes prématchées évite entièrement le problème de couverture, puisque l’ensemble entier a été produit ensemble plutôt que constitué de téléchargements dispersés. Et la même logique qui s’applique au style des icônes — choisissez la visuelle en fonction de ce que les données font, pas de ce qui semble le mieux isolément — s’applique directement au choix entre les types de graphiques et au sélection d’un modèle adapté aux attentes visuelles de votre secteur plutôt que celui qui est actuellement à la mode.

La prochaine fois qu’une infographie semble légèrement peu crédible et que vous ne pouvez pas dire pourquoi, vérifiez les icônes avant de vérifier les données. Neuf fois sur dix, les chiffres n’étaient jamais le problème.