Désormais persuadés de l'importance de cette méthode, vous vous interrogez sur les démarches à entreprendre afin de l'incorporer à vos conception. Heureusement, nous en sommes justement là.

Concevoir

A young man riding a bicycle

Comment incorporer l’Emotion dans votre Design Process ?

Quand & Comment agir ?

Selon Aaron Walter, fondateur de l’équipe UX de Mailchimp, il existe plusieurs façons pour apporter de l’émotion dans votre produit, selon vos envies et vos moyens.

DOUCEMENT MAIS SUREMENT

Faites des expériences simples dans une section de votre site et limitez-les sur une courte période.

EXEMPLE - COFFEE CUP

À l’approche de Pâques, CoffeeCup a caché des Easter Eggs sur le site, à gagner -des packs de logiciels gratuits.


Ils ont vu une augmentation de 217 % de leurs fans sur Facebook et une augmentation de 170 % de leurs abonnés Twitter. Grâce à cette expérience, ils ont pu rester en contact avec beaucoup plus de clients.

LA TOTALE

Si vous avez le temps et qu’il s’agit d’un nouveau produit, vous pouvez concevoir une stratégie de design émotionnel complète qui englobe la marque, le design et le message.

EXEMPLE - Les retraite de l'écran

Dans le cadre de mon master, nous avons créée un site proposant des retraites méditatives sur le thème des décors de films en Ecosse.

Le site est fonctionnel, fiable, utilisable, et maintenant agréable.

Il fournit des microcopies appropriées, utiles et pertinentes, des animations subtiles et des visuels cohérents. Il y a beaucoup de commentaires, une esthétique propre et pertinente avec le thème.

l'ENTRE DEUX

Entre ses deux approches on peut ajouter des couches d’améliorations sur des fondations solides, afin d’offrir une expérience enrichie aux personnes désireuses.


Une option qui peut être très utile pour calmer les appréhensions de vos clients.

EXEMPLE - MAIL CHIMP

Conscients que l'humour ne convient pas à tous, ils ont intégré une option « rabat-joie » dans les réglages de l'application permettant aux utilisateurs d'éliminer tout élément humoristique, afin de satisfaire un public plus large.

Identifier le besoin

Concevoir pour les HUMAINS

Lorsqu'on travaille en Agence et que la productivité et le rendement sont des éléments important de notre quotidien, on à parfois tendance à oublier que l'on s'adresse à des HUMAINS.

Pour fonctionner, le design émotionnel nécessite une empathie véritable, un désir sincère de comprendre et d’améliorer l’expérience de vos utilisateurs.

Dans un monde où la technologie tend à déshumaniser les interactions, le design émotionnel permet de remettre l’humain au centre des problématiques.

L'empathie

Selon Dieter Rams, célèbre designer, disait : « Le bon design, c’est rendre les choses compréhensibles ».

Et pour rendre les choses compréhensibles, il faut se mettre à la place de celui qui va les utiliser. Quel que soit votre produit ou service, vous ne vendez pas à des robots, mais à des êtres humains avec des émotions, des peurs et des désirs. Il est donc impératif de connaître vos cibles.

Pour cela, plusieurs méthodes de recherche peuvent être utilisées : les enquêtes, les entretiens ou plus simplement l’observation.

Des personas ?

L’exemple le plus connu est bien évidemment la méthode des « personas » qui permet de créer des profils fictifs de clients typiques, afin de mieux comprendre leurs motivations et leurs émotions. Les données démographiques, les analyses comportementales et les feedbacks utilisateurs sont autant d’éléments précieux pour orienter vos différents profils.

Toutefois, la création de personas étant souvent basée sur des idées à priori, il sera nécessaire d’organiser des sessions d’A/B testing pour affiner vos hypothèses.

Trouver son objectif émotionnel

Pour mettre en place votre stratégie de design émotionnel, vous devez réfléchir en amont à votre objectif émotionnel.

