Les notions du design émotionnel

1. Objectifs

   • Définir le design émotionnel et expliquer pourquoi les émotions comptent dans une interface
   • Distinguer les trois niveaux du design émotionnel : viscéral, comportemental, réflexif
   • Situer le plaisir dans la pyramide des besoins de l'utilisateur
   • Repérer les moments émotionnels d'un parcours et appliquer la règle pic-fin
   • Citer les leviers du design émotionnel et l'effet esthétique-utilisabilité
   • Reconnaître les usages non éthiques des émotions (interfaces trompeuses)

1. Présentation

   • Deux applications peuvent offrir les mêmes fonctions, avec la même efficacité, et pourtant l'une sera recommandée à tous et l'autre oubliée. La différence tient souvent à ce que l'on ressent en les utilisant : confiance, calme, plaisir, ou au contraire stress et agacement.
   • Le design émotionnel consiste à concevoir ces ressentis avec la même rigueur que les écrans. Cette leçon en présente les notions clés ; la suivante montre comment les appliquer.

• Nous continuons avec BiblioCampus, dont l'interface vient de recevoir son système visuel. Pour les activités, créez le dossier 10-2-design-emotionnel/ dans votre dépôt GitHub ui-ux-design-bts, et rangez les livrables du projet dans projet-cantinecampus/06-concevoir-ui/.

1. Qu'est-ce que le design émotionnel ?

   • Le design émotionnel cherche à créer, chez l'usager, des émotions adaptées à chaque moment de son parcours : de la confiance au moment de payer, du soulagement après une réservation, du calme face à une erreur.
   • Les émotions ne sont pas un supplément : elles influencent l'attention, la mémoire et la décision de revenir. Un usager stressé lit moins bien, se trompe davantage et retient surtout son stress.
   • Le but n'est pas de rendre l'interface « amusante », mais de la rendre juste: l'émotion doit servir l'usage et correspondre à la situation.

1. Les trois niveaux de Donald Norman

   • Dans Emotional Design (2004), le chercheur Donald Norman distingue trois niveaux de traitement, qui agissent à des moments différents :

• Le niveau viscéral dépend surtout de l'UI : couleurs, formes, images, qualité perçue. Il se joue en une fraction de seconde.
• Le niveau comportemental dépend surtout de l'UX : un service fluide, prévisible, qui donne le sentiment de contrôle.
• Le niveau réflexif dépend du sens : ce que le service dit de l'usager, l'histoire qu'il raconte, le souvenir qu'il laisse.

1. La pyramide des besoins de l'utilisateur

   • Aarron Walter, dans Designing for Emotion, propose une pyramide : un service doit d'abord être fonctionnel, puis fiable, puis utilisable, avant de pouvoir être agréable.

• Les étages du bas sont le fruit des chapitres précédents : recherche, définition, idéation, prototypage et tests.
• Le design émotionnel ne répare pas un service qui ne marche pas : une animation joyeuse sur une réservation qui échoue rend l'échec plus irritant.

1. Les émotions au fil du parcours

   • La carte de parcours du chapitre 05 comportait déjà une ligne d'émotions. Elle montre les creux (attente, incertitude, erreur) et les pics (réussite, découverte) :

• Selon la règle pic-fin mise en évidence par le psychologue Daniel Kahneman, on juge une expérience surtout par son moment le plus intense et par sa fin, bien plus que par sa moyenne.
• Conséquence : on concentre les efforts sur les creux (rassurer), sur les pics (célébrer avec mesure) et sur la fin du parcours (conclure positivement).

1. L'effet esthétique-utilisabilité

   • Des études (Kurosu et Kashimura, 1995) ont montré que les usagers jugent une interface plus facile à utiliser lorsqu'elle leur paraît belle, même à fonctions égales. Ils sont aussi plus tolérants face aux petits défauts.
   • C'est une force, et un piège : une belle maquette peut masquer des problèmes d'usage lors d'un test. C'est pourquoi on mesure aussi la réussite des tâches, pas seulement l'avis des participants.

1. Les leviers du design émotionnel

   • Le designer dispose de plusieurs leviers pour agir sur les émotions :

• Couleurs et formes: des tons froids et des angles arrondis apaisent ; des couleurs saturées et des formes anguleuses dynamisent.
• Images et illustrations: elles donnent un visage au service, surtout dans les écrans vides et les erreurs.
• Ton et microcopie: les petits textes de l'interface (boutons, messages, aides) transmettent une personnalité.
• Microinteractions: une petite animation qui répond à une action rassure et donne du plaisir.
• Surprise et récompense: un détail inattendu au bon moment, sans en abuser.
• Personnalisation: le prénom, les habitudes, les préférences ; à condition de respecter la vie privée.

