"Welcome, please take your seat"
Oui, en ce moment j'essaie de désinguer ma pile de projets commencés jamais réelement finis. Je trouve que ça tue un peu la créativité et l'envie. Mauvais bait ? Ou trick cognitif pour se dire "Ok ce projet est terminé" ? Quelle est la notion de "fini" d'ailleurs ?
Coffee Talk
Coffee Talk est un visual novel, où l'on incarne le barista d'un café dans un Seattle fantastique, peuplé d'orcs, de succubes, d'elfes et bien d'autres créatures en tout genre. Le jeu adopte un style pixel art, accompagné d’une ambiance très chill. On y prête une oreille attentive aux histoires de nos clients tout en leur servant leurs commandes.
On n'est clairement pas sur un gameplay de ouf ou révolutionnaire. C'est plus une ambiance "pose ton cerveau" sans courir après le temps. Le jeu en lui même peut être fini en 4-5H.
Dans le jeu, on a 2 parties : L'histoire et le mode barista.
Le mode histoire ne présente pas de gros challenge : on peut se tromper dans les commandes, ce qui peut influencer le déroulement de l’histoire, mais il n’y a pas de véritable Game Over. Le mode barista quant à lui se décline en deux variantes : le mode libre où on fait ce qu'on veut et le mode défi où l'on doit répondre à un liste de commandes dans un temps limité.
Coffee Talk Helper
Quel est donc le projet qui découle de ce jeu ?
Certainement pas un jeu, du moins pas pour le moment — même si le visual novel m’a souvent traversé l’esprit comme projet ou moyen d’expression. Ce n’est pas encore à l’ordre du jour… mais peut-être un jour.
Ce qui découle de Coffee Talk, c’est… un guide. Vous voyez la section “Guides” sur Steam, où l’on trouve souvent des solutions pour compléter ou débloquer les succès ? On est en plein dedans. À la différence près que je n’ai jamais publié de guide, et que j’ai joué au jeu peut-être deux ans après sa sortie. Techniquement, il n’y a pas un énorme intérêt à le partager — sauf peut-être pour l’interactivité.
Petite précision : je suis plutôt team casual, fausse complétionniste. Genre, vous me mettez devant un pourcentage à compléter… si j’estime que c’est réalisable dans un temps raisonnable, il y a moyen que je m’y investisse. Pourquoi “fausse” ? Parce que typiquement, je n’irai pas explorer les fins multiples de moi-même si elles ne sont pas clairement indiquées.
Donc me voilà — en août 2023 selon mon Git — à commencer un projet d’aide à la complétion du jeu Coffee Talk. Au départ, je visais uniquement les écrans PC. Après avoir fait ma première release (datée du 31 décembre 2023), je me suis dit que le responsive aurait peut-être été une bonne idée…
Déformation professionnelle oblige : on fait des maquettes, puis on code. Côté technique, j’ai choisi Vue.js, par simple curiosité.
Le site est découpé en 4 parties :
- L’accueil : pour expliquer brièvement l’intérêt du site et lister toutes mes sources.
- Le walkthrough : qui recense toutes les commandes jour par jour, ainsi que les succès déblocables et leurs conditions.
- Les recipes : pour donner l’intégralité des combinaisons de boissons, leurs recettes et leurs caractéristiques.
- La sandbox : pour obtenir rapidement un résultat fiable à 90 % pour certaines commandes du mode barista. Dans cette section, plutôt que de fournir une suite d’ingrédients ou une recette, on demande des intensités de goût. Ce n’est pas l’élément auquel on prête le plus attention en jouant… c’est justement le moment où l’on cherche un guide.
J'ai mes 4 pages avec leurs fonctionnalités déterminées. Maintenant, il faut les designer.
Les screens suivants sont les premières maquettes que j’ai réalisées. Je ne les ai pas retouchées, soyez indulgents :)
Si on part du header : initialement, j’avais prévu une fonctionnalité pour changer de langue (français / anglais). Sur la première release, je l’ai retirée. Peut-être qu’elle reviendra dans une future version… ou juste dans les maquettes, si j’ai la flemme. Le drapeau en guise de langue, c’est pas fou. Je ne vais pas m’attarder dessus, mais ce n’est pas très inclusif.
Pour les choix de typographie, j’ai voulu rester dans le pixel. Pas très accessible ni très lisible, mais totalement dans la vibe du jeu. Tant qu’à rester dans le pixel, pas de bords arrondis : des contours bien carrés.
Concernant la partie Walkthrough, j’avais d’abord imaginé quelque chose d’un peu fancy… mais je me suis vite ravisée. J’ai eu du mal à bien définir les informations que je voulais afficher. C’est probablement l’écran qui a le plus évolué au fil du temps.
Sur la seconde capture, on peut voir que je suis repartie du calendrier, comme dans le jeu. La partie à droite du calendrier affiche des informations liées au jour sélectionné. En dessous, on trouve la section dédiée aux achievements. De la même manière, à droite, s’affichent les détails complémentaires lorsqu’on clique sur un achievement.
Comme tous les achievements ne sont pas liés à un jour précis, seuls ceux qui dépendent du jour sélectionné sont interactifs.
La partie Recipes, c’est un tableau bête et méchant. Mais avec ses 232 entrées, j’ai voulu appliquer un principe d’éco-conception avec un chargement par pagination. On verra plus tard que mes choix d’interactions pour le tri n’étaient pas des plus judicieux…
Pour la partie Sandbox, j’ai été clairement influencée par la solution de MrpabloVS, qui plaçait les inputs en haut et le résultat en bas. Sauf que, comme le montre la maquette, cette disposition ne tenait pas sur une seule ligne avec la taille d’écran minimale que j’avais définie. Du coup, comme on le voit sur la maquette suivante, je me suis orientée vers une organisation différente.
On peut aussi noter que j’ai essayé de rester fidèle à la direction artistique du jeu. Notamment en m’inspirant du tableau de bord de conception des boissons dans Coffee Talk. C’était une volonté dès le départ : garder cette esthétique pixel et minimaliste qui fait le charme du jeu.
Cela dit, comme on le verra plus loin, j’ai fait évoluer certains éléments au fil du projet. Entre contraintes techniques, lisibilité et accessibilité, il a fallu trouver un équilibre entre hommage visuel et ergonomie.
Les captures suivantes correspondent à la release effectuée fin 2023.
On peut noter que les liens ne sont pas très accessibles en termes de contraste. Sur la partie Walkthrough, je n’ai pas mis de fond, mais visuellement, on est plus dans l’esprit du menu du jeu.
Pour la section Recipes, et plus précisément le choix des intensités, j’ai fait des choix un peu étranges. Je ne voulais pas utiliser un slider à 4 points, car je craignais de ne pas avoir assez de place pour afficher toutes les informations de manière lisible.
En même temps, je n’étais pas très claire sur le fonctionnement du filtre. Est-ce que je devais inclure toutes les valeurs en dessous d’un seuil ? Ou uniquement la valeur sélectionnée parmi {not, less, regular, extra} ?
Pour cette première itération, j’ai choisi de filtrer par valeur exacte. Ce qui signifie qu’on peut, par exemple, ne sélectionner que les “not” et les “extra”. Dans la version suivante, j’ai pris d’autres décisions.
Concernant l’utilisation de checkbox pour ce filtre… je ne suis pas certaine que ce soit le choix le plus judicieux. Je pense que ça manque d’explications pour être vraiment compréhensible, et en termes d’espace, on est un peu à l’étroit.
Si vous avez des avis là-dessus, je suis preneuse ! Cela dit, ce ne sera pas forcément pris en compte pour l’itération 2, qui est déjà bien avancée.
Avant de clôturer cette première partie sur Coffee Talk, un petit retour sur la fameuse fiabilité à 90 %.
Lors de mes différentes sessions de test, il y a une ou deux commandes pour lesquelles mon outil ne fonctionne pas correctement. De mémoire, j’avais testé en anglais pour voir si le problème venait d’une traduction des niveaux d’intensité… mais visiblement, ce n’était pas ça.
Il est donc probable que l’origine du bug se trouve dans mon rétro-ingénierie des calculs d’intensité, et dans les limites que j’ai fixées pour les valeurs entre not, less, regular et extra — des valeurs allant de 0 à 8, avec ou sans inclusions selon les cas.
Fun fact, j’ai retrouvé un vieux script Python que j’avais conçu pour générer le fichier JSON contenant les 232 entrées… Parce que oui, au-delà de l’UX et de la conception du site, il a aussi fallu penser à l’architecture des données derrière. Le fichier de traduction anglais/français existe également.
Bref, une version PC qui fonctionne bien dans l’ensemble. Mais bon… même si le projet semblait terminé, six mois plus tard, les remords sur le responsive ont commencé à pointer le bout de leur nez.
Mais ça, ce sera pour l’article de la semaine prochaine — si tout va bien 😉
Commentaires
Enregistrer un commentaire