Concevoir un Reverie plus discret : du chat à l’ensemble du produit

Si vous avez ouvert une conversation ces derniers jours, vous avez peut-être senti que quelque chose avait changé.

L’interface du chat est devenue un peu plus discrète. Les messages sont plus faciles à lire, les contrôles plus légers, et les panneaux comme les fenêtres de dialogue rivalisent moins avec la conversation elle-même. Rien n’a été déplacé vers un endroit inconnu, mais l’espace autour de vos personnages paraît plus calme.

Nous avons commencé par le chat parce que c’est là que beaucoup de personnes passent le plus de temps dans Reverie. C’était aussi le meilleur endroit pour tester la question au cœur de cette refonte : que doit-on ressentir face à une interface qui doit rester confortable pendant toute une conversation, et pas seulement produire une bonne première impression ?

Ce que vous avez vu n’était pas un rafraîchissement isolé. C’était la première partie visible d’un nouveau système de design, désormais étendu à tout le produit : de la découverte et des pages de personnages aux outils de création, aux histoires, aux paiements, aux récompenses, aux réglages et aux petits écrans utilitaires qui les relient.

Reverie a toujours été un produit expressif.

Cette personnalité se retrouvait partout : bordures marquées, ombres visibles, cartes superposées, contrôles colorés et surfaces pensées comme des objets plutôt que comme de simples rectangles à l’écran. Cela donnait de la chaleur au produit et le rendait immédiatement reconnaissable.

Mais un langage visuel adapté à une étape d’un produit peut devenir trop lourd pour la suivante.

À mesure que Reverie grandissait, l’interface devait accompagner bien plus que la découverte. Les utilisateurs passaient plus de temps dans leurs conversations, géraient des personnages, écrivaient des histoires, comparaient des offres, configuraient des outils avancés et naviguaient dans des parcours toujours plus complexes. Les mêmes détails décoratifs qui donnent du caractère à une page de présentation peuvent devenir du bruit visuel lorsqu’ils se répètent dans chaque fenêtre, carte, menu et bouton.

Nous n’avons donc pas repensé Reverie pour le rendre moins distinctif. Nous l’avons fait pour que sa singularité vienne de l’expérience elle-même.

Une interface plus légère, pas plus froide

« Léger » devient facilement synonyme de fonds blancs, de texte gris trop fin et de composants si discrets que tout semble inachevé. Ce n’était pas notre objectif.

Le nouveau système est plus calme, mais il reste chaleureux.

Nous avons remplacé le blanc éclatant par des surfaces neutres légèrement teintées. Le texte est plus sombre et un peu plus affirmé lorsqu’il doit être lu longtemps. Les bordures sont plus retenues, les ombres moins profondes et la couleur employée avec davantage d’intention. Le résultat pèse moins visuellement sans perdre l’impression que Reverie est un lieu consacré aux histoires et aux relations.

Cet équilibre compte particulièrement dans le roleplay. Une conversation n’est pas un tableau de réglages. On y lit de longs messages, on remarque de subtils changements de ton et on reste souvent longtemps sur la même vue. La typographie et la couleur de fond doivent rester agréables après vingt minutes, pas seulement être élégantes sur une capture d’écran.

Une typographie faite pour les lectures longues

L’un des changements les plus importants est aussi l’un des moins spectaculaires : nous avons renforcé la hiérarchie typographique.

Les grands titres restent expressifs, mais le corps du texte possède désormais une présence plus assurée. Les libellés importants, la navigation et les actions utilisent des graisses plus faciles à parcourir du regard. Le texte secondaire reste secondaire, sans devenir si pâle que sa lecture demande un effort.

Le principe est simple :

Les textes longs doivent sembler calmes et solides.
Les actions doivent être reconnaissables avant même de lire chaque libellé.
Les informations d’accompagnement doivent s’effacer sans disparaître.
Une page doit rester lisible sur différents écrans, thèmes et niveaux de lumière.

Une bonne typographie ne réclame pas l’attention. Elle aide à la maintenir.

Un même langage de composants dans tout le produit

Il ne s’agit pas d’un nouvel habillage appliqué page par page. Nous avons reconstruit le langage des composants partagés qui se trouve sous le produit.

Boutons, cartes, dialogues, menus, onglets, champs de formulaire, tableaux, infobulles, notifications, tiroirs, popovers et éléments de navigation suivent désormais les mêmes règles pour :

l’arrondi des angles
le contraste des bordures
la couleur des surfaces
l’élévation
l’indication du focus
les états de survol et d’appui
la graisse du texte
l’espacement
les couleurs sémantiques

Cette cohérence compte davantage que n’importe quel choix visuel isolé. Lorsqu’une même action se présente et se comporte de la même manière partout, l’interface demande moins d’interprétation. Une action destructive paraît destructive. Une option sélectionnée paraît sélectionnée. Une surface flottante se distingue de la page qui se trouve dessous. L’action principale est facile à trouver sans que chaque bouton tente de le devenir.

