Utiliser un langage visuel cohérent
Les noms des icônes doivent décrire la figure ; La signification opérationnelle réside dans l'étiquette de contrôle.
Icône Système de conception
Gardez l'icône reconnaissable et significative, quelle que soit sa taille.
Contenu de la checklist
Progression de la vérification
01
Structure et signification
Comparer les informations et la présentation dans le contexte d'utilisation.
02
Interaction et convivialité
Essayez l'opération, modifiez le statut et continuez à travailler.
03
Complétez l'expérience
Recherchez les détails faciles à manquer lors de la mise en œuvre de la conception.
La progression est enregistrée automatiquement dans ce navigateur.
GUIDE
Comment vérifier
EXEMPLES
Exemples d’utilisation
Utiliser un langage visuel cohérent
La même image « corbeille » est étiquetée « Supprimer le brouillon » ou « Supprimer le membre » selon le contexte.
Variantes et cas d’usage
Style des icônes
Utilisez un système cohérent d’icônes en traits ou pleines pour les icônes de même rôle sur un même écran.
Placez une nouvelle icône à côté d’une ancienne à la même taille ; leur épaisseur et leurs espaces doivent être cohérents.
Exemple Les boutons d’e-mail, de vidéo et de documentation utilisent le même jeu de SVG avec des traits de 1,6 px.
Taille et zone interactive
Distinguez la taille du dessin de celle de la zone cliquable ; une petite icône doit conserver une zone tactile adaptée.
Testez une icône de 16 px dans un bouton mobile ; l’utilisateur ne doit pas avoir à toucher précisément le trait.
Exemple Une icône de 18 px est centrée dans une zone cliquable de 44 px.
Un nom qui exprime le sens
Nommez clairement la fonction pour éviter que l’utilisateur ait à deviner le sens du dessin.
Le lecteur d’écran doit pouvoir annoncer le nom de l’action ; les icônes décoratives ne doivent pas répéter le libellé.
Exemple Le bouton à icône de cloche s’appelle « Ouvrir les notifications » ; une icône placée à côté d’un texte est masquée dans l’arbre d’accessibilité.
Notifications
Compte
Rechercher