UI/UX Design

Les icônes

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Cette leçon traite des icônes d'interface : leur rôle et leurs métaphores, les styles (contour, plein, duotone) et la cohérence d'un jeu, le dessin sur une grille de 24 px (marge de sécurité, formes de référence, épaisseur de trait), le choix d'une bibliothèque libre, la compréhension des icônes et l'importance des libellés, les tailles et les zones tactiles (48 × 48 px) et l'accessibilité. Trois activités conduisent à constituer le jeu d'icônes de CantineCampus.

Durée	Niveau	Prérequis	À la fin de la leçon
1 heure (cours et 3 activités)	Débutant, chapitre « Les éléments graphiques et la charte graphique »	La typographie ; Évaluer le choix des mots et la qualité du vocabulaire	Vous savez choisir une bibliothèque d'icônes cohérente, les dimensionner et vérifier qu'elles sont comprises

Objectifs
- Définir le rôle d'une icône dans une interface.
- Distinguer les styles d'icônes et garder un jeu cohérent.
- Connaître les règles de dessin : grille, marge de sécurité, épaisseur de trait.
- Choisir les bonnes tailles et des zones tactiles suffisantes.
- Vérifier qu'une icône est comprise et accessible.

À quoi sert une icône ?
- Une icône est un petit pictogramme qui représente une action (rechercher, ajouter), un objet (panier, profil) ou un état (succès, alerte).
- Elle permet de reconnaître une fonction plus vite qu'en lisant, et de gagner de la place sur un petit écran.
- Mais une icône est un mot à deviner: si l'usager ne la comprend pas, elle fait perdre du temps au lieu d'en faire gagner.
- Une icône fonctionne grâce à une métaphore: la maison pour l'accueil, le chariot pour le panier, la loupe pour la recherche.

Les styles d'icônes
- Contour (outline) : seul le trait est dessiné. Léger et neutre, c'est le style le plus utilisé pour la navigation.
- Plein (filled) : la forme est remplie. Plus de poids visuel ; on l'utilise souvent pour l'onglet actif d'une barre de navigation, les autres restant en contour.
- Duotone: deux tons, souvent la couleur primaire et une version claire. Décoratif, pour des illustrations ou des écrans d'accueil.
- Quel que soit le style choisi, tout le jeu doit être cohérent: même style, même épaisseur de trait, mêmes angles, même couleur. Mélanger deux bibliothèques se voit immédiatement.

Les styles d'icônes et la cohérence d'un jeu

Dessiner sur une grille
- Les icônes d'interface se dessinent sur une grille de 24 × 24 px (parfois 20 ou 16 px).
- Une marge de sécurité de 2 px reste vide autour de l'icône : la zone de dessin réelle fait 20 × 20 px.
- Des formes de référence (un cercle de 20 px, un carré de 18 px) donnent le même poids visuel aux icônes rondes et carrées.
- L'épaisseur de trait est la même partout : 1,5 ou 2 px, avec des bouts et des angles arrondis ou droits selon le style.
- En pratique, on dessine rarement ses icônes : on choisit une bibliothèque qui respecte déjà ces règles, et on ne crée que les icônes manquantes, sur la même grille.

La grille de 24 px d'une icône

💡 À savoir

Bibliothèques libres et cohérentes : Material Symbols (licence Apache 2.0), Lucide (ISC), Phosphor (MIT), Tabler Icons (MIT). Toutes existent sous forme d'extension Figma.
Notez la bibliothèque et sa licence dans la charte : le développeur doit utiliser la même.

Une icône doit être comprise
- Très peu d'icônes sont universelles: accueil (maison), recherche (loupe), fermer (croix), panier, lecture. Pour toutes les autres, le sens varie selon les personnes.
- L'étoile peut vouloir dire « favori », « noter » ou « nouveau » ; le cœur « j'aime » ou « favori » ; la disquette « enregistrer »… pour ceux qui ont connu les disquettes.
- La règle : une icône avec un libellé. Le texte lève l'ambiguïté, l'icône accélère la reconnaissance. Dans une barre de navigation, gardez toujours les libellés.
- Une icône seule se teste, comme un mot (leçon « Évaluer le choix des mots ») : on la montre sans contexte et on demande « Que se passerait-il si vous la touchiez ? ». Visez 4 participants sur 5.

