Sémantiser les icônes : guide en 4 étapes

Une icône n’est pas un petit accessoire posé sur l’écran, c’est le mot le plus court de l’interface. Les icônes sont un vocabulaire, pas une décoration le rappelle très justement : les symboles universels que l’utilisateur peut reconnaître de façon stable sans lire de texte se comptent à peu près sur les doigts de deux mains

Dans un atelier d’impression, on le sent tout de suite. La loupe signifie recherche, l’engrenage réglages, la corbeille suppression, le signe plus ajout, le X fermeture, la maison accueil, la flèche de retour niveau précédent, le triangle de lecture démarrage. Ce sont comme des mots courants : ils peuvent fonctionner seuls

Les ennuis commencent au-delà de cette petite dizaine. Le cœur, l’étoile et le signet ressemblent tous à « favoris », mais selon la plateforme ils peuvent vouloir dire aimer, marquer, lire plus tard. Le partage non plus n’a pas un symbole unique : Apple dessine souvent un carré avec une flèche, Android trois points reliés. Si un système d’impression force « envoyer en validation », « refuser le BAT » et « renvoyer au prépresse » dans des icônes sans texte, l’interface sera propre, oui. Mais le jour où une erreur sort, personne ne félicitera la mise en page pour sa sobriété

L’iconographie est une méthode de conception qui représente des fonctions, des états et des actions au moyen d’un ensemble de signes visuels reconnaissables. Dans le prépresse et les portails clients, son rôle est de réduire les devinettes, pas d’ajouter une charge esthétique

Pour décider si une icône peut vivre seule, il faut demander si une personne qui la voit pour la première fois donne rapidement la même réponse que les autres. Pas si le designer trouve qu’elle « ressemble bien » à ce qu’elle doit dire

J’utilise une méthode très terre à terre, mais efficace. On retire l’icône de son contexte, on la montre seule à un collègue ou à un client pendant environ 5 secondes, puis on demande : « Que se passe-t-il si vous cliquez dessus ? » Si les réponses partent dans tous les sens, on ajoute du texte. Si elles convergent, on peut envisager de retirer le libellé. Ce test vaut mieux qu’une demi-heure de débat en salle de réunion

Dans une interface d’impression, cette étape est encore moins négociable, parce que beaucoup de boutons déclenchent des coûts

・« Supprimer le fichier » doit utiliser une corbeille, mais aussi garder le texte, pour éviter que le client pense qu’il ne fait que retirer l’élément de la liste

・« Valider le BAT » ne devrait pas reposer uniquement sur une coche. Dans différents workflows, une coche peut signifier terminé, accepté, payé ou lu

・« Téléverser à nouveau » peut combiner une flèche avec « Remplacer le fichier », mais il ne faut pas laisser une simple flèche circulaire faire deviner l’action

・Pour une action abstraite comme « envoyer au contrôle prépresse », il n’existe pas de symbole universel. Écrire le texte est plus rapide

Si l’équipe réorganise un portail de devis, une page de dépôt de fichiers client ou un tableau interne de suivi des commandes, l’équipe conseil de l’Académie du savoir Mai Strategy recommande de commencer par recenser les boutons à risque, puis de décider quelles icônes peuvent apparaître seules et lesquelles doivent rester liées à un label

Un vocabulaire d’icônes transmissible doit figer chaque icône sous forme d’entrée claire : fonction, libellé, état, cas où elle ne doit pas être utilisée. Pas juste envoyer un paquet de SVG aux développeurs

Pour une imprimerie petite ou moyenne, je conseille de s’en tenir à 4 étapes. Inutile de partir tout de suite sur un grand design system

・1. Lister les actions fréquentes : rechercher, ajouter, supprimer, télécharger, téléverser, revenir, valider, renvoyer, établir un devis, payer, suivre une commande. On commence par les fonctions cliquées tous les jours

・2. Repérer les symboles pouvant vivre seuls : loupe, engrenage, corbeille, plus, X, accueil, retour, lecture peuvent entrer dans la liste des candidats, mais leur contexte d’usage reste décisif

・3. Associer un symbole à une seule action : si le crayon signifie modifier, il signifie modifier partout sur le site. Il ne doit pas signifier note ou commentaire sur une autre page

・4. Fixer une règle visuelle : même famille d’icônes, même grille, même épaisseur de trait. Mélanger des graisses différentes, c’est comme glisser trois polices dans un même catalogue

