L'UI (User Interface) est l'ensemble des éléments visuels, tactiles et interactifs qu'un utilisateur manipule pour communiquer avec un système digital : écrans, boutons, icônes, typographies, animations et retours haptiques.
L'UI (User Interface) englobe la conception de l'interface graphique d'un produit numérique. Elle se distingue de l'UX (User Experience) par son focus sur la forme — ce que l'utilisateur voit et touche — là où l'UX couvre l'ensemble de l'expérience — ce que l'utilisateur ressent et fait. L'UI applique les principes de design system (palette de couleurs, typographie, spacing, composants réutilisables) pour garantir la cohérence à travers l'application. Un design system mature réduit le temps de développement de 40% et les incohérences visuelles de 80%.
L'UI, c'est la signalétique d'un métro. Les pictos (bornes de crédit, portes de sortie, escaliers) doivent être compris en 2 secondes par n'importe quel voyageur, qu'il soit parisien, japonais ou brésilien. Si le pictogramme « sortie » est ambigu, les gens se trompent de porte. L'UI fonctionne pareil : des icônes floues = clicks incorrects, frustrations, abandon.
Une interface efficace guide l'œil vers l'élément le plus important en premier. La hiérarchie visuelle utilise la taille (un titre H1 est plus grand qu'un paragraphe), la couleur (le rouge attire l'œil sur les alertes), le contraste (texte sur fond clair = lisibilité), et l'espace blanc (les éléments isolés attirent l'attention). La grille de layout (12 colonnes, gutter 24px, margin 16px mobile / 32px desktop) garantit l'alignement et la cohérence. Un utilisateur flash teste la hiérarchie en 50ms : si l'élément le plus important n'est pas immédiatement visible, le design a échoué.
Un design system centralise les composants UI (boutons, inputs, cards, modals) avec leurs états (default, hover, active, disabled, loading) et leurs spécifications (spacing, couleur, typographie). Outil : Figma avec variables et composants. Les design tokens (couleurs en variables CSS : --color-primary: #3B82F6) permettent de changer le thème entier d'un produit en modifiant 10 lignes de code. Spotify a réduit son temps de design-to-dev de 60% en adoptant un design system partagé entre les 15 équipes produit.
L'accessibilité (A11y = accessibility, 11 lettres entre a et y) garantit que le produit est utilisable par tous, y compris les 1,3 milliard de personnes en situation de handicap. Le ratio de contraste WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le texte large. Les couleurs ne doivent jamais être le seul moyen de transmettre l'information (ajouter une icône ou un texte). Les boutons doivent faire au moins 44×44px de zone cliquable pour les doigts (mobile). Le keyboard navigation (Tab pour naviguer, Enter pour valider) doit être complète. 15% de la population est daltonien — le couple rouge/vert est à éviter.
Application SaaS B2B (gestion de projet) avec un tableau de bord surchargé (42 éléments visuels). Problème : temps moyen pour trouver une action = 12 secondes, NPS = 28. Actions : (1) refonte avec grille 12 colonnes et regroupement par fonctionnalité, (2) introduction d'une sidebar navigation avec icons + labels, (3) adoption du design system corporate. Résultat : temps de localisation d'action 12s → 3s, NPS 28 → 61, conversion onboarding 34% → 58%, réduction des tickets support « où trouver X » de 67%.
| Métrique | Benchmark | Impact |
|---|---|---|
| Temps de localisation | < 3s | Design efficace |
| Task Completion Rate | > 90% | UI intuitive |
| A11y Score | 0 erreurs WCAG AA | Accessibilité |
| Design System Coverage | > 80% | Cohérence |
| Pixel Perfect Rate | > 95% | Conformité design |