UI (User Interface)

L'UI, ou interface utilisateur, désigne la partie visible et manipulable d'un produit numérique : couleurs, typographie, boutons, icônes, champs de formulaire, et la manière dont ces éléments réagissent au survol, au clic ou à la saisie. C'est le point de contact concret entre une personne et un système.

L'analogie de la voiture aide à séparer les deux notions. L'UX, c'est le fait que le véhicule démarre, freine et vous amène à destination sans surprise. L'UI, c'est le tableau de bord : la position du levier, la lisibilité du compteur de nuit, la taille des commandes. Les deux sont indissociables mais ne relèvent pas des mêmes décisions. Une UI soignée posée sur une UX bancale donne un produit joli que personne n'utilise ; une bonne UX habillée d'une UI négligée donne un produit efficace qui n'inspire pas confiance, ce qui se paie aussi.

En quoi ça consiste

Définir un langage visuel cohérent et le décliner sur tous les écrans : échelle typographique, palette de couleurs, espacements, styles de boutons, comportement du mobile au grand écran. Le point le plus souvent oublié, ce sont les états : un bouton existe au repos, au survol, au clic, désactivé ou en chargement ; un champ existe vide, rempli ou en erreur. Ce travail se formalise dans une bibliothèque de composants réutilisables, appelée design system quand elle est documentée.

À quoi ça sert concrètement

• Crédibilité : l'apparence est le premier signal de sérieux perçu, avant même la lecture du contenu.
• Vitesse de compréhension : une hiérarchie claire et des tailles de texte confortables font gagner des secondes sur chaque page, donc des visiteurs qui restent.
• Accessibilité : un contraste suffisant et des zones tactiles assez grandes (de l'ordre de 44 à 48 pixels de côté selon les guides d'Apple et de Google) rendent le site utilisable par tous, y compris en mobilité.
• Coût de maintenance : avec des composants réutilisables, créer une nouvelle page se compte en heures au lieu de jours.

Les erreurs fréquentes

Multiplier les polices et les couleurs, ce qui donne une impression de bricolage. Reproduire l'interface d'un site admiré sans avoir son contenu ni ses moyens. Oublier les états d'erreur et de chargement, que le développeur devra improviser. Ne maquetter qu'en version bureau alors que la majorité du trafic est mobile. Enfin, choisir des gris trop clairs sur fond blanc : c'est élégant sur l'écran du designer, illisible en plein soleil.

Comment ça s'articule avec le reste du projet

L'UI se pose sur des wireframes validés : on ne discute plus de l'emplacement des blocs, on décide de leur habillage. Elle se matérialise dans un fichier Figma, puis passe au développement avec les valeurs précises (couleurs, tailles, espacements) et les images exportées. Elle ne s'arrête pas à la mise en ligne : chaque nouvelle page doit réutiliser les composants existants, faute de quoi le site se disperse.