Par conséquent, les concepteurs de produits numériques devraient d'abord se demander :

  • Quelle histoire ce produit devrait-il raconter ?

  • Quelles émotions je veux susciter chez mes utilisateurs ? Rassurer, instruire, dédramatiser…

L'histoire et l'identité d'un produit doivent correspondre aux désirs, aux peurs, aux objectifs et aux motivations de ses utilisateurs.

Pensez à des fonctionnalités sur mesure pour vos utilisateurs, qui généreront une émotion positive lorsqu’ils les découvriront.

Construire sa personnalité

À travers notre personnalité, nous exprimons toute la palette des émotions humaines. Elles traduisent ce qui nous attire, ou au contraire ce qui nous fait fuir, chez les autres mais aussi en matière de design.

Il est nécessaire de travailler autour de la personnalité de votre produit : trouver les bons mots, le bon ton, les bons contenus… Cela permettra de transmettre les valeurs de la marque pour que l'utilisateur puisse s'identifier. Il faut donner vie à ce dernier en réveillant les sens des internautes.

C’est également essentiel pour répondre de la manière la plus appropriée aux besoins des utilisateurs.

EXEMPLE

Pensez à quelqu’un avec qui vous avez récemment discuté. Qu’est-ce qui, chez cette personne, a rendu cette conversation si intéressante ?

C’est sa personnalité qui vous a attiré, qui a guidé la discussion et vous a laissé avec un sentiment d’euphorie. Vos personnalités se sont entrecroisées avec les blagues échangées, le ton et la cadence de la conversation. Vous vous êtes senti de plus en plus en confiance, et avez établi un lien émotionnel.


Avec le Design émotionnel, on cherche à recréer cette excitation et à établir un lien avec notre public en concevant une personnalité qui sera incarnée par notre interface.

NOTA BENE

La personnalité aide les gens à comprendre qui vous êtes et influence leur façon d’interagir avec vous, tout en donnant le ton de la voix, de l’esthétique et du design de l’interaction de votre site.

EXEMPLE - LA COCCINELLE

La Coccinelle de Volkswagen est le modèle le plus vendu de toute l’histoire de l’automobile.

Son design clairement humain a contribué à son succès. Conçue pour être la « voiture du peuple ». Ses phares ronds sont des yeux et son pare-chocs esquisse un sourire. Le « visage » de la Cox exprime une attitude éternellement optimiste et sympathique qui lui a permis de plaire à plusieurs générations.

La conception

Le ton

Maintenant que vous avez établi un objectif émotionnel, vous pouvez vous pencher sur la tonalité de votre produit.

Évidement le ton ne sera pas le même pour une application bancaire que pour une interface musicale, elle va dépendre de l'émotion recherchéé.

Par conséquent, les concepteurs peuvent se demander :

  • Quel message veut-on véhiculer et comment ?

  • Quels seront les meilleurs outils pour parler au mieux à l'utilisateur ?

Adopter une bonne ligne éditoriale adéquate et adaptée à vos utilisateurs aura un effet plus positif sur la perception de la marque.

Des phrases courtes et concises

Le contenu sera mieux assimilé que les grands et longs paragraphes.

Un discours chaud et abordable

Pour créer du lien avec l'utilisateur, il est préférable que celui-ci se sente à l'aise et proche de vous.

Un ton adapté

Pour que l'utilisateur se sente privilégié, il faut chercher à rapprocher notre ton du sien au quotidien.

PINTEREST

«Woohoo, you got 10 repins last week! »

Pinterest vous félicite quand vous avez des “repins”

MAILCHIMP

« No problemo. Let’s get you a new one! »

Mailchimp vous rassure quand vous avez perdu votre mot de passe

MEMRISE

Memrise utilise le émotionnel à travers le ton employé et le storytelling employé en plaçant l’utilisateur dans la peau d’un héros

SAFE - SURFRIDER

Dans le but de motiver les étudiants à devenir bénévoles, nous avons adaptés notre ton à eux, pour qu'il soit "friendly" et motivant.


Nous avons joués sur l’humour dans les moments d'explications afin de limiter la frustration.

Humaniser

