Système d'Iconographie

Que fait Système d'Iconographie ?

Objectif

Le skill Système d'Iconographie fournit une méthodologie pour sélectionner, dimensionner et implémenter des icônes en tant qu'éléments d'interface utilisateur fonctionnels. Il va au-delà du "choix de jolies images" pour établir un système structuré garantissant une utilisation cohérente des icônes afin de réduire la charge cognitive, renforcer l'identité de marque et rester pleinement accessible à tous les utilisateurs. Un système d'iconographie robuste garantit que les icônes servent de panneaux indicateurs clairs plutôt que de clutter visuel.

Cas d'Utilisation

• Définir le style d'icône (contour, rempli, duo-tone) pour un nouveau site web.
• Établir des échelles standard de taille et d'espacement pour les icônes dans différents contextes (boutons, navigation, grilles de fonctionnalités).
• Auditer un site web pour détecter la "prolifération d'icônes" ou les métaphores visuelles incohérentes.
• Implémenter un workflow SVG accessible ou de police d'icônes pour les développeurs.
• Sélectionner des icônes alignées avec des attributs de marque spécifiques (par exemple, icônes arrondies "amicales" vs icônes à bords nets "techniques").

Quand NE PAS Utiliser

• Illustrations et Graphiques Hero : Grandes images narratives complexes qui racontent une histoire plutôt qu'un concept fonctionnel unique. Utilisez plutôt des compétences générales de mise en page ou d'optimisation hero.
• Logos et Identité de Marque : L'identité de marque principale a généralement ses propres règles non négociables ; les icônes soutiennent l'interface, elles ne remplacent pas le logo de la marque.
• Motifs de Fond Purement Décoratifs : Lorsque les icônes sont utilisées comme papier peint sans signification sémantique.

Entrées

1. Voix et Style de Marque : La marque est-elle minimaliste, technique, ludique ou corporate ?
2. Environnement Technique : Le site est-il construit avec un framework qui préfère les composants SVG, les sprites ou les polices d'icônes ?
3. Contextes d'Utilisation : Où les icônes apparaîtront-elles ? (par exemple, Navigation principale, boutons CTA, listes de fonctionnalités, état du tableau de bord).
4. Jetons de Conception Existants : Systèmes de couleur et d'espacement fluides pour garantir l'alignement.

Sorties

1. Guide de Style d'Icones : Règles définies pour l'épaisseur du trait, le rayon des coins et les types de remplissage.
2. Échelle de Taille d'Icones : Un ensemble de jetons (par exemple, icon-sm, icon-md, icon-lg) mappés à des valeurs spécifiques en pixels ou rem.
3. Bibliothèque Sémantique : Un ensemble organisé d'icônes mappées à des actions ou concepts spécifiques (par exemple, "Chevron-bas" pour les menus déroulants).
4. Spécification d'Accessibilité : Règles pour les étiquettes ARIA, role="img" et les attributs aria-hidden.

Workflow

1. Établir la Métaphore Visuelle

Choisissez des icônes qui utilisent des symboles universellement compris.

• Recherche : Loupe.
• Paramètres : Rouage ou Curseurs.
• Utilisateur : Silhouette ou Cercle-utilisateur. Évitez les métaphores "astucieuses" qui obligent les utilisateurs à deviner le sens de l'icône.

2. Définir le Style Visuel

Assurez-vous que toutes les icônes du système partagent la même ADN :

• Épaisseur du Trait : Utilisez une épaisseur de ligne cohérente (par exemple, 2px pour toutes les icônes 24px).
• Traitement des Coins : Les coins arrondis semblent plus accessibles ; les coins nets semblent plus techniques/précis.
• Niveau de Détail : Simplifiez les icônes à mesure qu'elles deviennent plus petites pour maintenir la lisibilité.

3. Construire une Échelle de Taille et d'Espacement

Appliquez le système-d'espacement-fluide aux conteneurs d'icônes :

