Une interface bien conçue passe inaperçue.
Le UI design ne se voit qu'en son absence. Quand un bouton est mal placé, quand un libellé prête à confusion, quand une couleur ne veut rien dire. Cette page rassemble les fondamentaux du métier : 24 concepts classés en fondamentaux, patterns et principes, et 3 profils qui portent la discipline dans une équipe produit.
Clique sur une carte concept pour révéler sa description.
Le UI, c'est le métier qui m'a fait tomber dans le dev. J'ai commencé par vouloir dessiner des interfaces, puis j'ai voulu comprendre comment elles fonctionnent, puis les construire. Ces concepts, je les ai croisés sur des projets clients, en refonte, en veille. Certains sont techniques, d'autres philosophiques. Tous se rejoignent sur une idée : servir l'utilisateur, pas l'ego du designer.
Un bon UI, ça se ressent avant de se comprendre.
Le UI est une discipline plurielle. Selon la maturité produit, un même designer porte plusieurs casquettes, ou trois personnes se répartissent le travail.
Designer d'interfaces
Sens esthétique · Rigueur · Attention au détail · Culture graphique · Empathie visuelle · Pragmatisme · Curiosité
Figma · Adobe XD · Illustrator · Photoshop · Zeplin · Abstract · Notion
Animateur d'interfaces
Sens du rythme · Créativité · Storytelling · Précision · Sensibilité cinématographique · Enthousiasme · Out of the box
After Effects · Lottie · Rive · Principle · Figma (Smart Animate) · GSAP · CSS animations
Architecte visuel
Pensée systémique · Rigueur · Logique · Sens de la documentation · Collaboration · Pragmatisme · Vision long terme
Figma (Variables · Auto Layout · Components) · Storybook · Style Dictionary · Tokens Studio · Zeroheight · GitHub
Les briques de base : typo, couleur, hiérarchie, grille. Rien de neuf, tout de nécessaire.
Structurer l'information et guider la lecture grâce aux choix typographiques.
La typographie est l'un des outils les plus puissants du UI design. Le choix des polices, la hiérarchie des tailles, les interlignes et les graisses déterminent la lisibilité et le ton d'une interface. Une bonne typographie se remarque rarement. Une mauvaise, toujours.
Communiquer du sens, créer de l'émotion et guider l'attention de l'utilisateur.
La couleur n'est pas décorative : elle porte du sens. Elle différencie les éléments interactifs des éléments statiques, signale les états (succès, erreur, attention) et renforce l'identité de l'interface. Une palette bien construite fonctionne aussi bien en mode clair qu'en mode sombre.
Organiser les éléments d'une interface pour que l'utilisateur sache instinctivement quoi regarder en premier.
La hiérarchie visuelle s'établit par la taille, la couleur, le contraste, l'espacement et le poids typographique. Elle guide l'œil sans que l'utilisateur s'en rende compte. Une interface sans hiérarchie oblige l'utilisateur à tout lire pour trouver ce qu'il cherche.
Créer de l'ordre, de la cohérence et de la respiration dans une interface.
La grille structure le placement des éléments. L'espacement, marges, paddings, gouttières, crée la respiration et détermine les relations entre les blocs. Un système d'espacement basé sur des multiples fixes (4px, 8px, 16px…) garantit la cohérence à l'échelle d'un produit entier.
Communiquer rapidement une action ou un concept avec un minimum d'espace.
Une icône bien choisie remplace un mot. Encore faut-il qu'elle soit universellement comprise. Le style iconographique doit être cohérent dans toute l'interface : même épaisseur de trait, même niveau de détail, même grille de construction. Les icônes ambiguës doivent toujours être accompagnées d'un libellé.
Garantir que l'interface reste lisible pour tous les utilisateurs, quelles que soient leurs conditions de lecture.
Le contraste entre texte et fond doit respecter les seuils du standard WCAG : 4.5:1 pour le texte courant, 3:1 pour les grandes tailles. Une interface accessible bénéficie à tous : meilleure lisibilité en plein soleil, en basse luminosité, pour les personnes malvoyantes ou daltoniennes.
Trouver le bon équilibre entre richesse du contenu et clarté de la lecture.
Trop d'information tue l'information. Trop peu et l'interface semble vide. La densité se règle par le nombre d'éléments affichés simultanément, leur taille et leur espacement. Les interfaces pro peuvent être denses ; les interfaces grand public ont besoin de plus d'air.
Adapter une interface à tous les formats d'écran sans dégrader l'expérience.
Un design responsive ne se contente pas de réduire la taille des éléments. Il repense la disposition, la navigation et les priorités d'affichage selon le contexte d'usage. Mobile first est une approche : on conçoit d'abord pour la contrainte maximale, puis on enrichit pour les grands écrans.
Les briques d'interface éprouvées. Formulaires, navigation, modales, notifications. Un vocabulaire commun avec l'utilisateur.
Collecter des données utilisateur avec le moins de friction possible.
Un bon formulaire pose le moins de questions nécessaires, dans le bon ordre, avec des libellés clairs. Les erreurs sont signalées immédiatement, au bon endroit, avec un message utile. Le formulaire le plus rapide à remplir est celui que l'utilisateur ne remarque pas.
Permettre à l'utilisateur de se déplacer dans un produit sans se perdre.
La navigation doit être prévisible : l'utilisateur doit savoir où il est, où il peut aller et comment revenir. Barre de navigation, fil d'Ariane, menu latéral, tabs… chaque pattern a ses forces selon le nombre de sections et le contexte d'usage. La navigation disparaît derrière le contenu quand elle est bien conçue.
Indiquer à l'utilisateur que le système travaille et éviter l'impression de blocage.
Un écran qui ne répond pas semble cassé. Les états de chargement rassurent et donnent de la fluidité : skeleton screens, spinners, barres de progression. Le skeleton screen est préférable pour les contenus structurés : il prépare l'œil à la mise en page finale avant même que le contenu arrive.
Transformer un moment potentiellement frustrant en opportunité d'engagement.
Un état vide apparaît quand il n'y a encore rien à afficher : première connexion, liste vide, résultats de recherche sans correspondance. C'est un moment clé : bien conçu, il guide l'utilisateur vers l'action suivante. Mal conçu, il laisse l'utilisateur face à un écran blanc sans savoir quoi faire.
Attirer l'attention sur une action ou une information critique sans quitter la page.
Une modale interrompt le flux de l'utilisateur : elle doit le mériter. Confirmations de suppression, formulaires courts, alertes importantes. Une modale mal utilisée (publicité, inscription forcée) est l'un des patterns les plus frustrants en UI. La règle : utiliser une modale uniquement quand l'action requiert un contexte dédié et isolé.
Informer l'utilisateur d'un événement sans interrompre son flux de travail.
Toast, bannière, badge, notification push : chaque format a son niveau d'urgence. Les notifications intrusives fatiguent. Les notifications silencieuses passent inaperçues. Le bon format dépend de l'importance du message et du moment où l'utilisateur en a besoin. Une notification inutile est une notification de trop.
Aider un nouvel utilisateur à comprendre le produit et à accomplir sa première action clé.
L'onboarding ne consiste pas à tout expliquer. Il consiste à amener l'utilisateur à sa première victoire le plus vite possible. Tutoriels interactifs, tooltips contextuels, écrans d'introduction : moins il y en a, mieux c'est. Le meilleur onboarding est une interface tellement claire qu'il n'en faut pas.
Présenter des collections d'éléments de façon lisible et explorable.
Les cards regroupent les informations d'un objet en une unité visuelle autonome. Les listes affichent les mêmes données de façon plus dense. Le choix entre card et liste dépend du contenu : une card convient à un objet riche (image, titre, description, actions), une liste à des données tabulaires ou des résultats de recherche.
Aider l'utilisateur à comprendre ce qui s'est passé et comment s'en sortir.
Un message d'erreur utile explique ce qui a échoué, pourquoi et comment corriger. « Une erreur est survenue » n'aide personne. Les erreurs de formulaire se placent au plus près du champ concerné. Les erreurs système s'accompagnent toujours d'une action possible : réessayer, contacter le support, revenir en arrière.
Les règles qui traversent tous les projets. Ce ne sont pas des techniques, ce sont des choix de posture.
Créer un sentiment de familiarité qui réduit la charge cognitive de l'utilisateur.
Un élément qui ressemble à un bouton doit se comporter comme un bouton, partout dans l'interface. La cohérence interne (au sein du produit) et externe (par rapport aux conventions du web) réduit le temps d'apprentissage. Chaque exception à la règle coûte de l'attention à l'utilisateur.
Confirmer à l'utilisateur que ses actions ont bien été prises en compte.
Chaque interaction doit générer une réponse visible : un clic change l'apparence du bouton, un formulaire envoyé affiche une confirmation, un fichier en cours de chargement montre sa progression. Sans feedback, l'utilisateur ne sait pas si le système a reçu son action. Il clique une deuxième fois. Puis une troisième.
Rendre évident ce qui est cliquable, glissable ou interactif.
L'affordance, c'est la capacité d'un élément à suggérer son usage par son apparence. Un bouton en relief invite au clic. Un texte souligné suggère un lien. Une poignée indique qu'on peut faire glisser. Quand l'affordance est absente, l'utilisateur doit deviner. Et quand il doit deviner, il se trompe.
Réduire la complexité perçue d'une interface au strict nécessaire.
La simplicité n'est pas l'absence de fonctionnalités. C'est l'art de ne montrer que ce dont l'utilisateur a besoin, au moment où il en a besoin. Chaque élément ajouté à l'écran est une décision. Chaque élément retiré aussi. La difficulté n'est pas d'ajouter, c'est de savoir quoi enlever.
Rendre un produit utilisable par le plus grand nombre, quelles que soient les capacités de l'utilisateur.
L'accessibilité n'est pas une contrainte. C'est une discipline de conception. Navigation au clavier, lecteurs d'écran, contrastes suffisants, libellés explicites sur les liens et boutons : ces pratiques bénéficient à tous. Un produit accessible est un produit mieux conçu, point.
Permettre à l'utilisateur d'annuler ses actions et d'explorer l'interface sans risque.
La peur de faire une erreur irréversible freine l'exploration. Un « Annuler » bien placé, une corbeille avant suppression définitive, un historique des modifications : ces mécanismes donnent confiance. L'utilisateur qui sait qu'il peut revenir en arrière interagit plus librement avec le produit.
Concevoir l'interface pour réduire les risques d'erreur avant qu'ils ne surviennent.
Il vaut mieux empêcher une erreur que de bien la gérer. Désactiver un bouton tant que le formulaire est incomplet, demander confirmation avant une action destructive, valider les données en temps réel plutôt qu'à la soumission : autant de décisions de design qui évitent à l'utilisateur de se retrouver dans une situation qu'il ne souhaitait pas.
Le UI ne vit pas isolé. Ces trois pages du site prolongent le sujet sous d'autres angles.
Les méthodes UX décrivent le processus qui produit les interfaces auxquelles ces concepts s'appliquent. La route d'un développeur replace CSS et responsive dans le cursus technique. Le Product Builder montre comment tout s'assemble dans un workflow réel. Le dictionnaire définit les termes croisés ici (grid, composant, spacing, hiérarchie visuelle).
Et si tu veux échanger sur un pattern ou un choix de design system, écris-moi.
Me contacter →