Conseils
Les icônes sont une représentation visuelle d’une action, d’une idée ou d’un objet. Toutefois, si leur signification n’est pas immédiatement claire pour les utilisateurs, elles peuvent être source de confusion et de frustration et les empêcher de mener leurs tâches à bien.
Les utilisateurs interprètent les icônes en fonction de leurs expériences antérieures. Comme il n’existe pas de norme d’utilisation pour la plupart des icônes, vous devez utiliser des étiquettes textuelles pour en communiquer le sens et réduire l’ambiguïté.
À faire
- Choisissez des icônes qui sont familières et conventionnelles.
- Utilisez les icônes qui ressemblent le plus ce qu’elles représentent.
- Pour éviter toute ambiguïté, accompagnez toutes les icônes d’une étiquette textuelle visible, sauf s’il s’agit d’une icône universelle (la plupart des icônes ne le sont pas) ou d’une icône de marque de média social (Twitter, Facebook, etc.).
- Vérifiez vos choix d’icônes. Montrez-les à d’autres personnes et demandez-leur ce qu’elles représentent. Il est important de les montrer à des personnes qui ne sont pas impliquées dans le projet ou, mieux encore, d’en faire l’essai auprès d’utilisateurs.
À ne pas faire
- N’utilisez pas d’icônes à des fins purement décoratives.
- N’utilisez pas d’icônes sans étiquettes, notamment lorsqu’il s’agit de fonctions essentielles.
- Ne liez pas les icônes ou les étiquettes textuelles à des actions ou à des emplacements différents.
- Évitez d’utiliser trop d’icônes. L’utilisation d’un trop grand nombre d’icônes sur une page nuit à leur efficacité.
« Utilisez la règle des 5 secondes : s’il vous faut plus de 5 secondes pour penser à une icône appropriée, il est peu probable qu’une icône puisse communiquer efficacement votre idée. » Aurora Harley, NN/g
Bibliothèque d’icônes
Le système de conception du GNB utilise les icônes de Font Awesome. Font Awesome est une bibliothèque d’icônes et une trousse d’outils utilisés par des millions de concepteurs, de développeurs et de créateurs de contenu à travers le monde. La bibliothèque et les outils sont disponibles en autohébergement et en solution SaaS (logiciel-service). Ils proposent une variété de niveaux et d’options, y compris la formule « gratuit pour toujours ». Aucune autre bibliothèque d’icônes ne devrait être utilisée, à moins de circonstances particulières. Si vous souhaitez utiliser des icônes non incluses dans la bibliothèque, vous devez les faire approuver par l’équipe du système de conception du GNB.
- Obtenir Font Awesome (en anglais)
- Font Awesome sur GitHub (en anglais)
- Documentation de Font Awesome (en anglais)
Tableau de référence des icônes
Recherche d’icônes courantes par symbole ou par signification et exemples d’utilisation.
| Icône | Signification | Nom de classe | Unicode | Exemple |
|---|---|---|---|---|
| Bas | fa-angle-down | f107 | Accordéons, navigation principale | |
| Retourner | fa-arrow-left | f060 | Boutons, Formulaires | |
| Suivante, commencer | fa-arrow-right | f061 | Boutons, Formulaires | |
| Précédent | fa-angle-left | f104 | Pagination | |
| Suivant | fa-angle-right | f105 | Pagination | |
| Haut | fa-angle-up | f106 | Accordéons, navigation principale | |
| Lien externe | arrow-up-right-from-square | f08e | Lien externe | |
| Panier | fa-cart-shopping | f07a | Navigation principale | |
| Faite, choisi | fa-check | f00c | Formulaires, Navigations | |
| Succès | fa-circle-check | f058 | Alertes | |
| Avertissement | fa-circle-exclamation | f06a | Alertes | |
| Information | fa-circle-info | f05a | Alertes | |
| Aide | fa-circle-question | f059 | Infobulle | |
| Ne pas faire, supprimer | fa-circle-xmark | f057 | Étiquette amovible | |
| Fermer | fa-xmark | f00d | Fenêtres modales | |
| Chargement de fichier | fa-file-arrow-up | f574 | Téléversement de fichier à l’aide de la fonction glisser-déposer | |
| Recherche | fa-magnifying-glass | f002 | Recherche | |
| Danger, erreur | fa-triangle-exclamation | f071 | Alertes, erreurs dans un formulaire |
Icônes dans les liens
Les icônes qui figurent sur la même ligne que les liens doivent toujours avoir une taille de 1 rem (16 px) et ne doivent jamais être soulignées.
Icônes dans les boutons
Vous pouvez ajouter des icônes aux boutons pour illustrer la fonction du bouton.
Couleurs des icônes
Les icônes insérées dans un contenu doivent reprendre les couleurs héritées du type de contenu en question. Par exemple, une icône incluse dans un lien doit être bleue. Lorsqu’elles sont utilisées dans des composants, les icônes héritent de leurs couleurs et de leurs styles par défaut.
Info/lien
Succès
Avertissement
Danger
Icônes dans les composants
Les icônes héritent des styles par défaut de leur composant parent et ne doivent pas être modifiées. Par exemple, une icône figurant dans une carte apparaîtra dans un cercle gris et une icône utilisée dans le cadre d’une alerte apparaîtra dans la couleur qui traduit la signification de l’alerte. Ne modifiez pas les styles des icônes dans les composants.