Nous avons aussi créé des variantes sémantiques plus claires pour les états mis en avant ou réussis. Elles font désormais partie du système partagé, au lieu d’être des dégradés et couleurs recréés séparément dans chaque fonctionnalité.

Le plus difficile : retrouver les exceptions

Mettre à jour le composant Button ne met pas automatiquement à jour tous les boutons.

Avec le temps, un produit accumule des décisions locales : une carte tarifaire avec sa propre bordure, une fenêtre de récompense avec une lueur personnalisée, une fenêtre de partage au fond spécial, une action cachée utilisant son propre dégradé, ou une carte fonctionnelle qui recrée son comportement au survol.

Ce sont ces exceptions qui donnent souvent à une refonte une impression d’incohérence.

Notre audit ne s’est donc pas arrêté à la bibliothèque de composants. Nous avons réintégré dans le langage commun les interfaces personnalisées qui méritaient de l’être : expériences marketing, parcours de paiement, récompenses, succès, cartes de personnages et d’histoires, fenêtres de partage, contrôles de navigation, états vides, bannières et écrans utilitaires moins souvent visités.

Nous n’avons pas supprimé toutes les exceptions. Certaines interfaces ont besoin d’une identité plus forte pour communiquer la célébration, l’urgence, la rareté ou un statut. La différence est que ces moments prolongent maintenant le système au lieu de l’ignorer.

Moins de décoration, des interactions plus claires

La refonte retire de nombreux effets qui semblaient interactifs sans apporter d’information utile.

Les ombres lourdes ne sont plus présentes sur chaque carte. Les mouvements au survol sont plus retenus. Les dégradés sont réservés aux moments qui gagnent à être soulignés. Les bordures structurent la page sans enfermer chaque contenu dans une boîte supplémentaire.

Dans le même temps, les véritables états interactifs sont plus clairs :

Les options sélectionnées expriment leur état visuellement et sémantiquement.
Le focus au clavier est plus facile à suivre.
Les cartes interactives partagent un traitement cohérent au survol et au focus.
Les boutons indiquent leur hiérarchie grâce à des variantes partagées.
Les dialogues et menus se détachent du fond sans sembler étrangers au produit.

En réduisant la décoration, nous avons créé plus de place pour améliorer le retour d’action. L’interface bouge moins, mais dit davantage.

L’accessibilité fait partie du système visuel

Un système de design est incomplet s’il décrit uniquement l’apparence des composants avec une souris.

Pendant cette refonte, nous avons revu les anneaux de focus, le comportement au clavier, la sémantique de sélection, le contraste et le fonctionnement des cartes interactives. Certains contrôles indiquent désormais plus clairement aux technologies d’assistance s’ils sont activés ou sélectionnés. Les éléments d’histoire qui agissent comme des liens peuvent être atteints et ouverts au clavier. Le focus suit la même logique visuelle sur tous les contrôles partagés.

Ces changements sont volontairement discrets. L’accessibilité ne doit pas ressembler à un mode séparé ajouté au-dessus du produit. Elle doit être présente dans son comportement par défaut.

Une meilleure base pour la suite

Le résultat le plus précieux de ce travail n’est pas une couleur, un rayon ou une ombre particulière. C’est que le produit possède désormais moins de réponses concurrentes à une même question de design.

Lorsque nous créons une nouvelle fonctionnalité, nous n’avons plus à redécider de zéro l’allure d’un dialogue, la réaction d’un champ ou la représentation d’une carte sélectionnée. Le système fournit déjà ces réponses. Le travail est plus rapide et, surtout, l’expérience qui en résulte est plus prévisible.

La cohérence ne consiste pas à rendre tous les écrans identiques. Elle donne aux utilisateurs des repères stables afin que le contenu puisse changer sans que l’interface devienne inconnue.

Ce que nous espérons que vous remarquerez

Idéalement, pas grand-chose au premier regard.

Reverie devrait simplement être plus facile à lire, plus serein à parcourir et plus cohérent lorsque vous passez de la découverte à la conversation, à la création et aux outils de compte. Les actions importantes devraient ressortir plus vite. Les contrôles secondaires devraient cesser de réclamer votre attention. Les longues sessions devraient être moins fatigantes visuellement.

Les personnages restent expressifs. Les histoires conservent leur atmosphère. Les moments qui méritent d’être célébrés peuvent toujours être éclatants.

L’interface sait simplement mieux quand parler — et quand se faire assez discrète pour laisser le reste compter.

Le nouveau système de design s’étend maintenant à toute l’expérience Reverie. Si un élément vous paraît nettement meilleur — ou encore déplacé —, nous serions ravis de vous lire dans notre communauté Discord.