Progettare un Reverie più discreto: dalla chat all’intero prodotto

Se negli ultimi giorni hai aperto una conversazione, potresti aver notato che qualcosa sembra diverso.

L’interfaccia della chat è diventata un po’ più discreta. I messaggi sono più facili da leggere, i controlli più leggeri e pannelli e finestre di dialogo competono meno con la conversazione stessa. Nulla è stato spostato in un luogo sconosciuto, ma lo spazio intorno ai tuoi personaggi ha iniziato a sembrare più calmo.

Abbiamo cominciato dalla chat perché è il luogo in cui molte persone trascorrono più tempo su Reverie. Era anche il posto migliore per verificare la domanda alla base di questa riprogettazione: come dovrebbe apparire un’interfaccia quando deve restare confortevole per un’intera conversazione, e non soltanto creare una buona prima impressione?

Ciò che hai visto non era un aggiornamento isolato. Era la prima parte visibile di un nuovo design system, che ora abbiamo esteso all’intero prodotto: dalla scoperta e dalle pagine dei personaggi agli strumenti di creazione, alle storie, ai pagamenti, alle ricompense, alle impostazioni e alle piccole schermate di servizio che le collegano.

Reverie è sempre stato un prodotto espressivo.

Questa personalità si vedeva ovunque: bordi decisi, ombre evidenti, schede sovrapposte, controlli colorati e superfici pensate per sembrare oggetti, non semplici rettangoli su uno schermo. Dava calore al prodotto e lo rendeva immediatamente riconoscibile.

Ma un linguaggio visivo adatto a una fase del prodotto può diventare troppo pesante per quella successiva.

Con la crescita di Reverie, l’interfaccia ha dovuto sostenere molto più della scoperta. Le persone trascorrevano più tempo nelle conversazioni, gestivano personaggi, scrivevano storie, confrontavano piani, configuravano strumenti avanzati e si muovevano tra flussi sempre più complessi. Gli stessi dettagli decorativi che danno carattere a una pagina di presentazione possono diventare rumore visivo quando vengono ripetuti in ogni finestra, scheda, menu e pulsante.

Non abbiamo riprogettato Reverie per renderlo meno distintivo. Lo abbiamo fatto perché la sua identità emergesse dall’esperienza stessa.

Più leggero, non più freddo

“Leggero” può facilmente diventare sinonimo di sfondi bianchi, testo grigio troppo sottile e componenti con una presenza così debole da far sembrare tutto incompleto. Non è mai stato questo l’obiettivo.

Il nuovo sistema è più tranquillo, ma rimane caldo.

Abbiamo sostituito il bianco netto con superfici neutre leggermente colorate. Il testo è più scuro e un po’ più deciso dove la lettura prolungata lo richiede. I bordi sono più contenuti, le ombre meno profonde e il colore viene usato con maggiore intenzione. Il risultato pesa meno alla vista senza perdere l’idea che Reverie sia un luogo creato per storie e relazioni.

Questo equilibrio è particolarmente importante nel roleplay. Una conversazione non è un pannello di impostazioni. Le persone leggono messaggi lunghi, colgono sottili variazioni di tono e spesso restano nella stessa schermata a lungo. Tipografia e sfondo devono essere piacevoli dopo venti minuti, non solo apparire puliti in uno screenshot.

Una tipografia adatta alle letture lunghe

Uno dei cambiamenti più importanti è anche uno dei meno appariscenti: abbiamo rafforzato la gerarchia tipografica.

I titoli grandi rimangono espressivi, ma il corpo del testo ha ora una presenza più sicura. Etichette importanti, navigazione e azioni usano pesi più facili da scorrere con lo sguardo. Il testo secondario resta secondario, ma non è più così tenue da rendere faticosa la lettura.

Il principio è semplice:

I testi lunghi devono apparire tranquilli e solidi.
Le azioni devono essere riconoscibili prima di leggere ogni etichetta.
Le informazioni di supporto devono arretrare senza scomparire.
Una pagina deve restare leggibile su schermi, temi e condizioni di luce differenti.

Una buona tipografia non chiede attenzione. Aiuta a mantenerla.

Un solo linguaggio di componenti in tutto il prodotto

Non è stato un semplice cambio di stile pagina per pagina. Abbiamo ricostruito il linguaggio condiviso dei componenti alla base del prodotto.

Pulsanti, schede, finestre di dialogo, menu, tab, controlli dei moduli, tabelle, tooltip, notifiche, drawer, popover ed elementi di navigazione seguono ora le stesse regole per:

raggio degli angoli
contrasto dei bordi
colore delle superfici
elevazione
indicazione del focus
stati hover e pressione
peso del testo
spaziatura
colore semantico

Questa coerenza conta più di qualunque singola scelta visiva. Quando lo stesso tipo di azione appare e si comporta allo stesso modo ovunque, serve meno energia per interpretare l’interfaccia. Un’azione distruttiva appare distruttiva. Un’opzione selezionata appare selezionata. Una superficie sospesa si distingue dalla pagina sottostante. L’azione principale è facile da trovare senza che ogni pulsante cerchi di esserlo.

