Appliquer le design émotionnel à une interface

1. Objectifs

   • Repérer les moments émotionnels d'un parcours à partir de la carte de parcours et des tests
   • Définir la personnalité d'une interface en trois traits
   • Adapter le ton et la microcopie à chaque situation
   • Concevoir une microinteraction: déclencheur, règles, retour, boucles
   • Transformer les états vides, les erreurs et les confirmations en moments soignés
   • Mesurer l'effet émotionnel d'une interface avec une échelle et des cartes de réaction

1. Présentation

   • Connaître les notions du design émotionnel ne suffit pas : il faut décider, écran par écran, quelle émotion viser et par quel moyen. Sans méthode, on ajoute des animations et des blagues au hasard, et l'interface perd en cohérence.
   • Cette leçon propose une démarche en six étapes, appliquée à BiblioCampus, puis vérifiée par un test. C'est cette démarche que vous suivrez dans le TP 7.

• Nous terminons le chapitre avec BiblioCampus. Pour les activités, créez le dossier 10-3-appliquer-emotionnel/ dans votre dépôt GitHub ui-ux-design-bts, et rangez les livrables du projet dans projet-cantinecampus/06-concevoir-ui/.

1. Étape 1 : repérer les moments émotionnels

   • Partez de la courbe des émotions du parcours et des observations des tests. Listez les moments où l'émotion compte le plus :
     • les premières secondes (accueil, premier écran) ;
     • les creux: attente, incertitude, erreur, indisponibilité ;
     • les pics: réussite d'une tâche importante, découverte ;
     • la fin du parcours et les écrans vides.
   • Pour chaque moment, notez l'émotion actuelle et l'émotion visée : « inquiet » vers « rassuré », « neutre » vers « encouragé ».

1. Étape 2 : définir la personnalité de l'interface

   • Comme une personne, une interface a une personnalité: la même dans tous les écrans. On la résume en trois traits, chacun précisé par ce qu'il est et ce qu'il n'est pas :

• Les traits viennent des personas et des mots-clés de la direction visuelle : ils prolongent dans les mots ce que l'UI exprime dans les formes et les couleurs.
• La colonne « ce n'est pas » est la plus utile : elle évite qu'un trait comme « bienveillant » glisse vers l'infantilisant.

1. Étape 3 : adapter le ton et la microcopie

   • La personnalité reste stable ; le ton varie selon la situation et l'émotion de l'usager. La microcopie, ce sont les petits textes de l'interface : boutons, titres, messages, aides, états vides.

• Un bon message d'erreur dit ce qui s'est passé, ce qui est conservé et ce qu'on peut faire; il ne blâme jamais l'usager.
• Un bouton dit ce qu'il fait : « Réserver ce livre » plutôt que « Valider » ; « Garder ma réservation » plutôt que « Annuler » dans une fenêtre de confirmation ambiguë.
• L'humour se réserve aux moments sans enjeu : jamais sur une erreur de paiement, un retard ou une donnée perdue.

1. Étape 4 : concevoir les microinteractions

   • Une microinteraction est un petit moment centré sur une seule action : réserver, ajouter aux favoris, rafraîchir une liste. Dan Saffer la décrit en quatre parties :