La sensation d’interagir avec de vrais humains nous rassure. Nous avons tous besoin d’authenticité et de sincérité pour avoir confiance. En humanisant, nous créons des émotions que l’utilisateur associera définitivement à notre marque.

TIPS

  • Rapprochez vous d’une tonalité parlée

  • Utilisez un langage plus naturel

EXEMPLE

Lire " Je suis éveillé" sera plus sympathique que "statut du cours : connecté", par exemple.

Nous ne sommes pas des robots, alors n'agissons pas comme tel !

EXEMPLE AIRBNB - COVID 19

L'authenticité

Les consommateurs d’aujourd’hui sont plus avertis que jamais. Ils peuvent sentir le faux à des kilomètres et ce même si l’arrivée des IA génératives peut rendre tout cela plus complexe.

Alors la clé c'est d'être honnête, vrai, soyez vous-même.

L'HUMOUR

Faire sourire les utilisateurs peut permettre de les mettre dans les meilleurs dispositions possible pour le reste de l'expérience. En utilisant l'humour grâce à des interactions positives dans le tunnel d’achat améliorera votre taux de conversion.


(attention au contexte - l’humour noir pour un sujet grave pourra par exemple sembler délicat..)

LE STORYTELLING

Tout le monde aime les histoires !


Le storytelling permet de susciter des émotions qui vont embarquer directement vos utilisateurs pour leur permettre de vivre des expérience riches et susciter de l’empathie.

La personnalisation

Comment vous sentez-vous quand quelque chose est conçu juste pour vous ? Spécial, n'est-ce pas ?

C'est la puissance d'une expérience d'intégration personnalisée.

Plutôt que d'emmener chaque utilisateur à travers un parcours utilisateur générique, pensez à ajoutez une petite touche personnelle.

EXEMPLE - NOTION

Noiton ont classés leurs utilisateurs en 2 segments. Tout, de l'image à la microcopie et même au CTA, à été pensé pour s'adapter à chacun de ses segments.

Les éléments visuels

Couleurs, polices, visuels, animations, tonalité… chaque élément d'une interface raconte une histoire à travers sa conception. Chaque pixel, chaque animation et chaque interaction avec le produit a le potentiel de lui donner vie.

Les animations

LES ANIMATIONS C'EST SUPERBE

Chaque interaction avec un produit apporte avec elle la possibilité de créer un lien émotionnel et durable entre l'utilisateur et votre produit.


Si elles ont du sens, les animations deviennent de très bons vecteurs d’émotion. L'expérience agréable restera stockée dans la mémoire de l'utilisateur et ainsi influencera ses futures actions.

Dynamique et rebondissante

=> Excitation, progressivité, énergie

Applications sportives par exemple

Léger et surprenants

=> Stimulation, créations de schémas mentaux

Applications de style de vie, app de rencontre par exemple

Tout ceci consiste à éveiller l’émotion de l’utilisateur afin qu’il expérimente au maximum une expérience agréable et mémorable.

NOTA BENE

  • Les animations ne doivent pas êtres trop longues ni trop fréquentes,

  • Il faut trouver le bon équilibre pour ne pas menacer les fonctionnalités et l’utilisabilité de l’interface.

Les Images

Les images permettent de captiver le regard et obtenir l’attention des utilisateurs.

A young man riding a bicycle
A man skating
a boat surfing

EXEMPLE LES RETRAITES DE L'ECRAN

Comme vous pouvez le voir ci-dessus, nous avons utilisés de grandes image, représentant les paysages de l'Ecosse afin d'immerger notre utilisateur dans son futur voyage.

NOTA BENE

Utiliser des images significatives aide vos utilisateurs à se plonger rapidement dans votre univers et à comprendre l’intérêt de votre site ainsi que les valeurs de votre marque. Elles doivent porter une forte charge émotionnelle pour arriver à marquer la mémoire.

EXEMPLE WETRANSFER

Au travers la présentation d’images inspirantes, Wetransfer propose un moment d’évasion et d’inspiration.

Les couleurs

