Guide du débutant pour l'interface utilisateur émotionnelle

Nous parlons de concevoir quelque chose qui se connecte émotionnellement à un utilisateur. Cette connexion peut être un élément clé dans l’établissement de la confiance et de la relation. C'est beaucoup plus difficile qu'il n'y paraît. Il y a tellement de choses à considérer. Les émotions sont vastes, complexes et souvent très difficiles à influencer ou à changer.

C'est ce que nous allons penser aujourd'hui. Qu'est-ce qu'une interface utilisateur émotionnelle (ou émotionnelle)? Comment créer une interface utilisateur qui évoque réellement ce lien émotionnel? Et est-ce quelque chose que vous devriez considérer plus attentivement lors de votre prochain projet de conception?

Qu'est-ce qu'une interface utilisateur émotionnelle?

Nos e-mails, textes et profils de médias sociaux donnent un aperçu du monde de l'interface utilisateur émotionnelle. Nos communications quotidiennes sont remplies de petits visages qui aident à dire aux autres exactement ce que nous ressentons.

Une interface utilisateur émotionnelle est le nouveau Saint Graal de la conception de sites Web. C'est la combinaison d'une interface hautement utilisable et qui se connecte avec des personnes à un niveau viscéral. Qu'il s'agisse de plaisir, de joie, de peur, de colère ou de tristesse, les utilisateurs ressentent toute une gamme de choses lorsqu'ils interagissent avec un bon design.

Il n'y a rien de pire qu'un design où l'utilisateur ne ressent rien. (Parce qu'ils s'en moquent.)

Il y a toute une gamme d'émotions à prendre en compte et les utilisateurs peuvent passer par plusieurs étapes au cours de l'interaction. La chose importante à retenir est que la partie émotionnelle de l'équation intervient à cause du contenu et de la conception; cela fait partie de l'histoire que vous racontez. Les émotions des utilisateurs ne doivent pas découler de l'utilisation directe du site Web ou de l'application elle-même (par exemple, frustration due à un dysfonctionnement).

Comme vous le savez, nous sommes tous assez complexes. Il peut être difficile pour les utilisateurs de vous dire exactement ce qu'ils ressentent et si les liens affectifs sont bons. Mais certaines théories peuvent vous aider.

La droite? Émotion

Sherine Kazim, directrice générale du design d'expérience chez Huge, a mis au point une roue d'émotions basée sur les émojis, inspirée de la roue de 1980 à laquelle de nombreux designers pensent aujourd'hui. La roue est une combinaison de la roue de couleur standard et ajoute des valeurs émotionnelles et des associations à chaque couleur. C'est un bon point de départ pour comprendre l'impact de la couleur sur un dessin.

Mais la dynamique actuelle a changé et la superposition d'emoji de Kazim pourrait être une interprétation plus réaliste de la situation actuelle.

Voici ce qu'elle a dit à ce sujet: «Vous pouvez voir dans le tableau qu'il y a une dissipation d'intensité qui se produit lorsque vous avancez plus loin sur la roue, et dans la conception, personne n'en parle pour le moment. Nous concevons actuellement des choses qui amènent les gens à ressentir des émotions de base, peut-être de la joie ou de la tristesse, mais nous ne discutons pas de la manière dont nous devrions ajuster l'interface utilisateur en fonction de la manière dont les émotions de l'utilisateur peuvent s'intensifier ou se dissiper.

Qu'est-ce-que tout cela veut dire? Fondamentalement, les émotions sont complexes et beaucoup moins directes que celles que nous avons conçues. La plupart des concepteurs prennent ce rouge? Rage? ou? colère? association et courir avec elle. Mais ce n'est pas exactement comme ça.

Une grande partie de ce qui entre réellement dans ce lien émotionnel est également liée au reste de la conception. Une couleur seule ne peut pas le faire.

Design Emotion

Alors pensons à cette roue d'émoticônes pendant une minute. Pour les concepteurs, les plats à emporter sont bien plus qu’une infographie géniale. Le concept de roue définit presque un processus en trois parties pour réfléchir à la conception que vous attribuez à l'émotion que vous souhaitez que les utilisateurs ressentent.

Les conceptions les plus convaincantes utilisent des couleurs, des images incluant des visages et les mots appropriés comme outils émotionnels.

Couleur

Commencez par le concept de couleur que vous connaissez déjà, mais repensez au conseil de Kazim et considérez la nature intermédiaire du lien émotionnel avec les utilisateurs. La couleur seule n'est probablement pas suffisante pour établir un lien émotionnel.

La couleur est un bon cadre pour vous aider à réfléchir et à établir une connexion de base. L'association que vous avez à une couleur peut être différente de celle de l'utilisateur.

Que ressentez-vous lorsque vous regardez l'image ci-dessus? Le choix de couleurs vives est-il suffisant pour susciter une certaine émotion? Ou avez-vous des sentiments plus neutres jusqu'à ce que vous regardiez d'autres parties de la conception?

Visages

Visuellement, votre meilleure chance de créer l'émotion souhaitée est d'utiliser des visages. La meilleure façon de montrer aux utilisateurs ce qu’ils devraient ressentir est la photo de personnes montrant l’émotion que vous souhaitez exprimer.

Regardez l'image ci-dessus sur le site Web Elegant Seagulls. La photo montre un homme qui fait preuve d'une bonne surprise. Avez-vous ressenti un élancement de la même chose? Avez-vous senti le sourire sur votre visage lorsque vous avez regardé l'image?

C'est une interface utilisateur émotive efficace. Surtout si vous considérez la prochaine action que vous prenez. Avez-vous passé au suspect suivant dans la séquence juste pour voir ce qui se passerait?

Mots

Enfin, les mots et le langage sont la technique de conception qui rassemble tous les éléments. (Pensez-vous généralement que les mots sont un élément de design? Vous devriez le faire. Les mots sont tout aussi importants que les polices de caractères.)

Les mots sont ce dernier repère qui aide un utilisateur à déterminer ce que la couleur et les images signifient vraiment. (Oui, vous devez vraiment le préciser pour la plupart des utilisateurs.)

Le ton des mots peut faire comprendre à l'utilisateur que le contenu de l'interface est doux et léger ou renforcer les sentiments d'anxiété et de peur. La façon dont vous parlez à l'utilisateur, les commandes des boutons d'appel à l'action et le récit contribuent à cette émotion. Cela crée-t-il la scène que vous souhaitez?

Prenez le site de vêtements Draper James, par exemple. L'image du héros comprend un visage souriant et joyeux pour vendre une ligne de "vêtements du Sud". Les couleurs sont vives et invitantes. Maintenant, regardez le texte: "Joyeux automne, Y'all!" Il établit une corrélation émotionnelle directe avec ce que l'utilisateur est supposé ressentir lorsqu'il interagit avec ce modèle.(La plus grande question ici concerne l'auditoire. Ce type d'émotion peut-il réellement détourner certains utilisateurs? C'est à vous de décider.)

Conclusion

Bien que parler de conception sur le plan émotionnel ne soit pas nouveau, la conversation refait surface grâce aux changements technologiques. La réalité virtuelle et l'intelligence artificielle soulèvent de nombreuses questions sur l'avenir des conceptions d'interface. Devront-ils être encore plus humains pour travailler?

Avec ces concepts, les utilisateurs sont susceptibles de demander un? Réel? l'expérience et l'émotion sont une grande partie de cela. C'est le fil conducteur qui ramènera les gens à ces dispositifs et idées émergents. Préparez-vous pour un tour assez fou!