• Une bonne microinteraction est rapide (en général entre 100 et 500 ms par animation), utile (elle confirme, guide ou fait patienter) et discrète (elle ne se répète pas au point d'agacer).
• Accessibilité: certains usagers demandent à leur système de réduire les animations (vertiges, troubles de l'attention). L'interface doit alors remplacer le mouvement par un simple changement d'état. Le résultat de l'action doit aussi être annoncé par le lecteur d'écran.

1. Étape 5 : soigner les états vides, les erreurs et les réussites

   • Ces écrans sont souvent dessinés en dernier, ou pas du tout. Ce sont pourtant des moments émotionnels forts :

• État vide: expliquer ce qui apparaîtra ici et proposer une première action.
• Erreur: rassurer, expliquer simplement, proposer une issue, garder ce que l'usager a saisi.
• Réussite: confirmer clairement et dire la suite ; une célébration (animation, illustration) seulement pour les réussites importantes et rares.

1. Étape 6 : mesurer l'effet émotionnel

   • Le design émotionnel se teste comme le reste. Trois outils simples, à utiliser à la fin de chaque tâche ou du test :
     • une échelle d'émotion de 1 à 5 (du visage triste au visage souriant) après chaque tâche ;
     • des cartes de réaction: le participant choisit 3 à 5 mots parmi une liste d'adjectifs positifs et négatifs (« rassurant », « confus », « agréable », « stressant »…), puis explique son choix ; c'est une version simplifiée de la méthode Microsoft Desirability Toolkit ;
     • l'observation: soupirs, sourires, hésitations, commentaires à voix haute.
   • On compare ensuite avec les trois traits de la personnalité : si les mots choisis correspondent, l'interface transmet bien l'impression voulue.

1. Exemple 1 : le moment « Livre prêt » de BiblioCampus

   • Moment : le livre réservé est disponible. Émotion actuelle : indifférence (simple courriel automatique). Émotion visée : soulagement et envie de passer le chercher.
   • Solution : une notification « Votre livre vous attend ! Bases de données est au guichet jusqu'à vendredi 18 h », une carte de prêt mise en avant dans « Mes prêts » avec un compte à rebours discret, et un bouton « Itinéraire jusqu'à la bibliothèque ».
   • Test : sur 5 participants, 4 ont choisi la carte « rassurant » et 3 la carte « pratique » ; aucun n'a choisi « stressant ».

1. Exemple 2 : une animation qui a desservi l'usage

   • L'équipe avait ajouté une animation de confettis de deux secondes à chaque réservation. Au premier test, les participants ont souri.
   • Au troisième livre réservé, deux participants ont dit « c'est long » et l'un a touché deux fois le bouton, croyant que rien ne se passait. Sofiane, avec son lecteur d'écran, n'a reçu aucune confirmation.
   • L'équipe a gardé une coche animée de moins d'une seconde, une annonce vocale « Livre réservé », et réservé les confettis au premier emprunt de l'année.

1. Activité 1 : les moments émotionnels

   • À partir de votre courbe des émotions de CantineCampus, listez six moments émotionnels (premier écran, creux, pics, fin, états vides). Pour chacun, notez l'émotion actuelle et l'émotion visée. Enregistrez-les dans projet-cantinecampus/06-concevoir-ui/moments-emotionnels.md.
   • Vérifier : chaque moment s'appuie sur une observation du test ou de la carte de parcours.

1. Activité 2 : la personnalité

   • Définissez la personnalité de CantineCampus en trois traits, chacun avec « c'est… », « ce n'est pas… » et un exemple de phrase.
   • Vérifier : les traits sont reliés à Sarah, Hélène ou Yanis ; la colonne « ce n'est pas » interdit un vrai risque.

1. Activité 3 : réécrire la microcopie

   • Réécrivez ces messages de CantineCampus selon votre personnalité : « Erreur 402 » ; « Commande validée » ; « Aucun élément » ; « Champ obligatoire » ; « Êtes-vous sûr ? Oui / Non ».
   • Vérifier : chaque message dit ce qui se passe et ce que l'on peut faire ; le ton est sobre pour l'erreur de paiement.

1. Activité 4 : une microinteraction

   • Décrivez la microinteraction « Ajouter au panier » de CantineCampus en quatre parties (déclencheur, règles, retour, boucles), avec la durée de chaque animation et le comportement si l'usager a demandé de réduire les animations.
   • Vérifier : l'animation dure moins d'une seconde ; le résultat est aussi annoncé sans animation.

1. Activité 5 : états vides et erreurs

   • Dessinez dans Figma, avant et après, l'écran « Mes commandes » vide et l'écran « Solde insuffisant » de CantineCampus.
   • Vérifier : chaque écran « après » contient une explication, une issue et un ton conforme à la personnalité.

1. Activité 6 : les cartes de réaction

   • Préparez 20 mots de réaction (moitié positifs, moitié négatifs) adaptés à CantineCampus. Faites tester votre prototype à trois personnes : après la tâche « commander un repas », chacune choisit trois mots et explique son choix.
   • Vérifier : vous comparez les mots choisis avec vos trois traits et notez les écarts.

1. Activité 7 : l'audit d'éthique

   • Relisez tous vos écrans et messages. Vérifiez qu'aucun ne crée de fausse urgence, ne culpabilise, ne cache un refus ou ne précoche un consentement.
   • Vérifier : chaque choix (accepter ou refuser, s'abonner ou se désabonner) demande le même effort dans les deux sens.

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

   • Regroupez vos réponses dans 10-3-appliquer-emotionnel/README.md, puis envoyez le tout :

git add 10-3-appliquer-emotionnel projet-cantinecampus/06-concevoir-ui
git commit -m "Ajoute la personnalité et les moments émotionnels de CantineCampus"
git push

• Vérifier : moments-emotionnels.md s'affiche sur GitHub avec les émotions visées et les solutions.

1. Erreurs fréquentes

1. À retenir

   • On part des moments émotionnels du parcours : premier écran, creux, pics, fin, états vides.
   • Une personnalité en trois traits, stable ; un ton qui s'adapte à la situation.
   • Une microcopie claire : ce qui se passe, ce qui est conservé, ce qu'on peut faire.
   • Des microinteractions courtes, utiles, discrètes et accessibles.
   • Des états vides, des erreurs et des réussites soignés.
   • Un effet mesuré: échelle d'émotion, cartes de réaction, observation.

Le design émotionnel réussi ne se remarque presque pas : on se sent simplement bien accompagné.