Le processus d'UI design : étapes et bonnes pratiques

1. Objectifs

   • Situer l'UI design par rapport à l'UX design dans le processus de conception
   • Décrire les sept étapes qui mènent des wireframes testés à l'interface finale
   • Définir une direction visuelle à partir de mots-clés et d'une planche d'inspiration
   • Construire un système visuel: couleurs par rôle, échelle typographique, grille de 8 px
   • Concevoir des composants réutilisables avec leurs variantes et leurs états
   • Appliquer les bonnes pratiques d'accessibilité et préparer la livraison aux développeurs

1. Présentation

   • Les wireframes ont été testés et corrigés : on sait maintenant quoi mettre dans chaque écran et comment l'usager s'y déplace. Reste à décider à quoi l'application va ressembler : ses couleurs, ses polices, ses boutons, ses images.
   • Ce travail, c'est l'UI design (conception de l'interface utilisateur). Il ne consiste pas à « faire joli » au hasard : il suit un processus, s'appuie sur un système de règles et se vérifie, lui aussi, avec des utilisateurs. Cette leçon ouvre le chapitre consacré à l'interface et au design émotionnel.

• Nous continuons avec BiblioCampus: l'équipe habille les wireframes corrigés après les tests du chapitre précédent. Pour les activités, créez le dossier 10-1-processus-ui/ dans votre dépôt GitHub ui-ux-design-bts, et rangez les livrables du projet dans projet-cantinecampus/06-concevoir-ui/.

1. UX design et UI design

   • L'UX design s'occupe de l'expérience : comprendre les usagers, définir le problème, imaginer les solutions, organiser les écrans, tester. L'UI design s'occupe de la surface : l'apparence de chaque élément et l'impression qu'elle donne.
   • Les deux sont liés : une belle interface sur une structure confuse reste confuse, et une bonne structure mal habillée paraît peu fiable. La règle de ce chapitre : l'UI habille une structure testée. Si un choix visuel oblige à modifier la structure, on refait un petit test.

1. Les sept étapes du processus

   • Le passage des wireframes à l'interface finale suit sept étapes :

• Les étapes 3 et 4 forment le design system (système de conception) : l'ensemble des règles et des composants qui garantissent que tous les écrans se ressemblent.
• Le processus n'est pas strictement linéaire : les maquettes révèlent souvent un composant manquant, et le test peut faire revenir sur une couleur ou un mot.

1. Étape 2 : fixer une direction visuelle

   • Avant de choisir la moindre couleur, l'équipe se met d'accord sur l'impression à donner. Elle la résume en trois mots-clés tirés des personas et de la promesse de valeur, puis rassemble une planche d'inspiration (moodboard) : images, couleurs, textures et interfaces qui traduisent ces mots.

• Écrire aussi ce que l'interface n'est pas évite les malentendus : « studieux » ne veut pas dire « austère ».
• La planche d'inspiration n'est pas copiée : elle sert à se mettre d'accord, puis à extraire une palette et un style de typographie.

1. Étape 3 : construire le système visuel

   • Le système visuel transforme la direction en règles précises, que tout le monde peut appliquer :

• Couleurs par rôle: chaque couleur a une fonction (action, texte, fond, succès, erreur). On ne choisit pas « du vert » mais « la couleur de succès ». Une couleur d'accent reste rare pour garder sa force.
• Contraste: un texte doit atteindre un rapport de contraste d'au moins 4,5 : 1 avec son fond (3 : 1 pour un grand texte ou une icône), selon les règles d'accessibilité WCAG. L'orange #f59e0b sur blanc n'atteint que 2,1 : 1 : il sert de fond ou de décor, jamais de couleur de texte.
• Typographie: une ou deux familles de polices, une échelle de quatre à six tailles avec un rapport régulier, une taille de corps d'au moins 16 px sur mobile, un interligne d'environ 1,5.
• Espacements: tous les espacements sont des multiples de 8 px (4 px pour les petits ajustements). Les écrans paraissent ordonnés et les développeurs savent quelle valeur utiliser.
• Icônes: une seule famille, un même style (trait ou plein), toujours accompagnées d'un libellé quand leur sens n'est pas évident.

1. Étape 4 : créer les composants

   • Un composant est un élément d'interface dessiné une seule fois et réutilisé partout : bouton, champ, carte, barre de navigation. Chaque composant a des variantes (principal, secondaire) et des états (normal, survol, focus, actif, désactivé, erreur, chargement) :

• Oublier un état, c'est laisser le développeur l'inventer : le focus clavier et l'état désactivé sont les plus souvent oubliés.
• Dans Figma, on crée des composants avec des variantes et des styles de couleur et de texte : modifier le composant principal met à jour tous les écrans.

1. Étapes 5 à 7 : maquettes, test et livraison

   • Maquettes haute fidélité: chaque wireframe corrigé devient un écran final, construit uniquement avec les composants et les styles. On dessine aussi les états : écran vide, chargement, erreur, succès, texte très long.
   • Prototype et test: les maquettes sont reliées en prototype et testées à nouveau. On vérifie que l'habillage n'a pas gêné l'usage (un bouton devenu moins visible, une information perdue) et qu'il donne l'impression voulue.
   • Livraison (handoff) : l'équipe fournit un guide de style, la bibliothèque de composants, les maquettes annotées (espacements, comportements, textes alternatifs) et les ressources exportées.

1. Les bonnes pratiques

   • Six règles s'appliquent à tous les écrans :
     • Cohérence: un même élément a toujours la même apparence et le même comportement.
     • Hiérarchie: un seul bouton principal par écran ; la taille, la graisse et la couleur guident le regard.
     • Lisibilité: contraste suffisant, texte de 16 px au moins, lignes pas trop longues.
     • Couleur jamais seule: un état est aussi indiqué par un texte ou une icône.
     • Zones tactiles: au moins 44 × 44 px pour tout ce que l'on touche du doigt.
     • Sobriété: chaque élément décoratif doit servir l'impression voulue ou la compréhension.

1. Exemple 1 : de la direction au système de BiblioCampus

   • Les mots-clés « serein, studieux, rapide » ont conduit à une couleur principale vert sapin (calme, lié à l'étude), un fond très clair, beaucoup d'espace et une seule police sans-serif lisible.
   • L'équipe a vérifié chaque couple texte-fond : le vert sapin sur blanc atteint 5,5 : 1, il peut donc servir de couleur de texte pour les liens. L'orange, trop clair, a été réservé aux pastilles « Nouveau ».
   • Le bouton « Réserver » a été dessiné avec ses cinq états ; l'état désactivé affiche « Aucun exemplaire libre » au lieu d'un simple bouton grisé.

1. Exemple 2 : une maquette qui a trahi la structure

   • Sur la première maquette du détail d'un livre, le graphiste avait remplacé le texte « 2 exemplaires libres » par une simple pastille verte, jugée plus élégante.
   • Au test, Sofiane, qui utilise un lecteur d'écran, n'a reçu aucune information de disponibilité, et deux étudiants ont cru que la pastille verte signifiait « livre lu ».
   • L'équipe a rétabli le texte, ajouté une icône et inscrit la règle « jamais la couleur seule » dans le guide de style.

1. Activité 1 : UX ou UI ?

   • Classez chaque décision en UX ou en UI : a) ajouter un écran de confirmation ; b) choisir un vert pour les boutons ; c) regrouper les filtres dans un panneau ; d) arrondir les angles des cartes ; e) renommer « Transactions » en « Mes prêts » ; f) fixer la taille du corps de texte à 16 px.
   • Vérifier : a, c et e relèvent de l'UX (structure, contenu) ; b, d et f relèvent de l'UI (apparence). Le nom d'un menu touche aux deux.

