UI

Aussi appelé : Interface utilisateur, User Interface

  • Intermédiaire
  • Transversal

Définition complète

L’UI (User Interface, interface utilisateur) désigne la couche visuelle d’un produit digital : ce que l’utilisateur voit et manipule. L’UI design est la discipline qui conçoit cette couche : choix des couleurs, typographies, espacement, hiérarchie visuelle, composants (boutons, champs, navigation), animations. Une bonne UI suit plusieurs principes : cohérence (mêmes patterns dans tout le produit, base d’un design system), hiérarchie visuelle (l’œil va d’abord vers l’important), contraste (lisibilité, accessibilité), espace blanc (respiration vs encombrement), retours visuels (le clic montre une réaction). Les outils : Figma (leader mondial), Sketch (en perte de vitesse), Adobe XD (abandonné depuis 2023), Penpot (open-source). Les design systems sont devenus standard : composants réutilisables, documentation des règles d’usage. Exemples célèbres : Material Design (Google), Human Interface Guidelines (Apple), Carbon Design (IBM), Polaris (Shopify). L’UI mobile a ses propres codes (iOS HIG, Material Android) : il faut respecter les conventions de plateforme. En 2026, les IA (Galileo AI, v0 by Vercel) génèrent des UI à partir de prompts texte. Confusion fréquente : UI et UX. UI = le visuel ; UX = l’expérience globale (recherche + parcours + visuel + émotion).

À quoi ça sert

Cas d'usage typiques

– Un éditeur SaaS B2B construit un design system Figma : 200+ composants utilisés sur 12 produits.
– Une marque DTC redessine son UI mobile pour Christmas : conversion +18 % sur mobile.
– Un cabinet de conseil livre des refontes UI à ses clients (10-30 K€ par projet).
– Une école d’ingénieurs forme aux outils UI (Figma) dès la première année design.

Mises en situation

S'approprier cette notion dans son quotidien de travail

Contexte

Une directrice marketing d'une fromagerie fermière découvre la notion de « UI » et souhaite l'appliquer à une situation concrète de son métier.

Application

Elle prend un cas réel rencontré récemment, identifie comment la notion s'y applique et formalise en quelques phrases ce que cela change dans sa pratique. Elle partage le résultat avec un collègue pour s'assurer que sa compréhension tient la route et l'intègre dans sa boîte à outils.

Résultat attendu

La notion sert de cadre commun et facilite les échanges avec les parties prenantes.