Design through games #1 — Le design émotionnel avec Mario Maker

A travers Design Through Games, j’ai pour ambition d’introduire des concepts et pratiques de design en montrant leur application au sein des jeux-video. On parle souvent d’app et de site web mais assez peu de jeux dans le monde du design. Pourtant c’est un domaine qui réunit presque tous les sens de l’utilisateur, ce qui entraîne des enjeux d’UX et d’UI très importants et intéressants.

Depuis quelques années, nous parlons de plus en plus de la notion de design émotionnel dans la conception de nos interfaces. Il permet divers avantages mais peut aussi être à double tranchant si mal appliqué. Nous allons ici prendre l’exemple du jeu Mario Maker 2 afin d’expliquer cette notion et d’analyser son application au mieux.

Qu’est-ce que le design émotionnel ?

Le design émotionnel est un concept pouvant être appliqué de diverses manières au cours de la conception d’un produit. Pour mieux l’expliquer, il faut d’abord le situer dans la pyramide de conception.

Où se situe ce concept —

Aaron Walter a étudié en profondeur ce concept dans son ouvrage Designing for Emotion et a proposé une version alternative à la pyramide de Maslow, plus adaptée à nos problématiques de conception. Celle-ci est composée de différentes couches permettant de créer un produit qualitatif. Elles sont apparues au fur et à mesure en suivant l’évolution des technologies (vitesse internet, devices, …).

Prenons l’exemple d’internet : au départ, on cherchait uniquement à avoir un site fonctionnel, c’est le socle commun de tout produit . Par exemple, pour un site web : une page html avec du texte et des redirections. Ils répondaient alors aux besoins psychologiques des utilisateurs pour leur contenu/features.

Puis, grâce à l’amélioration des technologies, nous avons pu faire davantage de choses telles que créer des comptes, effectuer un paiement en ligne, partager du contenu… Suite à cela, un nouveau besoin s’est développé, le besoin de sécurité, de fiabilité (première couche).

La seconde couche porte sur l’utilisabilité. Une interface doit être comprise et utilisée rapidement, on touche ici au domaine de l’UX : je dois trouver facilement comment atteindre mon objectif sur l’interface.

Enfin, la dernière couche a de plus en plus son importance, notamment pour se démarquer de la concurrence. Il s’agit du caractère agréable d’un produit. Si l’utilisable est l’équivalent du mangeable, l’agréable est celui du « délicieux ». On parle donc ici d’identité de marque, de design d’interface, d’animations…

Et la cerise sur le gâteau, la pointe ultime de notre pyramide : le design émotionnel. Son objectif : provoquer des émotions ayant un impact positif sur l’expérience utilisateur.

Le design émotionnel a plusieurs bienfaits : il nous fait sourire (image de marque) , nous permet d’utiliser plus facilement un produits (feedback particuliers, animations), facilite la mémorisation de certaines choses. (association d’une animation, un personnage, un son à une action).

De quoi est-il constitué ? —

Dans son ouvrage Emotional Design: Why we love (or hate) everyday things, Don Norman a établi les trois niveaux d’attrait envers un produit. Il s’agit ici d’émotion et c’est pourquoi le concept de design émotionnel est la clé pour répondre à ces niveaux.

• Viscéral
  Le niveau viscéral est une partie de l’émotion qu’on ne contrôle pas, qui est immédiate. Cela concerne l’aspect visuel qui permet au produit de se distinguer d’un autre par exemple. Le branding est l’un des points clé de ce niveau. L’univers de Mario quelque chose qui a marqué plusieurs générations et peut être une excellente source pour une interface. L’objectif ici est de toucher l’utilisateur dans ses sentiments et ses attaches.
• Comportemental
  C’est l’efficacité et le plaisir d’une utilisation. On s’intéresse ici à la manière dont l’utilisateur utilise un produit : comment il atteint son objectif, à quelle vitesse, avec quelle précision, avec quel nombre d’erreur. Les réponses à ces questions seront différentes en fonction de l’utilisateur et l’objectif d’un produit est de savoir s’adapter à toutes sortes de personne. Si cet objectif est atteint, n’importe quel utilisateur saura alors utiliser le produit et ressentira un sentiment d’accomplissement lorsqu’il accomplira sa tâche. Ce sentiment est très important pour créer un lien positif entre l’utilisateur et le produit.
• Réflexif
  A l’inverse du niveau viscéral, on touche ici à la pensée consciente, lorsque l’utilisateur réfléchit volontairement à propos du design d’un produit. C’est par exemple le cas lorsque l’on réfléchit à l’image que dégage un produit envers son entourage. Le niveau viscéral décide inconsciemment de ce qu’on aime tandis que le niveau réflexif réfléchi sur “ Est-ce que tout le monde pense comme moi ? Ai-je raison d’aimer ce produit ?”.

Ceci était une brève introduction au design émotionnel et je ne peux que vous conseiller les ouvrages d’Aaron Walter et de Don Norman si vous souhaitez creuser davantage. Nous allons désormais voir l’application de ce concept et ses effets sur notre exemple du jour !

L’exemple de Mario Maker —

Mario Maker est un jeu vidéo sorti sur Switch en 2019 qui nous permet de créer nos propres niveaux de Mario en 2D. Cette conception de niveau se fait directement via une interface au sein du jeu et c’est sur celle-ci que nous allons nous concentrer.

