Le design ne se limite pas à des pixels et à des motifs. C’est aussi le rythme et les sentiments. Certains produits semblent cinématographiques car ils nous guident à travers l’incertitude, le soulagement, la confiance et le calme sans nous tirer dessus. C’est l’émotion en flux. D’autres sapent leurs propres moments avec une blague au mauvais endroit, une pop-up surprise ou une transition saccadée. C’est l’émotion en conflit. Ce ne sont pas des idées uniquement UX. Vous pouvez les voir partout dans le divertissement. Et la façon la plus claire de ressentir la différence est de comparer la façon dont l’anime gère les changements émotionnels par rapport à la façon dont les films Marvel et DC trébuchent. Nous utiliserons deux exemples spécifiques, l’un de Dan da Dan (série animée sur Netflix) et l’autre du film Superman de James Gunn, pour définir les deux concepts, puis les traduire en modèles de conception de produits pratiques que vous pouvez appliquer immédiatement. Remarque : Nous nous concentrerons sur les produits numériques, notamment les applications, le SaaS et le Web. Émotion en flux (Anime : Dan da Dan) Dans Dan da Dan, la gamme tonale est sauvage, horreur, comédie, tendresse, mais elle coule. Exemple : dans un arc, les protagonistes se lancent dans une quête bizarre et comique impliquant les « parties génitales dorées » de l'un des personnages principaux (oui, vraiment), et dans un autre, nous sommes entraînés dans l'histoire déchirante d'une mère dont l'enfant est kidnappé. Sur le papier, ce changement devrait être un accident de voiture. À l’écran, c’est cohérent et émotionnellement lisible. Pourquoi ça marche à l'écran ?
Continuité des enjeux. Même lorsqu’un gag tombe, les objectifs et le danger des personnages restent intacts. L'humour libère les tensions après une mini-résolution ; cela ne nie pas la menace. Des indices d'humeur clairs. La musique, le cadrage, le rythme et les réactions des personnages télégraphient le prochain sentiment. Vous êtes prêt pour le changement, alors vous le conduisez plutôt que de vous faire tirer dessus. Un point d’ancrage émotionnel. Les relations restent l’étoile du Nord, donc le cœur de la scène ne se perd pas lorsque le ton change.
Comment cela se traduit-il en UX ? Les bons produits font la même chose : préparer, faire la transition, résoudre, afin que les utilisateurs restent immergés à mesure que le ton émotionnel change.
Émotion en conflit (Marvel/DC : Superman de James Gunn) Lois et Clark ont une conversation sincère et intime, un moment lent et humain, tandis qu'en arrière-plan se joue un running gag (un monstre se fait tabasser avec une batte de baseball géante). Le gag détourne l'attention au moment où la scène vous demande de ressentir quelque chose de réel. Le résultat est un choc tonal qui perce l’émotion au lieu de la libérer. Pourquoi cela échoue-t-il à l'écran ?
Augmentation de la charge cognitive. Ce qui se passe ici correspond directement à la théorie de la charge cognitive. Lorsqu’une scène (ou une interface) demande aux utilisateurs de traiter simultanément deux signaux émotionnels concurrents, elle introduit une charge cognitive superflue, un effort mental qui n’a rien à voir avec la tâche ou le moment lui-même. Au lieu de se concentrer sur le rythme émotionnel, l’attention est partagée entre des signaux qui ne se résolvent pas. Dans les produits, c’est ce qui se produit lorsque l’humour, les promotions ou les changements inattendus de l’interface utilisateur s’immiscent dans des moments à enjeux élevés : les utilisateurs sont obligés d’interpréter le ton et l’intention en même temps qu’ils essaient d’agir, ce qui ralentit la compréhension et augmente le stress. Des rythmes concurrents en même temps. La blague chevauche le point culminant d'un rythme sérieux ; le public prête attention au changement plutôt qu'au sentiment. Pas de transfert tonal. Il n’y a pas de transition qui crée l’intimité avant l’arrivée de l’humour, donc le moment semble compromis plutôt que résolu.
Comment cela se traduit-il en UX ? Dans le domaine des produits, il s’agit du problème des confettis avant confirmation, de l’erreur impertinente dans un flux d’argent ou du modal promotionnel qui apparaît en plein milieu d’une tâche critique. Cela augmente également la charge cognitive : les utilisateurs doivent gérer l’humour tout en essayant de résoudre un problème, ce qui les ralentit et augmente le stress.
Définitions rapides Émotion dans FlowLes changements émotionnels semblent mérités, télégraphiés et chronométrés afin de résoudre les battements antérieurs. L'immersion tient.Emotion in ConflictUn interrupteur discordant (ou un coup dur) qui perce un rythme émotionnel en direct. Pauses en immersion.
Maintenant que nous l’avons nommé : comment cela se connecte-t-il à l’UX ? Comment les émotions façonnent la mémorisation des produits Les gens ne se souviennent pas de la moyenne d’une expérience ; ils se souviennent des sommets et de la fin. Si le pic de votre flux est la frustration ou si votre fin est désordonnée, c’est ce qui reste. Concevez donc volontairement la courbe émotionnelle. Les émotions vivent à travers trois couches (issues du design émotionnel de Don Norman), et votre produit doit les aligner :
Viscéral (intestin) : Signaux de première impression : visuels, mouvements, haptiques, sons. Exemples : Un chargeur squelette stable calme plus qu'un chargeur nerveux.fileur; un doux carillon de succès/tapotement haptique permet à la victoire d'atterrir sans crier ; un assouplissement/direction cohérent indique à l’œil ce qui a changé. Comportemental (faire) : Puis-je accomplir ma tâche en douceur ? Ici, friction signifie stress. Exemples : trois étapes de paiement claires avec des progrès prévisibles ; les états d'erreur qui expliquent ce qui s'est passé et comment récupérer ; validation en ligne au lieu d'explosions de fin de formulaire. Réfléchissant (signification) : L'histoire que je me raconte après, "Est-ce que ça en valait la peine ? Est-ce que j'ai confiance en ça ?" Exemples : Un écran de conclusion bien rangé ("Terminé. Vous aurez X d'ici vendredi.") donne la clôture ; un petit récapitulatif (« Vous avez économisé 18 € cette année ») crée une fierté sans artifice.
Les microinteractions sont le ciment émotionnel. Chacun a un déclencheur (j'appuie sur Payer), des règles (ce que fait le système), un retour (progression et résultat clair) et des boucles ou modes (que se passe-t-il si l'utilisateur réessaye). Faites-les bien et vos transitions combleront les sentiments. Si vous vous trompez, ils interrompent le flux.
La feuille de rythme émotionnelle correspond clairement aux couches d’expérience de Norman :
L’incertitude réside dans les couches viscérales et comportementales précoces, où les utilisateurs s’appuient sur des signaux sensoriels (mouvement, clarté, feedback) pour comprendre ce qui se passe. La clarté est fermement ancrée dans la couche comportementale, le moment où l’intention du système et la prochaine action de l’utilisateur se mettent en place. L'anticipation est un mélange de comportement (l'utilisateur fait quelque chose avec un but précis) et de réflexion (l'utilisateur prédit déjà le résultat et imagine ce qui va suivre). La réussite est un pic de réflexion, où l'utilisateur évalue le succès, la confiance et si l'expérience « s'est sentie bien ». Calm/Closure est principalement réflexif, aidant les utilisateurs à comprendre le sens de l'interaction et à décider si le produit est digne de confiance et mérite d'y revenir.
Dans les produits réels, cette séquence ne disparaît pas lorsque les choses tournent mal. Les erreurs, la latence et les états dégradés ne font pas exception à l’arc émotionnel : ils en font partie. Vus à travers une lentille narrative, ces moments sont les obstacles dans le voyage du héros. Un état de rétablissement bien conçu reconnaît le revers, clarifie ce qui s’est passé et guide la prochaine étape sans introduire de nouveau bruit émotionnel. Lorsque l’échec est traité comme un battement plutôt que comme une rupture, le flux émotionnel peut être préservé même en cas de stress. Exemples UX : émotion dans le flux et émotion dans le conflit Émotion en flux Paiement bien effectué (style Stripe/Apple Pay) : étapes courtes, progression claire et état de réussite précis (une coche avec une haptique douce en option). Le sommet (succès) arrive et la fin marque la clôture (réception ou étape suivante).
Statut de prise en charge (applications de covoiturage, par exemple Uber, Free Now ou Bolt) : les mises à jour progressives maintiennent l'orientation et réduisent l'anxiété (« Chauffeur arrivant », « À 2 minutes », « Arrivé »). L'incertitude se transforme en clarté, avec un mouvement doux préparant chaque transition.
Émotion en conflit Remarque : Nous ne nommons pas de produits spécifiques ici : nous respectons le travail qui les sous-tend. Au lieu de cela, nous montrons les schémas qui provoquent des conflits émotionnels et comment les résoudre exactement.
Blagues dans les moments sérieux. États d'erreur de copie effrontés pour l'argent/la santé/la sécurité. Les utilisateurs sont stressés ; l'humour amplifie l'irritation. Célébration avant résolution. Confettis, feux d'artifice ou sons forts avant confirmation. La fête interrompt le point culminant. Sauts en état dur. Modaux/promos surprises en cours de tâche, prises de contrôle en plein écran sans préparation. Cela ressemble à une coupure brusque lors d'un rythme émotionnel.
Ce que vous pouvez faire pour garantir le flux des émotions Voici une page Notion avec le modèle complet que vous pouvez dupliquer :
Modèle de feuille de rythme émotionnel.
1. Écrivez d'abord la feuille de rythme émotionnel Pour chaque flux principal (intégration, paiement, récupération), cartographiez les sentiments par étape : incertitude → clarté → anticipation → réussite → calme. Attachez une copie, un mouvement et des microinteractions à chaque battement. (Qui transporte l'émotion où ?) 2. Alignez le ton avec le risque de la tâche Créez une matrice de tons (niveau de risque × état). En cas d’erreurs à haut risque, soyez calme, clair et orienté vers les solutions. Gardez le côté ludique pour les contextes à faible risque. Extraits de modèle :
Erreur à haut risque : "Nous n'avons pas pu vérifier votre identifiant. Réessayez ou contactez l'assistance." État vide à faible risque : "Rien ici pour l'instant. Voulez-vous commencer avec un échantillon ?"
C’est là que de nombreux produits matures dérivent tranquillement vers un conflit émotionnel. Au fil du temps, les équipes ajoutent du plaisir par habitude plutôt que par intention. Une auto-vérification utile consiste à se demander : si nous supprimions tous les éléments ludiques ou festifs de cette étape, le flux semblerait-il toujours humain - ou était-ilces éléments masquant les frictions ? Une bonne conception émotionnelle clarifie l’expérience ; un bon design émotionnel n’a pas besoin de décoration pour compenser la confusion. 3. Concevoir le pic et la fin à dessein Concevez un sommet clair (le moment du succès) et une fin propre (la confirmation et ce qui se passe ensuite). Mesurez le rappel et la satisfaction aux deux points. 4. Utilisez les microinteractions comme ponts et non comme projecteurs
Préparez-vous : de petits indices de mouvement cohérents avant un changement d'état important. Confirmez : le succès s'installe subtilement, avec une sortie légèrement plus lente et une haptique légère en option. Récupération : des échecs répétés font passer gracieusement le ton d’optimiste à favorable et guident l’étape suivante.
5. Test de continuité émotionnelle Lors des sessions d'utilisabilité, ne vous contentez pas de demander « Était-ce facile ? Au lieu de cela, vous pouvez demander : « Quel sentiment a changé ici ? » Si vous entendez « confus → amusé → confus », vous avez un conflit, pas un flux. Itérez les transitions, pas seulement les écrans. Comment éviter les émotions en cas de conflit : liste de contrôle rapide Drapeaux rouges → correctifs :
Blagues dans les moments sérieux → échangez contre un langage calme et direct et un chemin de récupération clair. Célébration avant résolution → déplacer la célébration après confirmation ; atténuez-le pour les tâches à haut risque. Sauts d'état dur → transitions pré-annoncées ; garder le cadrage cohérent ; utiliser un mouvement significatif pour préserver la continuité. Dérive de ton entre les équipes → centraliser les directives vocales et tonales avec des exemples par niveau de risque et par état.
Il y a des moments où briser le flux émotionnel est intentionnel et nécessaire. Les avertissements de sécurité, les confirmations juridiques et les alertes critiques pour la sécurité bénéficient souvent de changements de ton brusques. Dans ces cas-là, la perturbation signale son importance et exige de l’attention. Le problème n’est pas le conflit émotionnel lui-même ; c’est un conflit accidentel. Lorsque les concepteurs choisissent délibérément la rupture, les utilisateurs comprennent les enjeux au lieu de ressentir un coup du lapin. Conclusion Les grandes expériences sont des expériences dirigées. Dan da Dan montre comment traverser les sentiments sans nous perdre : il prépare, transitionne et résout. La scène de Superman montre le contraire : un gag se heurtant à un battement sincère. Faites le premier. Cartographiez vos rythmes émotionnels, alignez le ton sur le risque de la tâche et laissez les micro-interactions relier les sentiments afin que les utilisateurs se souviennent du bon pic et de la bonne fin, et non du coup du lapin au milieu.
