50 mots indispensables en UI Design

Une interface se construit avec des composants : button, input field, dropdown, toggle, checkbox, modal, tooltip, card, tab bar, navbar. Chacun a des états : default, hover, focus, active, disabled, loading, error. Savoir les nommer évite les malentendus avec les développeurs : "We need a disabled state for the primary button."

Quelques termes voisins à distinguer : un placeholder est le texte grisé d'un champ vide, un label l'intitulé qui reste visible, un helper text l'aide située sous le champ. Une erreur de formulaire se dit validation error, et son message error message.

Côté mise en forme : padding (espace intérieur), margin (espace extérieur), gutter (gouttière entre colonnes), grid, baseline, alignment, whitespace, contrast, visual hierarchy. Une phrase utile en revue : "The padding feels inconsistent between these two cards."

Le terme affordance désigne le signal visuel qui indique ce qu'on peut faire d'un élément : un bouton en relief invite au clic. Un élément sans affordance claire est un problème d'UI avant d'être un problème de contenu. À l'inverse, une bonne visual hierarchy guide l'œil vers l'action principale, la call to action.

Dans un design system, les design tokens sont les valeurs de base (couleurs, tailles, espacements) nommées et réutilisables : "Let's use the token, not a hard-coded hex value." Un component library regroupe les composants, une variant en est une déclinaison (taille, couleur), un breakpoint est la largeur où la mise en page bascule.

Pour la livraison : un handoff est le passage de relais design vers développement, les specs décrivent mesures et comportements, et un edge case est un scénario limite (nom très long, liste vide, connexion perdue). Terminez toujours une présentation par : "Here are the edge cases I've covered."

Exercice : ouvrez un écran de votre dernier projet et décrivez-le à voix haute en trois phrases. "The primary button has a strong contrast and a clear hover state. The spacing follows an 8-point grid. On mobile, the layout shifts at the 768 pixel breakpoint." Chaque phrase combine un composant, une propriété et un état.

Deuxième cas, un retour développeur : "The empty state is missing." Réponse efficace : "Good catch, I'll add the empty state and update the specs today." Vous reconnaissez le point, annoncez l'action et le délai : le trio qui inspire confiance en équipe internationale.