☕ It's coffee time !
📱 2nd run : Vers une version responsive de Coffee Talk Helper
La semaine dernière, je vous présentais la première itération de mon projet Coffee Talk Helper, un outil pensé pour accompagner les joueurs dans leur aventure. Aujourd’hui, place à la seconde version, déployée plus tôt cette semaine, avec une amélioration majeure : le responsive design.
Après réflexion, il m’a semblé essentiel d’adapter l’interface aux différents supports. Même si je joue principalement sur PC, Coffee Talk est aussi disponible sur Nintendo Switch, PlayStation et Xbox One. En prenant cela en compte, il est probable qu’un joueur veuille consulter l’outil depuis son smartphone ou sa tablette, en plein jeu ou en déplacement.
Le projet initial était conçu pour un affichage desktop. Il a donc fallu repenser l’interface pour les petits écrans, en commençant par le mobile. Comme on le sait, il est souvent plus judicieux de concevoir en mobile-first, du plus petit au plus grand format.
Mais une contrainte s’est rapidement imposée : j’ai déjà une version fonctionnelle sur grand écran, avec plusieurs fonctionnalités en place. L’objectif est donc de préserver ces fonctionnalités tout en les adaptant à un format plus compact — ce qui n’est pas toujours évident, surtout lorsqu’il s’agit de tableaux ou de contenus complexes.
Heureusement, le projet reste modeste en taille, ce qui facilite les ajustements. Le coût en temps est réel, mais les fonctionnalités sont bien définies et facilement listables.
Pour structurer ma réflexion, je suis reparti des différents écrans déjà conçus :
Home
Walkthrough
Recipes
Sandbox
On gardera Walkthrough pour la fin, car c’est celui qui demande le plus de travail en termes d’adaptation.
🏠 Page d’accueil – Design, accessibilité et choix d’interface
🎨 Accessibilité et choix de couleurs
J’en ai aussi profité pour enrichir la section crédits, puisque je n’ai pas prévu de page dédiée à cet effet.
📱 Inspirations et contraintes de design
À un moment, j’ai envisagé de m’inspirer de l’interface pixelisée du smartphone dans le jeu. Sur petite largeur, ça fonctionnait plutôt bien, mais dès qu’on dépassait un certain seuil, le rendu devenait franchement laid.
Autre souci : le mot “Walkthrough” ne rentrait pas dans l’espace prévu. Il a donc été remplacé par “Guide”, plus court et plus adapté au français. En revanche, “Sandbox” est resté tel quel — les alternatives étaient trop longues ou peu convaincantes.
🌍 Langue et navigation
J’ai complètement omis le changement de langue, principalement parce que je ne voulais pas intégrer de menu burger. J’étais focalisé sur l’idée de conserver ma navigation à 4 pages, et le clin d’œil à l’interface du jeu.
Concernant le header, il aurait été plus logique s’il avait été placé en haut. Mais cela aurait limité mes possibilités de design, notamment pour les fonds. J’ai donc opté pour une approche plus proche d’un menu d’application, même si on est sur du web. En cours de jeu, cette navigation pourrait être plus intuitive — mais c’est une hypothèse à tester.
Pour finir sur cette page d'accueil, rien de bien méchant à part positionner et afficher ou non le petit couple Lua / Bailey.
🧪 Page Sandbox – Lecture intuitive
La sandbox est la deuxième page que j’ai redesignée, principalement parce qu’elle est simple dans son fonctionnement. Elle permet d’obtenir le premier résultat de boisson en fonction de l’intensité des saveurs choisies.
🎛️ Choix des composants et contraintes d’affichage
Certaines interrogations avaient déjà été abordées lors de la première itération, notamment le choix entre sliders et toggle buttons. Cette fois, la question principale était : les libellés passent-ils en largeur ? Théoriquement oui… mais en pratique, une fois déployé, mauvaise surprise.
Pour la lecture verticale, j’ai été influencé par la solution de MrpabloVS, que j’avais évoquée la semaine dernière. J’ai pris des directions différentes sur les composants et leur interactivité, mais l’idée de lecture verticale m’a clairement inspiré.
🎨 Amélioration visuelle et cohérence graphique
J’en ai profité pour améliorer le rendu visuel des composants, qui étaient un peu trop plats à mon goût. À l’origine, le design du résultat de boisson était très proche de celui du jeu, avec un fond gris glacier. Mais à force, je trouvais que ça fatiguait les yeux.
J’ai donc retravaillé cette partie pour qu’elle soit plus cohérente avec la page Recipes, en termes de palette de couleurs et de structure visuelle. Le but étant de garder de la consistance surl'identité graphique.
📖 Page Recipes – Condensation des données et cohérence visuelle
La page Recipes est la suivante que j’ai redesignée, car elle partage plusieurs similarités avec la Sandbox. Initialement, j’avais conçu un tableau classique que j'ai gardé. J’aurais pu le retravailler afin qu'il soit davantage cohérent avec la solution sur les petits écrans. C’est probablement la page la plus chargée en code, avec des filtres dans tous les sens, mais paradoxalement, ce n’est pas celle qui m’a demandé le plus de réflexion.
📱 Adaptation mobile : compacité et lisibilité
Premier défi : passer de la version PC à la version smartphone. Il faut condenser les données sans sacrifier la lisibilité, et surtout, il n’y a pas la place pour afficher tous les filtres. J’ai donc décidé de les externaliser via un bouton qui ouvre une popup.
Pour la représentation des données, j’ai repris l’idée amorcée dans la Sandbox : plutôt que d’afficher les labels “not”, “less”, “regular” et “extra”, je voulais conserver le visuel des intensités de la machine. Problème : ça prend de la place.
Dans le jeu, on a une échelle à 8 slots repris dans la partie Sandbox. Sauf que l’intention dans Sandbox est de choisir une intensité, alors que dans Recipes, on veut la connaître.
Après un peu de rétro-ingénierie, voici les bornes que j’ai définies :
Not : 0
Less : 1 à 4
Regular : 4 à 6
Extra : 6 à 8
Pas très pratique, car on ne peut pas simplement diviser les 8 slots en 4 parties égales. Par simplicité on pourrait associé un slot à un label, mais dans ce cas là "not" aurait un slot de remplit, ce qui n'a pas forcément de sens. Finalement, j’ai opté pour un système à 3 cases dans Recipes, plus lisible et plus cohérent visuellement.
🔄 Réutilisation des composants et filtres
La suite du travail a surtout consisté à réutiliser les composants pour garantir une cohérence graphique avec les autres pages. J’ai modifié le tri par intensité dans le tableau et ajouté une représentation graphique.
Dans l’article précédent, je parlais de cases à cocher pour les filtres, qui permettaient une sélection plus souple. Par soucis de cohérence sur le fonctionnement du choix des intensités, j’ai choisi de mettre des toggle buttons ; qui impliquent un filtrage par intensité unique. Il ne me semble pas que le joueur ait besoin de filtrer par plusieurs intensités à la fois, donc ça ne devrait pas poser de problème.
📚 Page Guide – Histoire, succès et navigation multi-supports
La dernière partie concerne la page Guide, et dès le départ, j’ai eu du mal à en définir les contours. Elle regroupe à la fois l’histoire du jeu et les succès à débloquer, ce qui en fait une page hybride. Je suis parti des deux écrans du jeu correspondants, en tentant de créer une interface combinée : à gauche, un panneau de contrôle, à droite, les données associées. Mais soyons honnêtes, ça manquait de clarté et de structure… Un peu comme mon état d’esprit à ce moment-là, où je commençais à me lasser du projet.
📱 Adaptation mobile : contraintes et choix stratégiques
Sur smartphone, l’espace est limité. Impossible de repartir du travail précédent, aussi imparfait soit-il. Deux options s’offraient à moi :
Garder les deux fonctionnalités (histoire + succès) sur la même page
Scinder en deux pages distinctes, ce qui implique de repenser le menu
Finalement, j’ai choisi de conserver le calendrier, car le jeu se déroule sur une période définie de deux mois, avec une majorité des événements en septembre. Cette solution me semblait plus rapide et intuitive que de scroller une longue liste pour trouver un jour précis.
🏆 Succès et navigation contextuelle
La section Achievements est accessible via un bouton, et les détails s’affichent dans une boîte de dialogue. Pour la partie histoire, j’ai ajouté une navigation interne dans la popup, permettant de passer d’un jour à l’autre sans avoir à la fermer à chaque fois.
Même si le jeu ne propose que 24 succès, j’ai intégré un système de filtres pour les classer en 5 catégories. Les succès liés à une journée spécifique sont affichés à la suite des commandes journalières, pour une meilleure lisibilité.
🖥️ Refonte tablette et desktop
En repartant de cette logique de navigation, j’ai redesigné les maquettes pour tablette et PC. Ça ne se voit peut-être pas, mais j’ai passé pas mal de temps à trouver une navigation fluide, influencée par mes choix précédents et les références visuelles du jeu.
🧩 La réalité face aux maquettes – Derniers ajustements et passage en production
Les maquettes, c’est bien. Mais il faut ensuite coder tout ça… ou plutôt reprendre un code qu’on n’a pas touché depuis un moment. Ce n’était clairement pas la partie qui me motivait le plus, et j’avoue qu’en fin de parcours, j’ai surtout eu envie de clôturer le projet dans un état fonctionnel. C’est un projet personnel, alors je me suis permise cette approche : il fonctionne, même s’il reste quelques détails à peaufiner.
🐞 Ce qui manque (et ce qui bug)
Il reste :
La décoration des checkbox
Le dégradé pour les zones scrollables
Un peu de cohérence visuelle sur mes fameux slots
Et sûrement 2 ou 3 bugs d’affichage
Malgré les tests sur différents supports, une fois en production, on découvre des petites dingueries : des textes qui débordent, des éléments qui passent sur deux lignes, et surtout un bug de routage... J’ai été un peu rapide sur certaines parties, donc un petit refactoring ne ferait pas de mal.
⏳ Et maintenant ?
Peut-être que dans six mois, j’aurai un nouvel élan de motivation pour corriger tout ça. En attendant, je vous laisse avec cette version, et moi… je pars à l’assaut du second opus.
Le projet est disponnible à l'adresse suivante : https://coffee-talk-helper.go.yj.fr
Commentaires
Enregistrer un commentaire