Lexique UI
L’interface utilisateur (UI) peut contenir une variété d’éléments visuels.
Voici un lexique couramment trouvés dans une interface utilisateur.
1. Les Boutons
Les boutons cliquables pour effectuer des actions (par exemple, “Enregistrer”, “Envoyer”, “Suivant”).
2. Les Icônes
Petites images symboliques pour représenter des fonctions ou des actions (par exemple, une icône de corbeille pour supprimer un élément).
3. Le Menu
Une liste déroulante ou une liste d’options pour la navigation (par exemple un menu de navigation en haut d’une page).
4. Les Formulaires
Les champs de saisie de texte, cases à cocher, boutons radio et autres éléments pour collecter des informations de l’utilisateur (par exemple, un formulaire de connexion).
5. Les Images
Les illustrations, photos ou graphiques utilisés pour informer ou ajouter de l’esthétique.
6. Le Texte
Le contenu écrit, y compris titres, paragraphe, étiquettes et descriptions.
7. Les Liens
Le texte ou boutons cliquables permettant de naviguer vers d’autres pages ou sites web.
8. La Barre de Recherche
Un champ de recherche pour trouver du contenu spécifique.
9. Les Sliders
Les contrôles interactifs pour ajuster des valeurs (par exemple, un curseur pour régler le volume).
10. Les Indicateurs de Progression
Les barres ou icônes indiquant l’avancement d’une tâche en cours (par exemple, une barre de chargement).
11. Les Cartes
Les zones interactives affichant des informations géographiques (par exemple, une carte Google Maps).
12. La Pagination
Les liens ou boutons pour passer d’une page à l’autre dans une liste ou une série de contenus.
13. Le On/Off Switches
Boutons permettant d’activer ou de désactiver des fonctionnalités (par exemple, un interrupteur pour activer le mode nuit).
14. Les Notifications
Les messages ou alertes qui informent l’utilisateur sur des événements importants (par exemple, une notification de message reçu).
15. Les Menus Contextuels
Les Menus qui apparaissent lorsque l’utilisateur effectue une action spécifique (par exemple, un menu contextuel pour copier/coller).
16. Une Barre de Navigation
Une barre horizontale ou verticale contenant des liens vers des sections clés d’un site web ou d’une application.
17. Les Vidéos
Le Contenu vidéo intégré à l’interface.
18. Les Caroussels
Les diaporamas interactifs affichant plusieurs images ou éléments les uns après les autres.
Ces éléments constituent la base de l’interface utilisateur et sont utilisés pour créer des expériences interactives et conviviales pour les utilisateurs d’applications et de sites web.
Questions fréquentes sur l'interface utilisateur et son vocabulaire
Les boutons, champs de saisie, menus, cartes, modales, notifications, navigation principale, états de survol, icônes et grille de mise en page. Maîtriser ce vocabulaire permet de dialoguer efficacement avec designers et développeurs.
Une bibliothèque documentée de composants UI, règles typographiques, palette colorée, icônes et guidelines d'usage. Il assure cohérence et rapidité sur les grands projets. Ferr Studio livre souvent un mini design system avec ses créations.
C'est l'écran affiché quand il n'y a encore rien à montrer (pas de projet, pas de message). Un bon état vide guide vers la première action au lieu de laisser l'utilisateur perplexe. Trop souvent oublié, il fait la différence.
Un composant est un élément isolé réutilisable (bouton, input). Un pattern est un agencement récurrent qui résout un problème d'usage (tunnel de login, formulaire multi-étapes, recherche filtrée). Les deux structurent un bon design system.
Parce que c'est ce qui guide l'œil de l'utilisateur vers les actions importantes. Une bonne hiérarchie visuelle utilise taille, poids, couleur et espace pour rendre chaque élément compréhensible en un coup d'œil.
Lisez le blog de Nielsen Norman Group, explorez Refactoring UI, suivez des studios comme Pentagram ou Ferr Studio sur LinkedIn, et pratiquez en refaisant des interfaces existantes dans Figma. La répétition ancre le vocabulaire.