L’interface est composée de trois parties, le tout par dessus une preview en direct du niveau que l’on crée. On peut se déplacer au sein de celui -ci comme on le souhaite.

• Propriétés du niveau : la première partie, sur la gauche, permet de modifier toutes les informations sur le niveau : style graphique, jour/nuit, temps limite, condition de victoire…
• Éléments de construction : la seconde est celle du haut. Elle nous propose 12 éléments importables souvent utilisés dans notre niveau (bloc, ennemis, objets…) puis le reste est accessible via le bouton Recherche. Ce dernier ouvre un nouveau menu avec la liste complète des éléments séparés en plusieurs catégories. On trouve également un bouton de switch vers les éléments audio tout à gauche.
• Edition : enfin à droite, un menu d’édition assez classique : sauvegarde, gomme, undo, supprimer, changer de fichier.

Le menu d’édition —

Nous allons nous concentrer sur ce menu d’édition. Tout simplement car c’est celui qui est présent dans la plupart des outils et qui pourrait donc avoir un design identique à ceux que l’on a l’habitude de voir. Cependant, ce n’est pas le cas. Nous retrouvons ici quatre fonctionnalités « personnifiées » , on les associe à un personnage (ou presque) : robot, gomme avec œil, chien et fusée. (on y trouve également le bouton de menu classique)

Les avantages
Cette personnification permet de donner un kit de propriétés à une fonctionnalité : un visuel, un son, une animation, parfois même une vibration de la manette. En jouant sur les différentes perceptions de l’utilisateur (visuelle, sonore, physique), celui-ci relie toutes ces propriétés à la features facilement.
Cela permet également de jouer sur l’affect, certains personnages peuvent faire sourire les joueurs, par leur forme, leur bruitages ou autre. Ce phénomène permet lui aussi d’améliorer la mémorisation mais surtout de -rendre cela positif, de créer un souvenir, un lien avec le joueur.

Prenons l’exemple d’Undodog — Son kit : un nom, une représentation visuelle, un son, une feature. Après très peu d’utilisation, le cerveau associera le chien, son aboiement, son dessin, à la fonction de revenir en arrière (undo) et à sa touche associée sur la manette. Le cerveau apprend plus rapidement “pour revenir en arrière c’est le chien” que “pour revenir en arrière je dois appuyer sur la touche B ”.
En creusant encore plus loin on peut imaginer qu’une des cibles principales du jeu, les enfants, ne connaissent même pas le mot “undo” et son utilisation sur les logiciels classiques. Ici, on aura alors juste à expliquer à l’enfant que le chien lui permet de revenir une action en arrière, bien plus simple.

Les possibles inconvénients
Parfois ce même procédé peut rendre difficile la compréhension de la feature lorsque cela est mal produit. Dans certains cas il n’y a aucun souci car le personnage montre clairement la fonctionnalité : la gomme, la caméra. Dans d’autres cas, ce n’est pas explicite, comme pour le chien et le robot mais, on apprend alors à les associer à leur utilité assez rapidement. Là où il peut y avoir un problème, c’est lorsqu‘en plus de ne pas être explicite, il peut y avoir des contradictions entre la feature et sa représentation.

L’exemple de la fusée est le plus parlant à ce niveau. Lorsque l’on appuie dessus, un décompte de trois secondes a lieu puis la fusée décolle. Quand je suis retourné sur le jeu afin de l’analyser, plusieurs mois après ma dernière session, j’ai directement associé la fusée à un lancement/décollage et donc à la publication de mon niveau. Cependant, la véritable fonction de ce bouton est carrément à l’opposé de ma pensée : il permet de réinitialiser le niveau.

Le décompte de trois secondes permet de ne pas rendre immédiat une réinitialisation et l’animation est aussi intéressante. Malheureusement, je ne pense pas que cela justifie le choix d’un décollage de fusée pour une réinitialisation. Quand on vient de faire le tutoriel et qu’on joue régulièrement au jeu, il n’y aura bien sûr pas de mauvaise interprétation mais dans les autres situations, cela peut être handicapant.

Enfin, pour vous faire une idée, j’ai réalisé une version de l’interface sans le moindre design émotionnel. On retrouve alors une interface très classique que l’on aurait pu trouver sur n’importe quel créateur de niveau. Sans oublier que chaque feature à un bruitage spécifique dans l’original. On perd les avantages de nos personnages, on perd en compréhension sur certains boutons mais, surtout, on ne se démarque plus de la concurrence en termes d’image.

Pour aller encore plus loin —

On imagine facilement l’utilisation de l’univers du jeu au sein des interfaces mais, il existe aussi l’inverse : des personnages/objets d’interface utilisés en personnage de jeu.

On retrouve par exemple notre chien Undodog ou notre robot Coursebot nous donnant des missions bonus dans le mode histoire du jeu.
Cela permet de renforcer encore plus le lien des joueurs avec ces personnages. Ils ne s’attendaient pas à voir ces éléments d’interfaces prendre vie au sein du jeu et ça ne peut que les faire sourire. De plus, on peut facilement imaginer l’apparition de ces personnages dans de futurs jeux Mario sous forme de clin d’oeil (easter egg). Les personnes qui auront compris la référence se sentiront privilégiés car eux auront joué à Mario Maker. Cela crée alors un bon souvenir, un sentiment de satisfaction, et renforcera encore plus leur lien avec le jeu.