1. Activité 2 : trois mots-clés

   • Pour CantineCampus, choisissez trois mots-clés de direction visuelle et justifiez chacun par un persona ou par la promesse de valeur. Ajoutez trois mots que l'interface ne doit pas évoquer. Enregistrez-les dans projet-cantinecampus/06-concevoir-ui/direction-visuelle.md.
   • Vérifier : chaque mot-clé est relié à un besoin réel ; aucun n'est vague comme « moderne » ou « joli ».

1. Activité 3 : la planche d'inspiration

   • Rassemblez 8 à 12 images (interfaces, photos, textures, couleurs) qui traduisent vos trois mots-clés. Sous chaque image, notez en une ligne ce que vous en retenez.
   • Vérifier : toutes les images vont dans le même sens ; vous savez expliquer le lien de chacune avec un mot-clé.

1. Activité 4 : la palette par rôle

   • Définissez au moins huit couleurs par rôle pour CantineCampus (principale, douce, accent, texte, texte secondaire, fond, succès, erreur). Calculez le contraste de chaque couple texte-fond avec un outil de vérification de contraste.
   • Vérifier : tous les textes atteignent 4,5 : 1 ; les couleurs qui n'y arrivent pas sont réservées aux fonds ou aux décors.

1. Activité 5 : l'échelle typographique

   • Choisissez une police et fixez cinq tailles (titre 1, titre 2, titre 3, corps, petit) avec un rapport régulier, ainsi que l'interligne du corps. Fixez aussi les espacements de la grille de 8 px.
   • Vérifier : le corps fait au moins 16 px ; chaque taille est un multiple raisonnable de la précédente.

1. Activité 6 : un composant et ses états

   • Dessinez dans Figma le bouton principal de CantineCampus avec ses états : normal, appuyé, focus, désactivé, chargement. Faites de même pour le champ de saisie (normal, actif, erreur).
   • Vérifier : le focus est visible sans la couleur ; l'état désactivé explique pourquoi l'action est impossible.

1. Activité 7 : critiquer une maquette

   • Prenez l'écran d'accueil d'une application que vous utilisez. Relevez trois respects et trois écarts aux bonnes pratiques (cohérence, hiérarchie, contraste, couleur seule, zones tactiles, sobriété).
   • Vérifier : chaque remarque cite la bonne pratique concernée et propose une correction.

1. Activité 8 : déposer votre travail sur GitHub

   • Regroupez vos réponses dans 10-1-processus-ui/README.md, puis envoyez le tout :

git add 10-1-processus-ui projet-cantinecampus/06-concevoir-ui
git commit -m "Ajoute la direction visuelle et le système de CantineCampus"
git push

• Vérifier : direction-visuelle.md s'affiche sur GitHub avec les mots-clés, la palette et l'échelle typographique.

1. Erreurs fréquentes

1. À retenir

   • L'UI design habille une structure testée ; il agit sur l'apparence et l'impression.
   • Sept étapes : partir du test, direction visuelle, système visuel, composants, maquettes, prototype et test, livraison.
   • Une direction visuelle : trois mots-clés et une planche d'inspiration.
   • Un système : couleurs par rôle, contraste d'au moins 4,5 : 1, échelle typographique, espacements multiples de 8 px.
   • Des composants dessinés une fois, avec toutes leurs variantes et tous leurs états.
   • Une livraison complète : guide de style, bibliothèque, maquettes annotées.

Une belle interface n'est pas une addition de beaux écrans : c'est un système de règles appliqué avec constance.