Sans étonnement, l'étude de la psychologie des couleurs est cruciale en design.

Chaque teinte suscite un sentiment particulier. Par exemple, le rouge est souvent associé à l'énergie, la passion. Tandis que le bleu suscite la confiance et la tranquillité.

EXEMPLE INTERFACE MUSICALE

Comme vous le verrez ci-dessus, j'ai choisi le violet comme couleur principale pour cette interface musicale inspirant le calme. Au-delà de son intensité chromatique, le violet est lié à l'univers des songes, de la créativité et de l'évasion.

EXEMPLE

Coca-Cola, par son rouge éclatant emblématique, ambitionne de provoquer enthousiasme, dynamisme et bonheur. En revanche, IBM emploie le bleu pour véhiculer une sensation de fiabilité et d'équilibre. Quant à Apple, il opte davantage pour des teintes neutres afin de souligner l'aspect luxueux.

La Typograhie

La typographie influence notre perception d’un message. Les polices originales et modernes donnent une impression de dynamisme et d’innovation, tandis que les polices cursives et élégantes évoquent une sensation de luxe et de raffinement.

L'esthétisme

“Les choses attrayantes font du bien aux gens, et les font réfléchir de manière plus créative. En quoi cela peut-il faciliter l’utilisation d’un objet ? Tout simplement en permettant gens de trouver plus aisément des solutions aux problèmes qu’ils rencontrent.” Don Norman

Don Norma

Un beau design créer une réponse émotionnelle positive dans le cerveau, qui va ensuite aller améliorer nos capacités cognitives.

C'est ce qu'on appelle l'Aesthetic usability effect : plus un produit est attrayant et mieux nous pensons qu'il fonctionne.

TIRER PROFIT DE L'AESTHETIC USABILITY EFFECTS

  • Rendre vos interfaces attrayantes

  • Améliorer l’esthétique à travers les feedback utilisateurs

  • Ne pas compromettre l’utilisabilité d’un produit pour l’esthétique

Les moments d'enchantements

Lorsqu’on évoque l’expérience utilisateur, il est essentiel de considérer l’importance du rythme et de tenter de l'animer en intégrant des instants magiques, des aventures de divers degrés d'ambition mais suffisamment stimulantes pour susciter des réactions favorables.

La gamification, les promotions et les petites marques d’attention contribuent à créer de la satisfaction chez votre utilisateur et, par conséquent, de l'engagement.

La gamification

Les techniques de gamification peuvent nous aider à transformer une expérience, quelconque à la base, pour la rendre plaisante et engageante.

EXEMPLE DUOLINGO

Cette application est extrêmement gamifiée.

Des petits personnages interagissent pour l’utilisateur suivant leurs propres émotions, leurs propres personnalités, les voix, les gestuelles... Duolingo casse les codes d’une application d’apprentissage linguistique et cache la difficulté technique pour rendre l’interface magique et étonnante.

EXEMPLE SURF RIDER

Pour cette application nous avons utilisés la compétition via son réseau social pour gamifier l'expérience ce ses utilisateurs.

Cela permet aux utilisateurs de se fixer des objectifs, de suivre leurs progrès et de partager leurs réalisations avec leurs amis.

En créant un sentiment de compétition et de communauté, nous rendons la course plus engageante et plus agréable pour nos utilisateurs.

Les Micro-
Interactions

Les animations et intéractions sont un des principaux vecteurs d’émotions. Elles n’ont pas pour objectif d’être remarquées en tant que telles, mais permettent d’apporter de la vie dans les parcours utilisateurs et de susciter de l’étonnement positif.

EXEMPLE D'APPLE

Je parie que rien qu'en vous l'évoquant, vous pouvez ressentir la petite secousse qui se produit lorsque vous rentrez le mauvais mot de passe.

Cette micro interaction aide à se connecter profondément avec les utilisateurs en en reproduisant quelque chose qu’ils connaissent : les secousses de la tête quand quelque chose ne va pas. (oui oui)

L'effet de Surprise

