Pictorama : tout savoir (ou presque) sur la conception d’un set de pictogrammes.

Julien Laureau
10 min readAug 30, 2019

--

Les pictogrammes sont des éléments incontournables du design d’interface et de l’expérience utilisateur. Lorsqu’ils sont bien conçus et correctement implémentés, ils constituent une signalétique intuitive qui permet de réduire sensiblement la quantité de textes dans les écrans.

Dessiner un set de pictogrammes complet peut s’avérer laborieux. Il est par conséquent beaucoup plus simple de recourir à des librairies existantes… Si cette dernière phrase vous a laissé de marbre, vous pouvez arrêter ici la lecture de cet article.

Pour les quelques romantiques du pixel qui seraient restés, je me propose de partager avec vous quelques notions théoriques ainsi que ma méthode personnelle en matière de conception de pictogrammes. Contrairement à ce que peut laisser penser le titre volontairement racoleur de l’article, je ne serai pas exhaustif. Par conséquent, n’hésitez pas à suggérer des améliorations ou à apporter des précisions dans les commentaires.

Qu’est-ce qu’un pictogramme ?

Les pictogrammes sont des représentations graphiques schématiques ayant fonction de signes. Ou pour le dire plus simplement, ce sont des images qui communiquent une idée d’une façon claire, directe et pertinente. Ils constituent un langage non verbal, simple et universel. Les pictogrammes tels que nous les utilisons sont une invention moderne, mais l’origine de ce mode de représentation est lointaine et se confond avec l’invention de la figuration (art pariétal) puis de l’écriture (hiéroglyphes).

À gauche, les peintures rupestres de la Cova dels Cavalls à Valltorta, 10 000–4 000 av. J.-C. À droite, un des pictogrammes d’Otl Aicher pour le Jeux Olympiques de Munich en 1972.

Un pictogramme est un petit oignon sémantique constitué de plusieurs couches de sens :

  • Un signe : la représentation graphique.
  • Un référent littéral : ce qui est désigné par le signe, exemple : une poubelle
  • Une connotation figurée : le sens à apporter au référent dans un contexte particulier, exemple : supprimer.

Pour déterminer la signification d’un signe, nous interprétons ces différentes strates sémantiques à partir de nos connaissances et du contexte dans lequel il est utilisé. Ce phénomène est extrêmement subjectif, et un référent identique ne sera pas forcément compris de la même façon par un adulte, un enfant, une personne occidentale ou orientale par exemple.

Keep it simple, stupid!

Un dernier point et j’en termine avec cette définition, les pictogrammes représentent des concepts complexes sous une forme simple et avec un certain degré d’abstraction, ce qui les distingue des “icônogrammes” ou icônes, qui ont plus à voir avec l’illustration.

Les pictogrammes dans les interfaces

Les ordinateurs visionnaires Xerox Alto (1973) puis Xerox Star (1981) ont introduit la métaphore WIMP (Windows, Icons, Menus, Pointer) que nous utilisons encore aujourd’hui. Le premier système d’exploitation Macintosh a enfoncé le clou quelques années plus tard avec les célébrissimes pictogrammes de Susan Kare. Depuis lors, les pictogrammes sont utilisés dans les interfaces pour guider l’utilisateur de façon intuitive et simplifier les interactions. Ils peuvent simplement servir de signalétique (non cliquables) ou bien être supports d’une action (cliquables). En tant qu’éléments graphiques, ils contribuent à enrichir l’expérience utilisateur et l’esthétique des écrans.

Près de 46 années se sont écoulées entre les pictogrammes de gauche (Xerox Alto, 1973) et ceux de droite (Revolut, 2019).

Les recherches tendent à prouver qu’ils ont une influence positive sur l’ergonomie des systèmes. Une étude allemande (Blankenberger et Hahn) démontre la supériorité du langage pictographique sur le langage textuel pour la communication homme-machine. Les chercheurs ont observé que les utilisateurs ont des temps de réaction sensiblement plus courts lorsqu’ils sont exposés à des commandes sous forme de pictogrammes.

Cependant, comme il existe une marge d’erreur non négligeable dans l’interprétation des signes, il est recommandé d’associer aussi souvent que possible un label aux pictogrammes pour éviter aux utilisateurs de se méprendre.

Un attribut de marque

Les pictogrammes sont des éléments essentiels de l’identité visuelle et de l’expérience de marque. Ils peuvent traduire un ton de voix, des valeurs et un positionnement marketing.

Pictogrammes extraits des collections d’Uber et Airbnb. Deux styles propriétaires aux antipodes.