Abbiamo anche introdotto varianti semantiche più chiare per stati evidenziati e di successo. Ora fanno parte del sistema condiviso, invece di essere gradienti o colori personalizzati ricreati in ogni funzione.

La parte difficile: trovare le eccezioni

Aggiornare il componente Button non aggiorna automaticamente tutti i pulsanti.

Con il tempo, i prodotti accumulano decisioni locali: una scheda dei prezzi con un bordo proprio, una finestra premio con un bagliore personalizzato, un pannello di condivisione con uno sfondo speciale, un’azione nascosta con un gradiente privato o una scheda funzione che ricrea da zero il comportamento hover.

Sono queste eccezioni che spesso fanno sembrare incoerente una riprogettazione.

La nostra revisione è andata oltre la libreria dei componenti. Abbiamo riportato nel linguaggio condiviso le interfacce personalizzate che valeva la pena adeguare: esperienze di marketing, flussi di pagamento, ricompense, obiettivi, schede di personaggi e storie, finestre di condivisione, controlli di navigazione, stati vuoti, banner e schermate di utilità meno visitate.

Non abbiamo eliminato ogni eccezione. Alcune interfacce richiedono un’identità più forte perché comunicano celebrazione, urgenza, rarità o stato. La differenza è che quei momenti ora estendono il sistema invece di ignorarlo.

Meno decorazione, interazioni più chiare

La riprogettazione rimuove molti effetti che sembravano interattivi senza offrire informazioni utili.

Le ombre pesanti non compaiono più su ogni scheda. Il movimento in hover è più contenuto. I gradienti sono riservati ai momenti che beneficiano dell’enfasi. I bordi definiscono la struttura senza chiudere ogni contenuto in un’altra scatola.

Allo stesso tempo, i veri stati di interazione sono più chiari:

Le opzioni selezionate mostrano il proprio stato visivamente e semanticamente.
Il focus da tastiera è più facile da seguire.
Le schede interattive ricevono un trattamento coerente per hover e focus.
I pulsanti comunicano la gerarchia attraverso varianti condivise.
Finestre e menu si separano dallo sfondo senza sembrare estranei al prodotto.

Ridurre la decorazione ci ha dato più spazio per migliorare il feedback. L’interfaccia si muove meno, ma comunica di più.

L’accessibilità fa parte del sistema visivo

Un design system è incompleto se descrive soltanto l’aspetto dei componenti quando si usa il mouse.

Durante il refactoring abbiamo rivisto gli indicatori di focus, il comportamento da tastiera, la semantica della selezione, il contrasto e il funzionamento delle schede interattive. Alcuni controlli comunicano ora con maggiore chiarezza alle tecnologie assistive se sono premuti o selezionati. Gli elementi delle storie che si comportano come link possono ricevere il focus ed essere attivati dalla tastiera. Il focus segue la stessa logica visiva in tutti i controlli condivisi.

Questi cambiamenti sono volutamente discreti. L’accessibilità non dovrebbe sembrare una modalità separata aggiunta sopra il prodotto. Deve essere presente nel comportamento predefinito.

Una base migliore per ciò che verrà

Il risultato più prezioso di questo lavoro non è una specifica tonalità, un raggio o un’ombra. È il fatto che il prodotto abbia meno risposte in competizione alla stessa domanda di design.

Quando costruiamo una nuova funzione, non dobbiamo più decidere da zero come dovrebbe apparire una finestra, come dovrebbe reagire un campo o come rappresentare una scheda selezionata. Il sistema offre già queste risposte. Questo rende il lavoro più rapido e, soprattutto, l’esperienza finale più prevedibile.

Coerenza non significa rendere ogni schermata identica. Significa dare alle persone aspettative stabili, così che i contenuti possano cambiare senza rendere l’interfaccia estranea.

Ciò che speriamo tu possa notare

Idealmente, non molto all’inizio.

Reverie dovrebbe semplicemente risultare più facile da leggere, più tranquillo da navigare e più coerente nel passaggio dalla scoperta alla conversazione, alla creazione e agli strumenti dell’account. Le azioni importanti dovrebbero emergere prima. I controlli secondari dovrebbero smettere di competere per l’attenzione. Le sessioni lunghe dovrebbero affaticare meno la vista.

I personaggi restano espressivi. Le storie mantengono la loro atmosfera. I momenti che meritano di essere celebrati possono ancora essere vividi.

L’interfaccia sa soltanto meglio quando parlare e quando diventare abbastanza silenziosa da lasciare spazio a tutto il resto.

Il nuovo design system ora attraversa l’intera esperienza Reverie. Se qualcosa ti sembra particolarmente migliorato — o ancora fuori posto —, ci farebbe piacere saperlo nella nostra community Discord.