Icônes universelles, icônes ambiguës et libellés

🍽 Exemple : CantineCampus

Imaginons qu'au TP 6, l'icône « … » (menu caché) n'ait été comprise que par un participant sur cinq : la fonction « Annuler ma commande » qu'elle cachait est restée introuvable.
La correction : un libellé « Plus » sous l'icône, et l'action « Annuler ma commande » sortie du menu, sur l'écran de confirmation.

Tailles et zones tactiles
- 16 px: dans un texte ou une liste dense. 20 px: dans un champ ou un bouton. 24 px: la taille standard (navigation, barres d'outils). 32 px et plus: illustration, état vide.
- La zone tactile est la surface qu'on peut toucher. Elle est plus grande que l'icône : au moins 48 × 48 px sur Android et 44 × 44 points sur iOS, avec 8 px d'espace entre deux zones.
- Une icône de 24 px posée dans une zone de 24 px fait toucher la mauvaise cible, surtout en marchant.
- Une icône sans texte visible doit avoir un nom accessible, lu par les lecteurs d'écran : « Supprimer le plat », pas « icône poubelle ».

Tailles d'icônes et zones tactiles

⚠ Piège : une icône utilisée pour deux actions différentes (le crayon pour « modifier » à un endroit et « noter » à un autre) détruit sa signification. Une icône = une action dans toute l'application.

Activités

Activité 1Repérer les incohérences · ⏱ 15 min

Ouvrez le prototype du TP 6 et faites l'inventaire de toutes ses icônes (écran, icône, fonction).
Signalez les icônes de styles différents, celles qui n'ont pas de libellé et celles qui servent à deux fonctions.

📁 Résultat attendu : l'inventaire des icônes avec une colonne « problème ».

Activité 2Le test des icônes · ⏱ 20 min

Choisissez six icônes sans libellé dans une bibliothèque (dont deux ambiguës).
Montrez-les une par une à trois personnes extérieures : « Que se passerait-il si vous la touchiez ? ». Notez les réponses mot pour mot.
Calculez le taux de compréhension de chaque icône et décidez : garder seule, ajouter un libellé ou changer d'icône.

📁 Résultat attendu : un tableau : icône, réponses, taux, décision.

Activité 3Le jeu d'icônes de CantineCampus · ⏱ 20 min

Choisissez une bibliothèque libre et notez sa licence.
Sélectionnez les icônes de la barre de navigation (Accueil, Menus, Panier, Compte) et des actions (ajouter, heure de retrait, végétarien, annuler).
Placez-les dans Figma à 24 px, avec leur libellé et une zone tactile de 48 px.

📁 Résultat attendu : une planche Figma du jeu d'icônes avec libellés et zones tactiles.

Erreurs fréquentes

Symptôme	Cause	Solution
Des icônes d'épaisseurs différentes	Plusieurs bibliothèques mélangées	Une seule bibliothèque, notée dans la charte
Barre de navigation sans libellés	Recherche d'un style « épuré »	Toujours un libellé sous l'icône
Icône « … » qui cache des fonctions importantes	Manque de place	Sortir les actions fréquentes du menu caché
Icône difficile à toucher	Zone tactile = taille de l'icône	Zone de 48 × 48 px minimum
Le lecteur d'écran dit « bouton »	Pas de nom accessible	Un nom qui décrit l'action

Bilan
- Une icône accélère la reconnaissance, mais c'est un mot à deviner: elle doit être comprise.
- Un jeu d'icônes est cohérent: un style, une épaisseur, une bibliothèque.
- Les icônes se dessinent sur une grille de 24 px avec une marge de 2 px.
- On distingue la taille de l'icône (24 px) et la zone tactile (48 px).
- Une icône avec un libellé et un nom accessible sert tous les usagers.