TP 7 : Concevoir l'interface et le design émotionnel d'une application

1. Objectifs

   • Fixer une direction visuelle à partir des personas et des résultats des tests
   • Construire un système visuel: couleurs par rôle aux contrastes vérifiés, échelle typographique, grille de 8 px
   • Créer une bibliothèque de composants avec leurs variantes et leurs états, puis les maquettes haute fidélité
   • Définir la personnalité de l'interface et réécrire la microcopie
   • Traiter les moments émotionnels du parcours avec des microinteractions et des états soignés
   • Mesurer l'effet émotionnel par un test, puis livrer un guide de style

1. Prérequis

   • Avoir suivi les leçons du chapitre « Le processus d'UI design et le design émotionnel » : Le processus d'UI design : étapes et bonnes pratiques, Les notions du design émotionnel, Appliquer le design émotionnel à une interface.
   • Avoir réalisé le TP 6 : Tester un prototype avec des utilisateurs, ou utiliser les wireframes corrigés et les résultats fournis dans l'archive.
   • Savoir créer des cadres, des styles et des composants dans Figma (chapitre 08).

1. Présentation du projet

   • Le prototype de CantineCampus a été testé et corrigé : les usagers réussissent leurs tâches (92 % de réussite, score SUS de 78). Mais quatre participants sur cinq le trouvent « sérieux », aucun ne le trouve « appétissant », et le message de solde insuffisant a fait peur.
   • Le directeur du restaurant vous confie la suite : donner à l'application une apparence et une personnalité qui donnent envie, rassurent et fassent gagner du temps, sans toucher à la structure validée.
   • Vous suivez le processus d'UI design, de la direction visuelle à la livraison, et vous traitez les moments émotionnels repérés pendant les tests.
   • Téléchargez l'archive du TP. Elle contient les 8 wireframes corrigés (wireframes/), les résultats émotionnels du retest, les contenus réels et les 12 messages à réécrire (contenus/), les modèles de fiche de personnalité, de guide de style et de protocole de test (modeles/), les cartes de réaction à imprimer (test/) et le classeur modeles/grille-ui.xlsx.

• Si votre propre projet a été testé au TP 6, partez de vos wireframes corrigés et de vos résultats : ceux de l'archive servent alors d'exemple.
• La couleur orange des exemples de cette page n'est qu'une solution possible: votre direction visuelle peut conduire à de tout autres choix.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Chaque partie ajoute une pièce à votre fichier Figma et à votre dossier de conception. Le classeur modeles/grille-ui.xlsx calcule les contrastes, l'échelle typographique, l'avancement des composants et des écrans, et les résultats du test émotionnel.
   • Trois règles s'appliquent : la structure testée ne bouge pas; chaque choix visuel a une règle; chaque émotion visée vient d'un constat.
   • À la fin de chaque partie, enregistrez votre travail sur GitHub : un commit par partie permet de suivre votre progression.

1. Partie 0 : préparer le travail

⏱ 15 min

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

• Dans votre dépôt ui-ux-design-bts, créez le dossier de la phase d'interface :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/06-concevoir-ui/direction projet-cantinecampus/06-concevoir-ui/maquettes projet-cantinecampus/06-concevoir-ui/test-emotionnel
git add projet-cantinecampus/06-concevoir-ui
git commit --allow-empty -m "Démarre le TP 7"
git push

• Copiez le contenu de l'archive dans 06-concevoir-ui/ et complétez l'onglet « Mode d'emploi » du classeur.
• Dans Figma, dupliquez votre fichier du TP 5 (ou importez les images de wireframes/) et créez cinq pages : 01 Direction, 02 Styles, 03 Composants, 04 Maquettes, 05 Prototype.
• Lisez contenus/resultats-test-v2.md et surlignez toutes les remarques qui concernent l'apparence ou une émotion.

📁 Dans le dossier : le lien du fichier Figma et les citations retenues.

1. Partie 1 : fixer la direction visuelle

⏱ 25 min

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

• Choisissez trois mots-clés qui décrivent l'impression que CantineCampus doit donner. Justifiez chacun par un persona ou un constat du test-v2. Ajoutez trois anti-mots: ce que l'interface ne doit pas être.
• Réalisez dans la page « 01 Direction » une planche d'inspiration de 8 à 12 références (applications, photos, textures, typographies). Sous chacune, notez ce que vous en retenez et le mot-clé qu'elle illustre.
• Reportez mots-clés et références dans l'onglet « Direction » du classeur, qui vérifie que chaque mot-clé est illustré.