1. Le design émotionnel et l'éthique

   • Les émotions peuvent aussi être utilisées contre l'usager. Les interfaces trompeuses (dark patterns) jouent sur la peur, la culpabilité ou la précipitation :
     • une fausse urgence : « Plus que 2 places ! » alors que c'est faux ;
     • la culpabilisation : « Non merci, je préfère payer plus cher » sur le bouton de refus ;
     • un désabonnement caché ou bien plus long que l'abonnement ;
     • des cases précochées pour accepter la publicité.
   • Ces pratiques font gagner à court terme et détruisent la confiance. Certaines sont interdites, notamment par le RGPD pour le consentement et par le règlement européen sur les services numériques (DSA) pour les interfaces des plateformes.

1. Exemple 1 : les trois niveaux sur BiblioCampus

   • Viscéral: à l'ouverture, un fond clair, un vert sapin calme et une illustration de pile de livres donnent l'impression d'un service serein.
   • Comportemental: la réservation se fait en deux touches, le bouton répond immédiatement, la date de retrait est affichée sans avoir à la chercher.
   • Réflexif: en fin de semestre, un récapitulatif « 12 livres empruntés, tous rendus à temps » donne à Yasmine le sentiment d'être une étudiante organisée.

1. Exemple 2 : un creux transformé

   • Les tests ont montré que l'attente d'un livre réservé était le pire moment du parcours : les étudiants ne savaient pas si leur demande avait été prise en compte.
   • L'équipe a ajouté un suivi en trois étapes (« Demandé, En préparation, Prêt au guichet ») et une notification lorsque le livre est prêt.
   • Au test suivant, l'émotion notée à cette étape est passée de « inquiet » à « rassuré », sans aucun effet visuel spectaculaire.

1. Activité 1 : les trois niveaux

   • Choisissez une application que vous aimez. Décrivez ce qu'elle vous fait ressentir aux niveaux viscéral, comportemental et réflexif, avec un exemple précis pour chacun.
   • Vérifier : l'exemple viscéral concerne l'apparence, le comportemental l'usage, le réflexif le souvenir ou l'image de soi.

1. Activité 2 : la pyramide

   • Pour CantineCampus, citez un élément qui rend l'application fonctionnelle, un qui la rend fiable, un qui la rend utilisable et un qui pourrait la rendre agréable.
   • Vérifier : l'élément « agréable » ne compense aucun manque des étages inférieurs.

1. Activité 3 : la courbe des émotions

   • Reprenez la carte de parcours de Sarah (CantineCampus). Tracez la courbe des émotions de la commande d'un repas, en vous appuyant sur les résultats du test du chapitre précédent. Enregistrez-la dans projet-cantinecampus/06-concevoir-ui/courbe-emotions.md.
   • Vérifier : chaque point est relié à une étape et à une observation ou une citation réelle.

1. Activité 4 : pic et fin

   • Sur votre courbe, entourez le pic, le creux le plus profond et la fin. Proposez une amélioration pour le creux et une pour la fin du parcours.
   • Vérifier : les propositions concernent d'abord l'usage (information, rassurance) avant l'apparence.

1. Activité 5 : les leviers

   • Pour chacun des six leviers, trouvez un exemple réussi dans une application existante et décrivez l'émotion qu'il crée.
   • Vérifier : chaque exemple sert l'usage ; aucun n'est purement décoratif.

1. Activité 6 : esthétique et utilisabilité

   • Comparez deux versions d'un même écran de CantineCampus : le wireframe et une maquette colorée. Demandez à trois personnes laquelle leur paraît la plus facile, puis faites-leur réaliser la même tâche sur les deux.
   • Vérifier : vous comparez l'avis et la réussite réelle ; vous expliquez l'éventuel écart par l'effet esthétique-utilisabilité.

1. Activité 7 : chasser les interfaces trompeuses

   • Trouvez trois interfaces trompeuses dans des sites ou applications que vous utilisez (réservation, achat, abonnement). Pour chacune, nommez l'émotion exploitée et proposez une version honnête.
   • Vérifier : la version honnête laisse le même choix aussi simple dans les deux sens.

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

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

git add 10-2-design-emotionnel projet-cantinecampus/06-concevoir-ui
git commit -m "Ajoute la courbe des émotions du parcours CantineCampus"
git push

• Vérifier : courbe-emotions.md s'affiche sur GitHub avec le pic, le creux et la fin repérés.

1. Erreurs fréquentes

1. À retenir

   • Le design émotionnel conçoit des émotions adaptées à chaque moment du parcours.
   • Trois niveaux : viscéral (impression), comportemental (usage), réflexif (souvenir).
   • La pyramide: fonctionnel, fiable, utilisable, puis agréable.
   • La règle pic-fin: on retient le moment le plus intense et la fin.
   • Six leviers : couleurs et formes, images, ton, microinteractions, surprise, personnalisation.
   • L'émotion sert l'usager, jamais contre lui : pas d'interfaces trompeuses.

On oublie ce qu'une application nous a fait faire ; on se souvient de ce qu'elle nous a fait ressentir.