Glossaire des interfaces utilisateurs

Pourquoi un glossaire UI est précieux

Quand on conçoit une interface — site web, appli mobile, outil desktop — on utilise énormément de composants standardisés : boutons, menus, cartes, etc. Connaître leur nom, leur rôle précis, leurs variantes et les usages appropriés aide à communiquer clairement avec les autres, à garantir la cohérence de l’interface, à éviter les redondances, et à créer un système visuel plus solide. Ce glossaire rassemble nombre de ces composants.

Le glossaire détaillé

Voici une liste alphabétique de composants UI avec leur définition. On gagne en clarté quand chaque terme est bien identifié.

A

• Accordion : Empilement vertical de conteneurs repliables / dépliables pour révéler ou masquer des sections de contenu.
• Action Sheet : Style de menu présentant un ensemble d’actions/options, souvent à choisir parmi plusieurs items.
• Avatar : Représentation visuelle d’une entité unique (personne, entreprise, objet), souvent utilisée pour identifier un utilisateur ou contenu associé.

B

• Badge : Petite étiquette ou icône qui informe dynamiquement — nombre, statut, signal visuel.
• Banner : Message bien visible généralement en haut ou en bas de l’écran, qui affiche une information importante accompagnée d’actions connexes.
• Bottom Sheet : Contenu supplémentaire qui apparaît depuis le bas de l’écran, souvent temporaire, comme pour montrer des options ou détails.
• Button : Éléments cliquables ou tactiles pour déclencher une action (soumettre, partager, approuver, etc.).

C

• Card : Unité visuelle distincte qui regroupe contenu et actions connexes (image + texte + bouton, etc.).
• Carousel : Disposition horizontale défilaible montrant une série d’éléments (images, cartes, items) que l’on peut parcourir latéralement.
• Checkbox : Contrôle d’entrée pour choisir une ou plusieurs options parmi un ensemble.
• Chip : Élément compact représentant une entrée, attribut ou action — souvent utilisable pour filtres, tags, sélections rapides.
• Color Picker : Interface pour sélectionner une couleur via palette ou spectre.
• Combobox : Liste déroulante avec suggestion/autocomplétion, permettant de choisir parmi des options prédéfinies tout en pouvant filtrer.

D

• Date Picker : Permet de choisir une date ou une plage de dates.
• Dialog : Fenêtre modale (ou presque) qui demande une interaction de l’utilisateur (alerte, confirmation, saisie).
• Divider : Ligne fine ou élément visuel séparateur pour regrouper ou distinguer des contenus dans des listes ou sections.
• Drawer : Panneau glissant depuis le bord (gauche ou droit, haut ou bas) pour contenir du contenu secondaire ou une navigation (souvent déclenché par un bouton hamburger).
• Dropdown Menu : Menu qui “tombe”, affichant des options ou actions dans une surface temporaire.

E, F, G

• Empty State : État où il n’y a pas (encore) de données à afficher ; souvent illustré pour inviter l’utilisateur à agir.
• Error Message : Message d’erreur indiquant que quelque chose n’a pas fonctionné comme attendu.
• File Uploader / Drop Zone : Zone où l’utilisateur peut glisser-déposer des fichiers ou cliquer pour les sélectionner.
• Floating Action Button : Bouton proéminent, flottant au-dessus du UI, représentant l’action principale de l’écran.
• Full-screen Overlay : Contenu qui recouvre entièrement l’écran pour proposer une fonction ou un affichage complémentaire, temporaire.
• Gallery : Grille organisée d’items (souvent images ou miniatures) pour parcourir visuellement.

H, L

• Hyperlink : Lien cliquable/tappable qui permet de naviguer vers un autre emplacement (page, section, ressource).
• Launch Screen / Splash Screen : Premier écran affiché lors du lancement d’une appli, souvent illustratif ou de branding, avant de montrer le contenu principal.
• Loading Indicator : Animation (spinner, points, barre) qui signale que quelque chose est en cours de chargement.

M, N

• Map Pin : Marqueur sur une carte indiquant un point ou une position spécifique.
• Navigation Menu : Menu principal de navigation, pour accéder aux différentes sections / pages de l’application / site.

P, R, S, T

• Page Control : Indicateurs (souvent sous forme de points) montrant le nombre de pages / vues et la page active.
• Pagination : Contrôle qui permet de naviguer entre plusieurs pages de contenu (page 1, 2, 3…).
• Popover : Overlay contextuel flottant proche de l’élément déclencheur, montrant des informations ou actions liées.
• Progress Indicator : Élément visuel affichant l’avancement d’un processus (chargement, téléchargement, opérations longues).
• Radio Button : Option à choisir dans un groupe : une seule option possible parmi plusieurs.
• Search Bar : Champ permettant de saisir un terme pour rechercher du contenu ou filtrer des résultats.
• Segmented Control : Contrôle divisé en segments, souvent pour basculer entre vues ou choisir une option dans un ensemble limité.
• Select : Liste déroulante permettant de choisir une option parmi plusieurs.
• Sidebar : Colonne latérale de navigation ou de contenu complémentaire.
• Skeleton : Écran de chargement montrant une version “placeholder” de la mise en page avant que le contenu réel ne s’affiche.
• Slider : Curseur permettant de sélectionner une valeur ou une plage de valeurs.
• Stacked List : Liste verticale d’items liés (texte, image, etc.), alignés les uns sous les autres.
• Status Dot : Petit indicateur rond, généralement de couleur, signifiant un statut (notification, en ligne / hors ligne, etc.).
• Stepper : Contrôle à deux segments pour augmenter ou diminuer une valeur pas à pas.
• Switch : Permet de basculer entre deux états (activé / désactivé).
• Tab Bar : Barre de navigation (souvent en bas ou en haut selon plateforme) pour accéder aux sections principales de l’application.
• Table : Affichage structuré de données tabulaires, permettant tri, comparaison, etc.
• Table of Contents : Sommaire qui permet de naviguer vers une section spécifique d’une page.
• Text Area : Zone de saisie de texte multi-ligne.
• Text Field : Champ de saisie de texte simple (ligne unique).
• Tile : Élément sélectionnable dans une grille ou liste, souvent avec image + texte.
• Time Picker : Permet de choisir une heure ou plage horaire.
• Toast : Message bref qui apparaît temporairement pour informer l’utilisateur (succès, erreur, information).
• Toolbar : Barre contenant des outils ou actions contextuelles selon ce que fait l’utilisateur.
• Tooltip : Petit texte explicatif apparaissant quand on survole ou touche un élément pour donner un indice ou complément d’information.
• Top Navigation Bar : En-tête de la page/appli avec les liens/onglets principaux et actions clés.
• Tree : Structure de données ou d’éléments imbriqués, souvent utilisée pour afficher des hiérarchies (ex. fichiers, dossiers, catégories).

Quelques ressources pour vérifier et approfondir

Les définitions de ce glossaire sont compatibles avec ce que l’on trouve dans des sources reconnues comme le glossaire UI de Nielsen Norman Group (Nielsen Norman Group), celui du Material Design (Material Design), ou des blogs spécialisés comme CareerFoundry (CareerFoundry) et Supercharge Design (supercharge.design).