Avez-vous déjà remarqué qu’il est toujours plus plaisant d’entendre sa chanson préférée à la radio que de l’écouter soi-même ?

Un moment de surprise condense des émotions en une fraction de seconde, ce qui rend notre réaction d’autant plus intense et laisse une empreinte profonde dans notre mémoire.

Nous savons que les gens qui utilisent des sites et des applications Web naviguent et traitent le contenu rapidement, et que leur attention est limitée. Introduire des surprises dans une interface peut rompre un schéma comportemental et forcer le cerveau à réévaluer la situation.

EXEMPLE - THE CHERRY ON THE CAKE

Un menu qui apparaît uniquement quand le visiteur en a besoin, un bouton de like qui se transforme une fois cliqué… autant de petits détails très simples qui font la différence.

Limiter la casse

Vous connaissez la Loi de Murphy ? Tout ce qui peut mal tourner, va mal tourner.

Lors de la durée de vie votre produit, des problèmes vont forcément arriver : serveurs en panne, erreurs humaines, imprévus..

Lorsqu'un souci se présente et que votre audience est dérangée, il se peut que les utilisateurs ressentent soudainement que le coût de l'usage de votre site dépasse les avantages. Alors autant limiter la casse.

Pas de panique !

Nous pouvons faire jouer cela en notre faveur

Un engagement émotionnel présent avant et pendant l’événement peut aider à limiter la casse.

En fait, quand vous créez une expérience mémorable, votre public aura souvent tendance à oublier les inconvénients et à ne se souvenir que des bons côtés de votre marque.

NOTA BENE

Les questionnaires, messages d'erreurs et situations vides ne doivent pas être ignorés dans votre design. C'est exactement dans ces instants que nos utilisateurs requièrent d'être guidés de manière sympathique. Alors pensez-y !

EXEMPLES 404

BURGER KING propose une page 404 humoristique, comme le reste de sa ligne éditoriale d'ailleurs.

Avouez que la touche d'humour diminue fortement la frustration ressentie.

CHROME propose ce jeu avec le dinosaure quand on ne capte plus internet. Il permet d’éviter la frustration à l’utilisateur en lui permettant de jouer.

EXEMPLE - TEMPS D'ATTENTE

Lors de cette année de master 2 j'ai pu assister à un workshop autour du Wait Design. Nous avions alors conçu une application permettant de réanchanter les temps d'attentes (donc de frustrations) des services TBM.


Notre produit s'est alors construit en répondant à ces 4 points essentiels :

  • Informer l'utilisateur sur sa condition : Indiquer à l'utilisateur combien de temps il lui reste à attendre avant le prochain tram, à l'aide d'un compteur.

  • Rassurer et guider l'utilisateur : Proposer à l'utilisateur différents trajets de substitutions en cas de problèmes.

  • Occuper l'utilisateur : Lui proposer du contenu à consommer : jeux, lecture, podcast, musique selon ses préférences.

  • Personnaliser l'expérience : Nous avons fait en sorte que toutes nos solutions soient personnalisées pour l'utilisateur en utilisant l'historique et les préférences de notre utilisateur. (trajet habituel, choix de contenu etc)

Tester

Évidement ! Que serait l'UX sans test utilisateur.

Les tests utilisateurs peuvent être une manière très efficace de mesurer l’impact émotionnel de votre design.

Vous pouvez utilisez un outil tel que Google Site Optimizer pour réaliser de l'A/B testing.

Questionnez les utilisateurs concernant leurs ressentis émotionnels lorsqu'ils interagissent avec votre produit, et exploitez leurs retours pour affiner votre conception.

Vous pouvez également enregistrer les sessions avec un logiciel comme Silverback, puis visionnez les vidéos pour évaluer l’expression faciale des utilisateurs à des instants clés.

Origine & Concept


Voir

origine & concept

Histoire, définitions et largeurs

Parlons émotions

Voir

Parlons émotions

definitions et mesures

Concevoir pour les humains


Voir

concevoir pour les humains

bonnes pratiques

Les bénéfices


Voir

Les benefices

Pourquoi c'est interessant pour nous