📁 Dans le dossier : la planche d'inspiration (capture) et l'onglet « Direction ».

1. Partie 2 : définir les couleurs et vérifier les contrastes

⏱ 30 min

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

• Extrayez de la planche une palette et attribuez à chaque couleur un rôle: principale, principale foncée, douce, accent, texte, texte secondaire, fond, surface, succès, erreur.
• Saisissez les codes HEX dans l'onglet « Couleurs ». Le classeur calcule la luminance de chaque couleur et son contraste sur blanc et sur le fond, puis indique si elle peut servir pour du texte.
• Listez au moins huit couples texte-fond que vous utiliserez (texte sur fond, blanc sur bouton, texte d'erreur…) : le classeur donne le verdict pour chacun. Corrigez jusqu'à ce que tous soient conformes.
• Créez les styles de couleur dans la page « 02 Styles » de Figma, nommés par rôle.

📁 Dans le dossier : l'onglet « Couleurs » et la capture de la page « 02 Styles ».

1. Partie 3 : fixer la typographie et la grille

⏱ 25 min

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

• Choisissez une police lisible sur mobile, cohérente avec vos mots-clés (une seconde police est facultative). Saisissez la taille de base du corps et le rapport de l'échelle dans l'onglet « Typographie » : le classeur calcule les cinq tailles et leurs interlignes.
• Fixez les espacements: marges des écrans, espace entre deux blocs, marges des cartes, hauteur des boutons et des puces. Le classeur vérifie les multiples de 8 et les zones tactiles de 44 px.
• Créez les styles de texte dans Figma et une grille de mise en page de 8 px sur les cadres des écrans.

📁 Dans le dossier : l'onglet « Typographie » et la capture des styles de texte.

1. Partie 4 : créer les composants et leurs états

⏱ 35 min

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

• Dans la page « 03 Composants », dessinez les dix composants de l'interface avec les styles de la partie 2 et 3 : boutons, champ, carte de plat, puces de filtre et de créneau, onglet, bandeau de message, barre de titre, étiquette de régime.
• Pour chaque composant interactif, créez les variantes et tous les états utiles : normal, appuyé, focus clavier, désactivé, chargement, erreur, sélectionné.
• Complétez l'onglet « Composants » : le classeur compte les états dessinés et signale ceux qui manquent, en particulier le focus.

📁 Dans le dossier : la capture de la page « 03 Composants » et l'onglet « Composants ».

1. Partie 5 : réaliser les maquettes haute fidélité

⏱ 40 min

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

• Dans la page « 04 Maquettes », transformez les 8 wireframes en maquettes haute fidélité, uniquement avec vos composants et vos styles. Gardez l'ordre des blocs et les libellés validés au test des mots.
• Utilisez les contenus réels de contenus/contenus-ecrans.md: plats, prix, allergènes, horaires. Ajoutez des photos ou des illustrations des plats.
• Dessinez les cinq états supplémentaires : menu filtré sans résultat, paiement en cours, solde insuffisant, aucune commande, annulation impossible. Suivez l'avancement dans l'onglet « Écrans ».

📁 Dans le dossier : les captures des maquettes et des états, et l'onglet « Écrans ».

1. Partie 6 : définir la personnalité et réécrire la microcopie

⏱ 25 min

Notions mobilisées : Les notions du design émotionnel · Appliquer le design émotionnel à une interface

• Complétez modeles/fiche-personnalite.md: trois traits de personnalité, chacun avec « c'est… », « ce n'est pas… » et un exemple de phrase ; puis le ton selon la situation et le lexique (mots imposés, mots interdits).
• Réécrivez dans l'onglet « Ton » les 12 messages de contenus/messages-actuels.md. Pour chacun, choisissez le ton et indiquez s'il dit ce qui se passe et s'il propose une issue. Le classeur signale l'humour sur une situation sérieuse et les messages trop longs.
• Reportez les nouveaux textes dans les maquettes.

📁 Dans le dossier : la fiche de personnalité et l'onglet « Ton ».

1. Partie 7 : traiter les moments émotionnels

⏱ 35 min

Notions mobilisées : Les notions du design émotionnel · Appliquer le design émotionnel à une interface

• Dans l'onglet « Moments », le classeur repère les creux, le pic et la fin du parcours à partir des émotions du test-v2. Pour chaque étape, fixez l'émotion visée, le niveau (viscéral, comportemental, réflexif), le levier principal et la solution.
• Concevez au moins trois microinteractions (paiement, ajout au panier, commande prête…) et remplissez leur fiche : déclencheur, règles, retour, durée, comportement si l'usager a demandé de réduire les animations, annonce au lecteur d'écran.
• Animez-les dans le prototype Figma (animation intelligente, délais) et soignez les états d'erreur et les écrans vides dans les maquettes.

📁 Dans le dossier : l'onglet « Moments », les fiches des microinteractions et le lien du prototype.

1. Partie 8 : mener le test émotionnel

⏱ 35 min

Notions mobilisées : Appliquer le design émotionnel à une interface

• Imprimez et découpez test/cartes-reactions.pdf. Suivez modeles/protocole-test-emotionnel.md avec au moins trois participants extérieurs au projet, sur le prototype haute fidélité.
• Après chaque tâche, notez l'émotion de 1 à 5 sur l'échelle. À la fin, faites choisir 3 à 5 cartes de réaction et notez l'explication.
• Saisissez les résultats dans l'onglet « Test émotionnel ». Le classeur compare avec le test-v2, calcule la part de mots positifs, classe les mots les plus choisis et indique si vos trois traits sont perçus.

📁 Dans le dossier : l'onglet « Test émotionnel » et la synthèse des explications.

1. Partie 9 : rédiger le guide de style, livrer et présenter

⏱ 35 min

Notions mobilisées : Le processus d'UI design : étapes et bonnes pratiques · Appliquer le design émotionnel à une interface

• Corrigez les maquettes à partir du test émotionnel. Complétez modeles/guide-de-style.md: chaque valeur vient du classeur (couleurs, contrastes, échelle, espacements, composants, ton, microinteractions, accessibilité).
• Préparez la livraison: annotez les maquettes (espacements, comportements, textes alternatifs des images) et exportez les ressources utiles.
• Assemblez le dossier de conception (8 à 12 pages) et préparez une présentation de 5 minutes pour le directeur : la direction, le système, deux écrans avant / après, un moment émotionnel traité et les chiffres du test.

git add projet-cantinecampus/06-concevoir-ui
git commit -m "Ajoute les maquettes, le guide de style et le test émotionnel du TP 7"
git tag -a ui-v1 -m "Interface haute fidélité et design émotionnel"
git push
git push origin ui-v1

• Variantes pour les binômes en avance : créer un mode sombre et vérifier ses contrastes ; concevoir l'écran de la première commande avec une célébration ; ou tester les maquettes avec un lecteur d'écran simulé.
• Relisez le guide de style : un développeur doit pouvoir reproduire un écran sans vous poser de question.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie et l'étiquette ui-v1.
   • Le lien du fichier Figma (pages Direction, Styles, Composants, Maquettes, Prototype), en lecture.
   • Le guide de style, la fiche de personnalité et le classeur grille-ui.xlsx complétés.
   • Le dossier de conception (PDF, 8 à 12 pages), avec vos noms, et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Créer un mode sombre à partir des rôles de couleur et vérifier tous ses contrastes avec le classeur.
   • Organiser votre bibliothèque de composants en design system partagé (bibliothèque Figma publiée) et la documenter.
   • Comparer deux directions visuelles par un test de préférence et un test émotionnel sur le même écran.

1. Bilan

   • L'UI design suit un processus: direction visuelle, système visuel, composants, maquettes, test et livraison.
   • Un système de règles (couleurs par rôle, contrastes, échelle, grille de 8 px) rend l'interface cohérente et accessible.
   • Les composants et leurs états évitent les écarts et les oublis.
   • Le design émotionnel part des constats : personnalité, ton, microinteractions et états soignés traitent les creux, le pic et la fin du parcours.
   • L'effet émotionnel se mesure, et le guide de style transmet toutes les règles aux développeurs.

Une interface réussie ne se contente pas de fonctionner : elle donne envie de revenir.