Le but ici n’est pas de faire joli. C’est que design, service client, prépresse et développement parlent la même langue. Le vrai risque pour une imprimerie n’est pas de mal dessiner une icône, c’est que chaque service croie comprendre cette icône à sa manière

La sémantique des icônes influence les commandes et les délais, parce qu’un seul mauvais choix du client dans le portail peut ensuite devenir une vérification par le service client, un rejet au prépresse, une replanification et une renégociation de la date de livraison

Dans un parcours classique de dépôt de fichiers, si le client comprend « supprimer le fichier » comme « annuler ce téléversement », il peut penser que son fichier reste dans le brouillon. Si un commercial voit une icône d’état sans savoir s’il s’agit de « en attente de paiement » ou « en attente de validation », il passera un appel de plus pour vérifier. Si le prépresse représente « validé » et « envoyé en impression » avec des icônes trop proches, l’ordre de fabrication peut entrer dans la mauvaise étape. Et là, ça se complique vite

Pour une imprimerie, la validation du design d’icônes ne devrait pas seulement vérifier si l’écran est bien rangé. Elle devrait vérifier si le workflow retire une occasion de deviner. C’est aussi un point que je regarde de très près dans les produits SaaS et les outils d’automatisation pour l’impression : plus l’interface est petite, plus le vocabulaire doit être précis. Sur mobile, une seule icône se comprend moins facilement qu’une ligne d’explication dans un système desktop

Si le portail client doit se raccorder à un flux d’impression commerciale très personnalisé, des environnements de service comme MINDS ont encore plus besoin de séparer clairement « estimation », « choix des matériaux », « épreuvage », « validation du BAT » et « mise en impression », car chaque étape touche au papier, aux finitions, à la couleur et aux délais

Une imprimerie petite ou moyenne n’a pas besoin de refaire toute son interface d’un coup. Modifier d’abord les 3 zones où les erreurs reviennent le plus donne déjà des résultats visibles : dépôt de fichiers, validation du BAT, suivi de commande

Je commencerais par les endroits où quelqu’un pose une question tous les jours, ou clique au mauvais endroit tous les jours. Pas la peine de courir après une belle bibliothèque d’icônes. Il faut d’abord nettoyer les boutons que le service client doit réexpliquer sans arrêt

・Page de dépôt de fichiers : télécharger, téléverser à nouveau, supprimer et prévisualiser doivent utiliser une icône universelle avec du texte, pour éviter les erreurs d’interprétation dans la gestion des fichiers

・Page de validation du BAT : valider, renvoyer, commenter, demander une modification doivent être écrits clairement. Une coche ou une croix ne doit pas porter seule la responsabilité du workflow

・Page de suivi de commande : en attente de devis, en attente de paiement, contrôle prépresse en cours, en production, prêt à expédier doivent d’abord être des états textuels. L’icône ne sert qu’à faciliter le repérage

・Barre d’outils du back-office : les fonctions internes utilisées chaque jour peuvent progressivement devenir icon-only, à condition que la formation des nouveaux et les SOP utilisent le même vocabulaire d’icônes

C’est simple. Là où une erreur de clic peut entraîner une correction de fichier, un rejet, une replanification ou une réclamation client, le texte doit rester. Là où l’enjeu se limite à accélérer le balayage visuel, l’icône peut être resserrée petit à petit

・Une icône est un mot dans l’interface. Si son sens n’est pas stable, elle ne doit pas être utilisée seule

・Au-delà d’une petite dizaine de symboles universels, la plupart des icônes ont besoin d’un label pour porter le sens

・Dans un système prépresse, la validation des icônes doit vérifier si le client devine moins, pas si l’écran contient moins de mots

・Un symbole ne doit être lié qu’à une seule action. Sinon, service client, prépresse et développement feront chacun leur propre traduction

・Quand un processus abstrait n’a pas d’icône universelle, le texte est souvent le dispositif anti-erreur le moins coûteux

Pour les équipes d’impression industrielle et SaaS, la prochaine étape n’est pas de dessiner plus d’icônes, mais de créer un « vocabulaire d’icônes » : lister les boutons à haut risque dans le dépôt de fichiers, la validation du BAT, le suivi de commande, le paiement et la mise en impression, puis décider un par un si l’icône peut être utilisée seule, si elle doit recevoir un label, et si l’action est irréversible. Ce tableau deviendra une règle de design, mais aussi une base pour les scripts du service client, les noms côté développement et la formation des nouveaux arrivants

・Les icônes sont un vocabulaire, pas une décoration