Pictorama : tout savoir (ou presque) sur la conception d’un set de pictogrammes.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…
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
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 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é.
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.
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.
Références
La Bible :
Rayan Abdullah, Roger Hübner. Pictograms, Icons & Signs
Deux articles qui m’ont aidé à concevoir ce billet :
Slava Shestopalov. Hopefully, the Ultimate Guide to an Interface Icon Set
Bonnie Kate Wolf. A complete guide to iconography
Études citées :
Sven Blankenberger, Klaus Hahn. Effects of icon design on human-computer interaction
Jakob Nielsen. How Little Do Users Read?
Sites web :
https://material.io/design/iconography/system-icons.html#
https://quickdraw.withgoogle.com