Certaines entreprises l’ont bien compris et ont développé leurs propres sets. C’est le cas d’Airbnb et d’Uber. Ces deux collections traduisent parfaitement les personnalités très différentes des deux marques et agissent subtilement sur la façon dont les utilisateurs perçoivent leurs produits.

Choisir le bon référent

Si l’on souhaite qu’un pictogramme soit correctement interprété, il est primordial d’utiliser un référent (une métaphore) qui parle au plus grand nombre.

Pour les concepts simples, mieux vaut utiliser les conventions de représentation communément admises. Une corbeille à papier est par exemple souvent utilisée pour symboliser la suppression. De même, une loupe figure en général la recherche. Se conformer aux standards est un moyen simple d’être compris du plus grand nombre.

Pour les autres concepts, il faut essayer d’identifier le modèle mental des gens. Pour cela, on peut organiser un petit atelier de croquis au cours duquel on demandera à un groupe composé d’une dizaine de personnes de dessiner ce que l’on cherche à représenter. Les motifs récurrents qui émergent de ce type d’exercice correspondent en général aux modèles mentaux dominants.

Une recherche pour le mot “partager” sur Noun Project. Deux référents émergent clairement des résultats.

Si vous êtes dans l’incapacité d’organiser un atelier de ce genre, il est également possible de faire quelques recherches sur la toile. Personnellement, je fais toujours un tour sur le site Noun Project avant de dessiner un pictogramme. C’est un site communautaire qui permet aux designers de partager et télécharger des pictogrammes libres de droits. Cela me permet d’identifier rapidement les conventions et les modèles mentaux correspondant à un objet ou une action particulière.

286 dessins pour le mot “Hôpital” sur le site du projet Quickdraw de Google.

Le projet Quickdraw de Google est une autre base de données intéressante, qui répertorie des millions de dessins réalisés par des internautes pour représenter des concepts simples.

Pour finir, comme le disait un célèbre révolutionnaire communiste : “La confiance n’exclut pas le contrôle”. C’est pourquoi, même si vous êtes persuadé d’avoir choisi le bon référent, il vous faudra de toute façon valider sa compréhension en contexte auprès des utilisateurs finaux.

Grille, taille, graisse

Je dessine mes pictogrammes sur un plan de travail carré de 48 px de côté. C’est la taille recommandée par Google dans les guidelines Material Design et elle fonctionne plutôt bien.

Le gabarit que je privilégie. Aisément divisible par 2.

La grille de construction, qui détermine la dimension du pictogramme, est plus petite. Elle mesure 40 px de côté, ce qui permet de conserver 4 px de réserve autour du signe. Cette marge de sécurité est utile lorsque les pictogrammes sont implémentés de façon indélicate.

Sous ses airs rigides, la grille est beaucoup plus flexible qu’on ne le pense.

La grille de construction ne doit pas être envisagée comme un carcan qui limiterait la créativité. Plus qu’un cadre contraignant, c’est un guide qui permet de donner une continuité formelle à un set. Elle autorise des variations quasiment infinies et elle peut accueillir à peu près tous les styles de pictogrammes.

Lorsqu’un un signe est grand, mieux vaut réduire sa graisse. À l’inverse, s’il est petit sa graisse peut être marquée.

Une graisse de 2 px confère aux pictogrammes un aspect léger. On peut l’augmenter à 4 px si l’on souhaite obtenir un résultat plus impactant, mais il n’est pas possible dans ce cas de conserver un dessin très détaillé. D’une façon générale, la graisse d’un pictogramme doit être inversement proportionnelle à sa taille. Lorsqu’un signe est grand, mieux vaut la réduire, et inversement.

Style et homogénéité

À l’image d’une police de caractères, qui est un ensemble cohérent composé d’éléments singuliers, un set de pictogramme doit être homogène. Il est donc important de veiller à ce que les différents signes qui le composent possèdent un maximum de caractéristiques communes.

Attention aux contours éclectiques.

Pour commencer, mieux vaut se limiter à une seule graisse pour l’ensemble du set et éviter de mélanger des pictogrammes en ligne claire et des pictogrammes en aplat.

2D ou 3D, il faut choisir son camp.

Un autre écueil assez répandu consiste à mixer différents angles de vue, en représentant certains objets en perspective et d’autres vus de face par exemple. Il vaut mieux éviter ces incohérences qui peuvent perturber la reconnaissance des pictogrammes et s’en tenir à un seul mode de représentation pour l’ensemble de la collection.