• Petit (16px) : En ligne avec le texte, fils d'Ariane.
• Moyen (24px) : Boutons standard, navigation principale.
• Grand (48px+) : Cartes de fonctionnalités, points forts hero.
• Centrage Optique : Ajustez manuellement les icônes qui semblent décentrées en raison de leur forme (par exemple, un triangle "Play").

4. Implémenter la Logique de Couleur et d'État

Liez les icônes au système-d'état-interactif :

• Actif/Survol : Les icônes doivent changer de couleur ou de poids en même temps que leur élément parent.
• Couleur Sémantique : Utilisez du rouge pour les icônes de suppression/erreur, du vert pour le succès.
• Contraste : Les icônes doivent respecter WCAG AA (3:1 pour les objets graphiques).

5. Livraison Technique et Accessibilité

• SVG vs Police d'Icones : Préférez les SVG pour de meilleures performances, accessibilité et qualité de rendu.
• Rôles ARIA :
  • Si décoratif : Utilisez aria-hidden="true".
  • Si fonctionnel (par exemple, un bouton avec seulement une icône) : Utilisez role="img" et une aria-label claire.

Règles de Décision

• La Règle de "l'Étiquette d'Abord" : Les icônes doivent presque toujours être accompagnées d'étiquettes textuelles. N'utilisez des icônes "autonomes" que pour des actions universellement reconnues (Recherche, Fermer, Menu) et uniquement si elles ont des étiquettes accessibles.
• Cohérence plutôt que Variété : Utilisez une seule bibliothèque d'icônes (par exemple, Lucide, Heroicons) plutôt que de mélanger des styles provenant de plusieurs sources.
• Échelle d'Épaisseur du Trait : Si une icône est agrandie, son épaisseur de trait doit idéalement rester proportionnelle à sa taille pour maintenir le "poids" visuel dans la mise en page.
• Équilibre Optique : Toutes les icônes ne sont pas créées égales. Une icône carrée semble plus grande qu'une icône circulaire de même largeur. Utilisez une approche de "boîte englobante" mais ajustez manuellement la taille visuelle pour l'équilibre.

Contraintes

• Accessibilité : Les icônes utilisées comme liens ou boutons DOIVENT avoir une alternative textuelle pour les lecteurs d'écran.
• Cibles Tactiles : Les icônes dans les boutons ne doivent pas réduire la zone de contact en dessous de 24x24px (WCAG 2.2 SC 2.5.8 minimum) ; 44x44px est préféré pour les actions principales uniquement avec icône.
• Réactivité : Sur les petits écrans, les icônes peuvent devoir être simplifiées ou supprimées si elles encombrent le texte, bien qu'elles aident souvent le balayage mobile.

Schémas d'Échec Courants

• L'icône "Mystery Meat" : Utiliser une icône sans étiquette que les utilisateurs ne reconnaissent pas.
• Poids Incohérents : Mélanger une icône de contour 1px avec une icône en gras 3px dans la même rangée.
• Sur-Complexité : Utiliser des icônes avec trop de lignes fines qui "brouillent" ou disparaissent sur les écrans basse résolution ou les petites tailles.
• Accessibilité Manquante : Utiliser des icônes SVG sans titres ni étiquettes ARIA, laissant les utilisateurs de lecteurs d'écran aveugles à l'action.
• Alignement Optique Cassé : Un bouton "Play" qui semble glisser sur le côté gauche de son cercle parce qu'il est mathématiquement centré mais pas optiquement centré.

Critères de Validation

• Toutes les icônes appartiennent à un seul style visuel cohérent.
• Les icônes ont une échelle de taille définie (par exemple, 16, 24, 32, 48).
• Les icônes autonomes (le cas échéant) ont une aria-label ou des alternatives textuelles équivalentes.
• Les icônes décoratives sont marquées avec aria-hidden="true".
• Les icônes maintiennent un rapport de contraste de 3:1 par rapport à leur arrière-plan.
• Les éléments interactifs uniquement avec icône respectent le minimum de cible tactile WCAG 2.2 24x24px (44x44px préféré).
• Les métaphores visuelles sont claires et standard (pas de "devinette").