UI
User Interface. Éléments visuels et interactifs avec lesquels l'utilisateur interagit.
L'UI (User Interface) désigne les éléments visuels et interactifs d'un produit digital : boutons, menus, formulaires, typographie, couleurs. L'UI est au service de l'UX - un beau design qui n'est pas utilisable reste un mauvais design.
Ce qui compose une interface
Quatre couches se superposent : les fondations, couleurs, typographie, espacements ; les composants, boutons, champs, cartes ; les motifs, formulaires, navigation, tableaux ; puis les états, survol, focus, erreur, chargement, vide. La plupart des interfaces ratées oublient la dernière couche et ne montrent que le cas idéal, celui qui n’arrive presque jamais en production. Documentez ces quatre couches, sinon chaque nouvelle page réinvente ses propres règles.
UI vs UX
L’UI est ce que l’utilisateur voit et manipule, l’UX est ce qu’il vit et retient. Une interface superbe qui impose sept étapes pour payer produit une mauvaise expérience ; une interface sobre mais évidente produit l’inverse. En pratique, arbitrez toujours dans ce sens : la lisibilité et la prévisibilité passent avant l’originalité graphique. Testez la compréhension auprès d’utilisateurs réels avant de peaufiner l’esthétique.
Industrialiser avec un design system
Au-delà de quelques dizaines d’écrans, la cohérence ne tient plus sans bibliothèque partagée. Documentez chaque composant avec ses variantes, ses états et ses règles d’usage, et gardez une source unique entre design et code. Vérifiez aussi les contrastes, un ratio d’au moins 4,5 pour 1 sur le texte courant, sinon une partie de vos visiteurs décroche.
Exemple concret
Un éditeur SaaS gère 120 écrans avec 14 styles de boutons différents. Après consolidation en une bibliothèque de 6 composants, le temps d’intégration d’une nouvelle page passe de 3 jours à 1, soit environ 40 jours-homme économisés sur une année.
Termes associés
UX
User Experience. Qualité globale de l'interaction d'un utilisateur avec un produit digital.
Responsive Design
Design adaptatif s'adaptant automatiquement à toutes les tailles d'écran.
Wireframe
Maquette fil de fer. Esquisse simplifiée montrant la structure d'une page web.
User Flow
Parcours utilisateur. Chemin suivi par un utilisateur pour accomplir une tâche.
Above the Fold
Contenu visible sans scroller - zone la plus stratégique d'une page web.
UI en pratique : UX & Design
Pour aller au-delà de la définition, découvrez notre service d'optimisation UX.