Minimal ou détaillé, mais pas les deux à la fois.

Le niveau de détail est une autre caractéristique déterminante du style d’une famille de pictogrammes. Un niveau de détail homogène facilite la compréhension. On évitera donc d’associer des dessins minimalistes et d’autres plus complexes au sein d’un même set.

Quelques briques, une créativité sans limite !

Voilà pour la liste des pièges les plus fréquents. Pour le reste, le but est d’appliquer des attributs stylistiques identiques à toute la famille. Un bon moyen d’y parvenir est de se servir de tous les signes précédemment créés pour en concevoir de nouveaux. L’idée est d’assembler des éléments de pictogrammes comme autant de Lego pour composer des formes inédites. Les bases géométriques, le rayon des angles ou tout autre détail graphique peuvent facilement être répliqués.

Exécution

Je dessine mes pictogrammes dans Adobe Illustrator, car c’est le logiciel de création graphique vectorielle que je préfère. Il existe un grand nombre d’alternatives. Certains les exécutent directement dans Sketch ou Figma, d’autres dans des logiciels de dessin typographique, l’essentiel est d’utiliser l’outil avec lequel l’on est à l’aise. La plupart des conseils que je vais vous donner peuvent s’appliquer dans n’importe quel programme permettant d’éditer des vecteurs.

Il est important de positionner les vecteurs correctement sur la grille de pixel afin d’obtenir un affichage le plus net possible.

La première chose à faire est d’afficher la grille, puis de régler son pas à 1px, en vous rendant dans le menu : Préférences > Repères et grille. Cela vous permettra de positionner vos vecteurs correctement (entre deux pixels) pour obtenir un affichage net à l’écran.

De près c’est encore plus moche ! 😱

Lorsqu’on ne tient pas compte de la grille de pixels, le rendu est flou, voire carrément « baveux ». C’est disgracieux et ça rend le grand maniaque que je suis particulièrement nerveux…

Les trois mode d’affichage entre lesquels basculer durant la phase de dessin.

Pour les mêmes raisons, je vous recommande durant la phase de dessin, de passer constamment de l’affichage classique à l’aperçu en pixels et/ou à l’affichage des tracés. Les raccourcis clavier permettant d’effectuer ces changements rapidement sont les suivants :

  • Afficher la grille : Cmd+’ ou Ctrl+’
  • Afficher les tracés : Cmd+Y ou Ctrl + y
  • Aperçu en pixels : Cmd+Option+Y ou Alt+Ctrl+Y
Les angles à privilégier pour les obliques.

Un dernier point concernant l’affichage : certains fondamentalistes recommandent d’incliner les diagonales selon des angles de 30, 45 ou 60 degrés car ces pentes correspondent à la grille de pixels, et offrent un meilleur rendu à l’écran. C’est indéniable, néanmoins, cela n’est pas toujours possible. N’hésitez donc pas à enfreindre cette règle à chaque fois que cela vous paraîtra nécessaire.

L’encombrement

L’encombrement est une notion importante en revanche. C’est un terme emprunté à la typographie, qui définit l’espace occupé par un signe. Pour des raisons d’harmonie, les pictogrammes d’une même collection doivent avoir des encombrements équilibrés et cadencés. C’est-à-dire qu’ils doivent peu ou prou occuper le même espace vertical et horizontal. Lorsque ça n’est pas le cas, leur impact visuel est hétérogène.

Finitions

Je passe par un certain nombre d’itérations avant de parvenir à un pictogramme finalisé. Je prends donc toujours soin de nettoyer les tracés à l’issue de cette phase exploratoire. Je ferme les formes, je supprime les points inutiles et je vérifie que tout est bien aligné.

Les étapes de finitions

Il faut ensuite vectoriser les contours et associer toutes les formes isolées à l’aide du pathfinder. Il ne reste plus qu’à exporter les pictogrammes. Si l’on a créé autant de plans de travail que de pictogrammes, cela peut être fait en un clic.

Créez autant de plans de travail que pictogramme afin de les exporter en un clic.

Un dernier mot

On sait qu’à peine 20% des textes sont lus sur un écran moyen. De bons pictogrammes valent mille mots et peuvent se substituer à une partie des 80% d’informations auxquelles les gens ne prêtent pas attention. Voilà pourquoi ils sont essentiels dans les interfaces.

Néanmoins, un texte intelligible sera toujours préférable à un mauvais pictogramme. Par conséquent, tâchons de les dessiner le mieux possible !

N’hésitez-pas à commenter, partager et liker l’article s’il vous a plu.

--

--