Souffle coupé - Les coulisses de l’expérience
Introduction
Mon projet s'intitule Souffle coupé. Il s’agit d’une expérience interactive et immersive qui a pour objectif de retranscrire au mieux les ressentis que peuvent vivre les personnes atteintes d’anxiété, d'angoisse et de stress au cours d’une journée quotidienne.
A travers différentes étapes, l’utilisateur progresse dans une journée qui devient progressivement plus difficile à gérer. Chaque erreur, moment d’inactivité fait monter le stress et perturbe l’expérience.
Venez découvrir ce qu’il se passe derrière les apparences
Pourquoi ce sujet ?
On pourrait se demander pourquoi avoir choisi un sujet comme l'angoisse, l'anxiété et le stress, plutôt qu’un sujet plus joyeux. Simplement parce que ces problématiques font partie intégrante de ma vie. Bien évidemment, je ne suis pas directement partie sur cette idée. J'ai commencé en réalisant une liste de différents sujets qui m'intéressaient ou qui avaient un lien avec moi.
Ensuite, j’ai réfléchi pour chaque sujet à ce que je pourrais en faire comme site, pour voir lequel pourrait réellement fonctionner. C'est vrai que l'angoisse, l'anxiété et le stress m’ont tout de suite inspiré.
En le vivant moi-même, j’ai pu observer à quel point les personnes qui ne sont pas concernées peuvent ne pas réaliser ou comprendre les difficultés que cela peut engendrer au quotidien. Pourtant, dans ce genre de situation, être compris peut avoir un réel impact.
C’est vrai que j’aurais pu partir sur un site explicatif, mais comme pour beaucoup de choses dans la vie, je pense que la meilleure manière pour comprendre est de le vivre. Là, je vous l’accorde, je me suis lancé un défi de taille. Je suis consciente que tout n’est pas réalisable. Mais le but est avant tout d’essayer de faire ressentir le plus possible ce qu’on peut vivre, même un soupçon est déjà bien.
J’ai donc dû faire un gros travail de réflexion pour trouver comment représenter au mieux chaque sensation. Évidemment certaines sensations ne sont pas possibles à reproduire, mais le but est de donner un aperçu et de permettre à l’utilisateur de mieux comprendre.
Le concept
Le concept de Souffle coupé est une simulation d'une journée quotidienne divisée en plusieurs étapes. À chaque phase, différentes pensées sont mises en évidence les unes après les autres. Chaque pensée est liée à un objet présent dans la scène et au clic du bon objet, alors la pensée disparaît.
Si l’utilisateur se trompe d’objet ou reste inactif trop longtemps, la barre de stress augmente. Plus le stress monte, plus l’environnement se dégrade : le décor s’abîme, la scène devient progressivement floue et tremble, le son du battement de cœur devient de plus en plus fort.
Quand la barre de stress atteint 100%, la crise se déclenche. Durant cette étape, l’utilisateur doit réaliser une méthode de respiration permettant de calmer la fréquence respiratoire et le rythme cardiaque avant de revenir à l’étape précédente. Certaines étapes déclenchent automatiquement la crise, même sans atteindre 100% de stress.
Une fois toutes les pensées effacées, un objet est mis en évidence. En cliquant dessus, plusieurs questions s’enchaînent et attendent une réponse oui ou non. En fonction du choix, l’utilisateur est dirigé vers différentes étapes de la journée.
Après la dernière phase, un questionnement guidé se lance. Plusieurs phrases apparaissent pour amener l’utilisateur à réfléchir sur ce qu’il vient de vivre.
Parcours utilisateur
Direction Artistique
Pour la direction artistique, je voulais créer une ambiance oppressante et sombre. Pour ne pas partir uniquement sur du noir et blanc. J'ai préféré choisir une palette de couleurs dans les nuances de bleu et gris, avec un bleu foncé qui se rapproche du noir et un bleu clair qui se rapproche du blanc.
Pour les typographies, j'en ai choisi 3 différentes. La première, plus simple et lisible, utilisée en général donc pour mes navigations, l’accueil et la page en savoir plus. La deuxième utilisée pour mes pensées flottantes est plus manuscrite pour un aspect personnel et désordonné. Et la troisième utilisée pour les introductions des étapes, celle-ci est beaucoup plus imposante et a un style visuel plus marqué.
Pour les visuels, tout a été réalisé par moi-même. Les illustrations sont de simples traits, elles ont été réalisées sur Illustrator.
Développement
Pour le développement, j’ai utilisé Vite pour avoir une structure plus propre et plus facile à gérer. Au départ, j’avais commencé avec du CSS classique, mais j’ai finalement changé en cours de route pour passer au SCSS. Ça m’a permis de mieux organiser mes styles, surtout avec les imbrications et les variables.
La plus grosse partie de mon projet se passe en JavaScript. J’ai créé plusieurs fonctions pour gérer l’affichage des scènes et des navigations.
J’ai également utilisé Gsap pour les animations telles que les transitions, les pensées flottantes, les effets liés au stress et aussi pour la respiration. C’est grâce à Gsap que j’ai réussi à rendre l’expérience immersive et vivante.
Un des éléments les plus importants à développer était le système des pensées flottantes. Elles sont placées aléatoirement dans l’écran sans possibilité de le dépasser grâce à un calcul utilisant la taille de la fenêtre et la taille réelle des éléments. Elles sont ensuite animées pour se déplacer continuellement de manière aléatoire dans la scène.
Les pensées effaçables sont liées aux objets interactifs grâce à l’attribut data-objet. Et pour gérer l’ordre dans lequel elles doivent être mises en évidence, j’ai utilisé un attribut data-ordre.
Le système de stress représente également une grosse partie du développement. La barre de stress est entièrement gérée en Javascript grâce à une variable qui stock le niveau du stress et de plusieurs conditions permettant de l’augmenter quand l’utilisateur clique sur le mauvais objet, sur le décor ou reste inactif trop longtemps grâce à un timer.
Le niveau de stress influence plusieurs effets visuels et sonores. Le décor SVG change automatiquement grâce à un tableau contenant les différentes versions des décors. Du flou, du tremblement et le volume du son sont également appliqués en fonction du stress avec GSAP.
Difficultés rencontrées
Les premières difficultés ont été au niveau du design du projet. J’ai l’habitude de réaliser des designs plutôt colorés et visuellement chargés, pour ce projet c'est totalement l'inverse. J'ai donc eu du mal à ce que mon design soit abouti..
Je me suis également posé la question sur la structure du projet. Je ne savais pas s’il était plus pertinent de créer une page différente pour chaque étape ou de regrouper toute l’expérience sur une seule page avec diverses sections cachées. Finalement, après en avoir discuté avec plusieurs personnes, j’ai opté pour la deuxième solution.
Une autre difficulté importante a été le responsive, que ce soit les décors SVG ou mes animations. Pour les décors, je me suis documentée pour trouver la solution la mieux adaptée. J’ai décidé de garder la proportion de mes SVG.
Mon animation des pensées flottantes m’a donné du fil à retordre. Il fallait qu’elle bouge de manière fluide et naturelle, mais surtout qu’elle ne sorte pas de l’écran.
Et enfin, l’animation de repoussement des pensées sur l’étape crise à son deuxième passage. J’ai d’abord fait en sorte que les pensées démarrent hors de l’écran, pour ensuite y rentrer en donnant un effet d’envahissement. Et puisqu'à l’approche de la souris, les pensées partent dans le sens inverse.
Test utilisateurs
Les tests utilisateurs m’ont permis de voir que certaines mécaniques n’étaient pas assez claires. Par exemple, il manquait une explication plus détaillée sur ce que l’utilisateur doit faire pendant les différentes étapes. J’ai donc changé le texte des explications de départ avant le lancement de la première étape.
Au début, toutes les pensées étaient mises en évidence en même temps. Le problème était que l’utilisateur ne comprenait pas quel objet devait être cliqué en premier. J’ai donc fait en sorte que les pensées soient mises une par une en évidence.
J’ai également eu des problèmes de compréhension avec le système de repoussement des pensées hors de l’écran durant le deuxième passage de la crise. J’ai donc ajouté un message avant le lancement de l’étape pour clarifier le fait de devoir pousser les pensées hors de l’écran.
Conclusion
Comme tout le monde le sait maintenant, mon point fort a toujours été le design et non le code. J’avais déjà pu un peu sortir de ma zone de confort pendant mon projet de design fiction, mais ici je peux vraiment dire que je me suis dépassée. Une grande partie du projet reposait sur le JavaScript et les animations Gsap.
Je ne le dis pas souvent, mais je suis assez fière de moi et du résultat final. Ce projet m’a permis de beaucoup progresser techniquement. En découvrant Gsap, je suis maintenant capable de faire des animations plus élaborées, j’ai aussi évolué en JavaScript.
J’ai également beaucoup appris au niveau du design, j’ai dû apprendre à créer un univers basé sur des ressentis plutôt que sur l’esthétique. Cela n’a pas toujours été facile, mais j’ai vraiment aimé expérimenter plein d’idées pour voir ce qui fonctionnait le mieux.