Design Graphique

Design émotionnel : définition et rôle en UX / UI

Design émotionnel : définition et rôle en UX / UI

    Le design émotionnel conçoit un site ou une application en tenant compte de ce que ressent l'utilisateur. Les modèles de Norman, Jordan et Walter, les leviers concrets en UX/UI et les limites à respecter.

    Le design émotionnel consiste à concevoir un site, une application ou un produit en tenant compte des émotions qu’il provoque, pas seulement de sa fonction. Théorisé par Don Norman, il s’appuie sur trois niveaux : l’impression immédiate (viscérale), le plaisir d’utilisation (comportemental) et le sens que le produit prend pour l’utilisateur (réflexif). En UX et en UI, il ne remplace pas l’utilisabilité : il vient après, pour transformer un outil qui marche en expérience dont on se souvient.

    Design émotionnel
    Design émotionnel

    La façon dont un utilisateur perçoit votre produit numérique, s’en sert et s’en forge une opinion ne dépend pas que de la logique de l’interface. Elle dépend aussi de ce qu’il ressent : confiance, agacement, plaisir, inquiétude. Voici les modèles qui expliquent ce mécanisme, les leviers concrets pour l’appliquer à un site ou une application, et les limites à ne pas franchir.

    Sommaire

    Qu’est-ce que le design émotionnel ?

    Le design émotionnel désigne une conception qui cherche volontairement à susciter une émotion chez l’utilisateur pour créer une expérience positive : excitation, sentiment de sécurité, fierté, amusement, calme. Au-delà de l’utilité et de la facilité d’usage de votre produit digital, les utilisateurs jugent aussi le « plaisir » de toute l’expérience. C’est ce lien émotionnel qui fait qu’on recommande une application, qu’on revient sur un site ou qu’on pardonne un petit défaut.

    Le terme a été popularisé par Donald Norman, chercheur en sciences cognitives et figure fondatrice de l’UX, dans son livre Emotional Design: Why We Love (or Hate) Everyday Things, publié chez Basic Books. Son idée centrale, souvent résumée par la formule « les objets attrayants fonctionnent mieux » : l’émotion n’est pas un bonus décoratif, elle modifie la façon dont on perçoit et utilise un produit.

    Quels sont les trois niveaux du design émotionnel selon Don Norman ?

    Norman distingue trois niveaux de traitement, qui correspondent à trois moments de la relation avec un produit.

    NiveauCe qui se joueSur un site ou une application
    ViscéralLa première impression, immédiate et inconsciente, fondée sur les sensCouleurs, typographie, images, qualité perçue dans les premières secondes
    ComportementalLe plaisir et l’efficacité pendant l’usageParcours fluides, formulaires simples, pages rapides, retours clairs à chaque action
    RéflexifLe sens que prend le produit dans la durée : image de soi, valeurs, souvenirTon de marque, engagements, fierté d’utiliser le service, envie d’en parler

    Le niveau viscéral : la première impression

    Avant de lire quoi que ce soit, le visiteur réagit à l’apparence : symétrie, proportions, contrastes, textures, couleurs, qualité des images. C’est là qu’intervient le langage visuel. Les couleurs portent des associations (le rouge attire l’attention et signale souvent une alerte, le vert évoque la validation), mais ces associations varient selon les cultures et les contextes : elles se testent plutôt qu’elles ne se décrètent. Nous détaillons ce point dans psychologie des couleurs en design graphique.

    Il en va de même des formes et des styles. Les grands partis pris graphiques (minimalisme, maximalisme, rétro, brutalisme) créent des ambiances très différentes et ne parlent pas au même public. L’enjeu est de choisir une esthétique cohérente avec ce que vous voulez faire ressentir et avec les attentes de votre cible.

    Design émotionnel guide
    Design émotionnel

    Le niveau comportemental : le plaisir d’utilisation

    Un site séduisant au premier regard mais qui ne permet pas d’accomplir sa tâche génère de la frustration, et cette émotion négative efface la bonne première impression. Le niveau comportemental, c’est la satisfaction de réussir sans effort : remplissage automatique d’une adresse, page qui s’affiche vite, menu toujours accessible, message qui confirme clairement que la commande est passée.

    Le niveau réflexif : ce que le produit dit de vous

    C’est le niveau le plus durable. Il touche à l’identité : utiliser tel service donne le sentiment d’être efficace, responsable, bien informé. Il se construit par la cohérence entre ce que la marque promet et ce que l’expérience délivre, jour après jour. Un bon travail d’identité visuelle y contribue directement.

    Quels types de plaisir un produit peut-il procurer ?

    La première version de cet article attribuait à Don Norman quatre types de plaisir. Ce modèle vient en réalité de Patrick W. Jordan, spécialiste du design de produits, dans son ouvrage Designing Pleasurable Products. Il est souvent présenté en complément des trois niveaux de Norman :

    • Physio-plaisir : ce qui passe par les sens (toucher, son, vue). Sur écran : animations fluides, sons discrets, retours haptiques sur mobile.
    • Socio-plaisir : le plaisir des relations avec les autres. Réseaux sociaux, applications collaboratives, fonctions de partage.
    • Psycho-plaisir : la satisfaction d’accomplir une tâche efficacement. Applications de productivité, outils métier, plateformes d’apprentissage.
    • Idéo-plaisir : l’adhésion à des valeurs et à une esthétique. Engagement écologique d’une marque, contenus culturels, design qui reflète une vision.

    Selon la combinaison de plaisirs que vous voulez faire ressortir, les choix d’UX et d’UI changent. Un outil de facturation vise surtout le psycho-plaisir, une application de rencontre le socio-plaisir. Dans tous les cas, ces choix doivent rester guidés par les objectifs de l’entreprise.

    Pourquoi l’utilisabilité passe-t-elle avant l’émotion ?

    Le designer Aarron Walter, auteur de Designing for Emotion, a proposé une pyramide des besoins des utilisateurs, reprise par le Nielsen Norman Group. De bas en haut : le produit doit être fonctionnel, puis fiable, puis utilisable, et seulement ensuite agréable. Comme le résume le NN/g, un produit ne peut être source de plaisir que s’il est utilisable. Une animation amusante sur un bouton qui ne marche pas agace plus qu’elle ne charme.

    Le NN/g distingue d’ailleurs deux formes de plaisir. Le plaisir « de surface » tient à des détails localisés : une animation, une microcopie drôle, une belle image. Le plaisir « profond » naît quand tous les besoins sont couverts et que l’utilisateur avance sans friction. Le second fidélise, le premier seul ne suffit pas.

    L’émotion joue pourtant un rôle réel sur la perception de l’utilisabilité. C’est l’effet esthétique-utilisabilité, observé en 1995 par Masaaki Kurosu et Kaori Kashimura au centre de design d’Hitachi : sur 26 variantes d’interface de distributeur de billets testées par 252 participants, la facilité d’utilisation perçue était davantage liée à l’esthétique qu’à l’utilisabilité réelle. Les utilisateurs pardonnent plus facilement de petits défauts à une interface qu’ils trouvent belle, mais cet effet ne masque pas les problèmes graves.

    Comment appliquer le design émotionnel à un site ou une application ?

    Soigner les moments forts et la fin du parcours

    La règle du pic et de la fin, issue des travaux de Daniel Kahneman et Barbara Fredrickson en 1993, montre qu’on se souvient d’une expérience surtout par ses moments les plus intenses et par sa conclusion. Pour un site, cela veut dire : soigner la confirmation de commande ou d’inscription, célébrer une étape franchie, et éviter de finir le parcours sur une fenêtre surgissante agressive. Les messages d’erreur sont aussi des moments forts, en négatif : un message clair et bienveillant limite les dégâts.

    Écrire avec une voix humaine

    Les petits textes d’interface (boutons, messages d’erreur, pages vides, confirmations) portent une grande part de l’émotion. « Une erreur est survenue » inquiète ; « Ce code postal ne semble pas correct, vérifiez les 5 chiffres » rassure et aide. Voir notre article sur la microcopie.

    Donner du retour à chaque action

    Un bouton qui réagit au clic, un cœur qui s’anime quand on ajoute un favori, une barre de progression pendant un envoi : ces micro-interactions confirment à l’utilisateur que le système l’a compris. Elles doivent rester brèves et utiles. Nous les détaillons dans notre guide des micro-interactions.

    Design émotionnel guide

    Utiliser l’animation et l’illustration avec mesure

    Une vidéo explicative en motion design, une mascotte, des illustrations sur mesure donnent une personnalité à un produit et rendent un sujet austère plus accessible. Elles ont aussi un coût en temps de chargement et peuvent gêner les personnes sensibles aux mouvements : respectez le réglage « réduire les animations » du système et gardez l’animation au service du message.

    Personnaliser l’expérience

    Design émotionnel guide

    Des touches personnelles donnent à l’utilisateur le sentiment d’être reconnu : message d’accueil à son nom, reprise là où il s’était arrêté, recommandations en lien avec ses usages. Les services de streaming musical ou vidéo ont fait de la recommandation personnalisée un moteur d’attachement. Pour une PME, des choses simples suffisent souvent : se souvenir des préférences, préremplir ce qui est déjà connu, adapter le contenu au type de client. Toujours dans le respect du RGPD et sans donner l’impression d’être surveillé.

    Inspirer confiance

    La confiance est une émotion à part entière, décisive pour un achat ou une prise de contact. Elle se construit avec des signaux concrets : coordonnées visibles, vrais avis clients, photos de l’équipe, politique de retour claire, paiement sécurisé identifiable. Un design soigné renforce ces signaux, il ne les remplace pas.

    Comment mesurer les émotions des utilisateurs ?

    Les théories aident, mais rien ne remplace la connaissance directe de vos utilisateurs. Plusieurs méthodes sont accessibles :

    • Les tests utilisateurs : observer des personnes réaliser une tâche en pensant à voix haute révèle les moments d’agacement, d’hésitation ou de satisfaction.
    • Les entretiens : demander à des clients de raconter leur dernière utilisation, ce qu’ils ont aimé et ce qui les a freinés.
    • Les questionnaires courts après une tâche ou un achat, avec une question ouverte.
    • Les données d’usage : abandons de formulaire, pages de sortie, cartes de chaleur. Elles montrent où ça coince, les entretiens expliquent pourquoi.

    La première version de cet article évoquait la reconnaissance faciale des émotions par l’intelligence artificielle pour adapter les interfaces. Prudence : ces technologies sont contestées scientifiquement et encadrées. Depuis le 2 février 2025, le règlement européen sur l’IA (AI Act) interdit l’utilisation de systèmes d’IA pour déduire les émotions d’une personne sur le lieu de travail et dans les établissements d’enseignement, sauf raisons médicales ou de sécurité. Pour un site ou une application grand public, les méthodes classiques restent les plus fiables et les plus respectueuses.

    Où s’arrête le design émotionnel et où commence la manipulation ?

    Jouer sur les émotions peut servir l’utilisateur ou se retourner contre lui. La frontière passe par l’intention et la transparence. Rassurer quelqu’un qui hésite à payer en ligne, c’est du design émotionnel. Afficher un faux compte à rebours ou un faux « plus que 2 en stock » pour créer une urgence artificielle, c’est une interface trompeuse (un « dark pattern »), qui abîme la confiance dès qu’elle est découverte.

    • Pas de fausse urgence ni de fausse rareté.
    • Pas de culpabilisation pour refuser une offre (« Non merci, je préfère payer plus cher »).
    • Pas de désabonnement caché ou volontairement compliqué.
    • Des émotions en accord avec la réalité de votre offre et de votre marque.

    Ce débat rejoint celui du nudge, que nous abordons dans le nudge marketing, une utilisation plutôt positive ou négative ? Si vous voulez que votre site ou votre application crée ce lien émotionnel sans y perdre en efficacité, parlons-en : contact@osmova.com ou notre formulaire de contact.

    Questions fréquentes

    Qui a inventé le design émotionnel ?

    Le concept a été popularisé par Donald Norman avec son livre Emotional Design. D’autres auteurs l’ont enrichi, notamment Patrick W. Jordan (les quatre plaisirs) et Aarron Walter (Designing for Emotion), qui l’a appliqué au web.

    Quelle différence entre design émotionnel et UX design ?

    Le design émotionnel est une dimension de l’UX. L’UX couvre l’ensemble de l’expérience (utilité, facilité, accessibilité, performance) ; le design émotionnel s’intéresse spécifiquement à ce que l’utilisateur ressent et retient.

    Le design émotionnel est-il réservé aux grandes marques ?

    Non. Une microcopie bien écrite, une confirmation de commande chaleureuse, des photos authentiques de votre équipe ou un formulaire sans friction ne demandent pas un gros budget, et ce sont souvent eux qui font la différence.

    Peut-on mesurer l’impact du design émotionnel ?

    Indirectement : taux de conversion, taux d’abandon, retours clients, taux de retour sur le site, recommandations. Les tests utilisateurs et les entretiens complètent ces chiffres en expliquant ce que ressentent les gens.

    Quels sont les trois niveaux du design émotionnel ?

    Selon Don Norman : le niveau viscéral (la première impression sensorielle), le niveau comportemental (le plaisir et l’efficacité à l’usage) et le niveau réflexif (le sens et le souvenir que laisse le produit).

    Sources

    • Emotional Design (Donald Norman), niveaux viscéral, comportemental, réflexif et quatre plaisirs de Patrick W. Jordan : Wikipedia
    • Nielsen Norman Group, « A Theory of User Delight » (pyramide d’Aarron Walter, plaisir de surface et profond) : nngroup.com
    • Nielsen Norman Group, « The Aesthetic-Usability Effect » : nngroup.com
    • Nielsen Norman Group, « The Peak-End Rule » : nngroup.com
    • Règlement européen sur l’IA, article 5 (pratiques interdites) : artificialintelligenceact.eu

    Continuez votre lecture

    Articles sur le même sujet : Web Design UI/UX Interfaces qui convertissent

    slider-1
    Design Graphique

    Slider site web : ce que c’est, ce que ça vaut, et comment bien l’utiliser

    conception web
    Design Graphique

    Conception web : les 10 meilleures pratiques pour un site efficace

    Les étapes de la conception d'un site et les dix pratiques qui font un site efficace : identité…

    couleurs-hex-1
    Design Graphique

    Code couleur HEX : définition, convertisseur et tableau de référence

    Pourquoi-le-design-de-votre-page-daccueil-est-si-important
    Design Graphique

    Page d’accueil : pourquoi son design compte et comment la réussir

    La page d'accueil doit dire en quelques secondes qui vous êtes, ce que vous proposez et quoi faire…