Progettazione UI e UX

L'interfaccia utente (UI) combina design visuale artistico con design informativo incentrato sulla comunicazione per produrre menu, layout di negozi, display Head-Up (HUD) e altre interfacce con cui i giocatori interagiscono. L'esperienza utente (UX) riguarda come i giocatori interagiscono con il gioco, come comunicano le loro scelte e come si muovono da una scelta all'altra. Sebbene UI e UX lavorino spesso in collaborazione, la UX si concentra maggiormente sull'interattività e sull'esperienza del giocatore piuttosto che sul design visivo e informativo della UI.

UI

La UI condivide informazioni vitali come punti vita, obiettivi delle missioni e prezzi che consentono ai giocatori di prendere decisioni e navigare nel gioco. Poiché è spesso il modo principale in cui i giochi comunicano con il giocatore, la UI è fondamentale per l'esperienza dei giocatori. Una UI mal progettata può lasciare i giocatori confusi e frustrati e portare a una scarsa retention, mentre una UI progettata con cura può contribuire al coinvolgimento e alla monetizzazione. Una UI progettata efficacemente impiega i seguenti principi:

• Prioritizzazione
• Attenzione
• Linguaggio visivo
• Convenzioni
• Coerenza

Prioritizzazione

Condividere le informazioni più significative per prime è noto come Gerarchia delle Informazioni. Questo è particolarmente cruciale nei giochi in cui i giocatori frequentemente prendono decisioni istantanee basate su un set limitato di informazioni. Quando si prioritizza la UI, identifica ciò che è essenziale o più rilevante per l'esperienza del giocatore e assicurati che sia accessibile e facile da individuare. Considera queste domande:

• Cosa sta facendo il giocatore in questo momento?
• Qual è la cosa più importante di cui devono essere a conoscenza o avere accesso?
• Quali scelte devono fare?
• Quali informazioni hanno bisogno per prendere quelle scelte?
• Con quale frequenza parteciperanno a quelle scelte?

Informazioni e caratteristiche importanti cambiano a seconda di fattori come il ruolo assunto dal giocatore, la loro posizione nel mondo 3D e gli oggetti che possiedono. La UI può essere progettata per presentare solo ciò che è contestualmente rilevante, scambiando pulsanti e informazioni a seconda di ciò che è utile in ciascun contesto. Questo assicura che i giocatori abbiano sempre ciò di cui hanno bisogno, senza il disordine di tutto ciò che non serve.

Esempi

Elementi irrilevanti possono causare confusione e distrazione. Spellbound RPG ha una UI pulita e minimalista, particolarmente cruciale per le interfacce mobili, poiché gli schermi piccoli possono facilmente essere sopraffatti da pulsanti, schermi e testi eccessivi.

In Super Striker League, le interazioni dei giocatori variano in base alla loro posizione rispetto alla palla. Senza palla, i giocatori possono Sprintare e Tackle per riprendere il controllo. Una volta in possesso, i pulsanti cambiano in Deke e Pass, consentendo ai giocatori di schivare gli avversari e passare la palla. Alternando questi pulsanti, la UI rimane contestualmente utile, evitando distrazioni non necessarie.

In The Survival Game, i giocatori devono essere consapevoli del loro stato di salute e fame, e avere accesso rapido alla loro mappa, inventario e strumenti. Queste informazioni consentono loro di prendere decisioni e dare priorità alle azioni per la sopravvivenza. Se queste informazioni o strumenti sono difficili da trovare o mancanti, la sopravvivenza diventa più difficile e inutilmente frustrante.

Attenzione

Nonostante una UI minimalista, prioritaria e contestualizzata, i giocatori potrebbero avere ancora bisogno di assistenza per localizzare ciò di cui hanno bisogno. I designer UI possono utilizzare diversi strumenti visivi per catturare e guidare l'attenzione dei giocatori, come:

• Colore: I colori brillanti attirano l'attenzione più di quelli opachi. Utilizza tonalità vivaci per testo, pulsanti e altri elementi cruciali, e tonalità smorzate per quelli meno significativi. Questo contrasto migliora la visibilità e riduce la distrazione.
• Dimensione: Gli elementi più grandi sono più evidenti e percepiti come importanti rispetto a quelli più piccoli.
• Spazio: Gli elementi circondati da ampio spazio negativo o padding catturano l'attenzione.
• Prossimità: Gli elementi raggruppati implicano una connessione. Posizionando caratteristiche e oggetti correlati vicini tra loro, i giocatori possono comprendere la loro associazione e trovarli più facilmente.
• Movimento: Elementi animati attirano l'attenzione. Anche un leggero movimento può far risaltare un elemento rispetto a controparti statiche. Gli effetti particellari, i pulsanti che oscillano e le frecce animate vengono spesso utilizzati nei tutorial per orientamento.

La moderazione è fondamentale con questi strumenti. Un uso eccessivo di elementi luminosi e in movimento potrebbe sopraffare e confondere i giocatori anziché aiutarli.

Esempi

Nell'interfaccia stagionale di Jailbreak, una striscia di giallo dorato si trova sotto le icone esclusive del pass stagionale, attirando l'attenzione sui premi premium e rendendoli visivamente distinti da quelli gratuiti.

In Dragon Adventures, la priorità visiva viene data al pacchetto di monete di maggior valore aumentando la sua dimensione e separandolo con più padding, per distinguerlo da pacchetti più piccoli.

In Tower Defense Simulator, sia la dimensione che la prossimità vengono utilizzate per raggruppare visivamente e distinguere le Skin di Torre Quotidiane dai Crati Quotidiani.

Linguaggio visivo

Oltre a dirigere l'attenzione dei giocatori verso gli elementi più importanti sullo schermo, i designer UI sviluppano un linguaggio visivo per aiutare i giocatori a capire cosa stanno vedendo. Un linguaggio visivo è un insieme di scelte di design deliberate e coerenti che forniscono informazioni a colpo d'occhio sullo scopo, stato, associazioni e rilevanza di un elemento. Il linguaggio è costruito da strumenti come forma, colore e stile. Alcuni degli utilizzi del linguaggio visivo includono:

Icone

Le icone possono utilizzare un'identità visiva che trasmette significato e associazioni. Ad esempio, le icone correlate a specifiche statistiche possono condividere una palette di colori e forme simili, consentendo ai giocatori di riconoscerne e comprenderne la funzione.

Pulsanti

Essendo una forma prevalente di input del giocatore, i pulsanti devono essere facili da identificare. Alloggiare i pulsanti in un contenitore, come un colore attorno al testo o all'icona, li distingue dallo sfondo, facendoli apparire interattivi. Aggiungere luci o ombre può aumentare il loro appeal tattile suggerendo una profondità 3D.

Testo

Intestazioni e titoli contenenti informazioni significative a livello elevato dovrebbero essere più grandi e più audaci del testo di corpo. Dovrebbero essere considerate tonalità altamente leggibili che contrastano bene con il colore di sfondo su cui saranno visualizzati. Scelte stilistiche come colore e grassetto possono evidenziare informazioni importanti come oggetti di gioco, statistiche o abilità. Prioritizza sempre la leggibilità quando scegli un font.

Una volta progettato il linguaggio visivo, può essere documentato in una Guida di Stile, un insieme di regole ed esempi che aiutano tutti nel team a comprendere come applicare il linguaggio in modo coerente in tutto il gioco.

Convenzioni

Le convenzioni sono scelte di design comunemente applicate che si vedono in molti giochi diversi. Alcuni esempi includono:

• Un simbolo X su un pulsante che chiude il dialogo quando premuto
• Il colore grigio applicato ai pulsanti che attualmente non possono essere utilizzati
• Un'icona di lucchetto sovrapposta a un pulsante o a una funzione per indicare che il giocatore non l'ha ancora guadagnata o sbloccata

Data la loro ampia diffusione, i giocatori sono tipicamente familiari con tali convenzioni. Sfruttare questa familiarità può rendere un'interfaccia più intuitiva e ridurre la necessità di istruzioni specifiche del gioco. Giocare a giochi all'interno del tuo genere target può aiutare a identificare convenzioni che i giocatori potrebbero riconoscere. Un designer UI potrebbe scegliere un approccio unico per adattarsi meglio al proprio gioco, ma conoscere queste convenzioni informa il loro processo decisionale.

Coerenza

Qualunque decisioni prenda un designer UI, dovrebbe applicarle in modo coerente in tutto il gioco. La coerenza aiuta i giocatori a imparare a navigare nel gioco in modo più efficiente e previene confusione e frustrazione.

Ecco alcuni esempi di coerenza UI in un gioco:

• La statistica "Salute" appare in verde in tutto il testo, nelle icone correlate e nella barra della salute.
• Ogni volta che il dialogo NPC menziona un oggetto di gioco, viene evidenziato in grassetto.
• I pulsanti di chiusura sono sempre quadrati, rossi e contengono una X bianca, apparendo solo nell'angolo in alto a destra di un dialogo.
• Ogni volta che un giocatore non può permettersi un oggetto nel negozio, il prezzo viene visualizzato in rosso.

Queste scelte sono deliberate, mirate a facilitare la comprensione e la navigazione da parte dei giocatori. Applicandole in modo coerente, consentono ai giocatori di associare elementi correlati, identificare oggetti importanti, sviluppare memoria muscolare, prendere decisioni rapide e informate e trascorrere più tempo immersi nel gioco.

UX

La progettazione UX riguarda come i giocatori interagiscono con il gioco, come comunicano le loro scelte e come si muovono da una scelta all'altra. Anche se la UX lavora spesso fianco a fianco con l'interfaccia utente (UI), è più focalizzata sull'interattività e sull'esperienza del giocatore rispetto al design visivo e informativo della UI.

Comprendere i giocatori

Un obiettivo primario del designer UX è creare interazioni e flussi che siano intuitivi, non intrusivi e convenienti da utilizzare per i giocatori. Quel processo inizia con la comprensione dei giocatori stessi, del pubblico previsto per un gioco. Quando si identificano i giocatori di un gioco, considera i seguenti aspetti:

• Demografia: Le demografie aiutano a informare le scelte di design rivelando informazioni generalizzate su un gruppo di giocatori. Ad esempio, i giocatori più giovani sono generalmente più propensi a giocare su dispositivi mobili o tablet rispetto ai computer personali, quindi i giochi destinati a quel pubblico spesso danno priorità alla progettazione e alla rifinitura dell'esperienza utente mobile.

• Livello di esperienza: Gli sviluppatori possono scegliere di progettare per giocatori con poca esperienza di gioco, una significativa o qualcosa nel mezzo. Interazioni che sono familiari ai giocatori esperti, come premere un tasto numerico per equipaggiare un oggetto in una barra degli strumenti, o premere c per accovacciarsi, potrebbero non essere evidenti per i giocatori inesperti, e richiedere messaggi o formazione aggiuntivi.

• Familiarità con il genere: Simile al livello di esperienza generale, la familiarità con il genere riflette il livello di esperienza dei giocatori con un particolare tipo di gioco. I giochi che rientrano in generi popolari su Roblox, come il gioco di ruolo, l'horror di sopravvivenza e gli sparatutto in prima persona, sono probabilmente adatti a molti potenziali giocatori che hanno giocato a un genere simile prima. I giochi in altri generi potrebbero avere meno giocatori esperti, ma quel divario di esperienza può essere superato tramite tutorial e usabilità.

• Stile di gioco: I giocatori spesso favoriscono tipi di gioco specifici, che vanno dalla competizione e dal collezionismo di risultati all'esplorazione e alla cooperazione. Queste preferenze si riflettono non solo nelle meccaniche di gioco preferite, ma influenzano anche le decisioni UX. I designer considerano quali interazioni dare priorità, quali rifinire e quali presentare ai giocatori. Prendono anche in considerazione il mindset che i giocatori avranno quando interagiranno con queste interazioni e le emozioni che mirano a evocare.

Dopo aver preso in considerazione questi fattori e selezionato un gruppo target di giocatori (o gruppi), imparare a conoscerli incontrandoli, giocando con loro e apprendendo i loro obiettivi e preferenze per informare meglio le scelte di design.

Progettare interazioni

Le interazioni sono elementi che consentono ai giocatori di vivere e comunicare le loro scelte in un gioco. I designer UX vogliono che queste interazioni siano intuitive e richiedano la minima spiegazione possibile. Per fare ciò, utilizzano:

• Convenzioni
• Metafore
• Feedback

Convenzioni

Le convenzioni sono design e principi UX con cui i giocatori possono già essere familiari provenienti da altri giochi.

Esempi di convenzioni includono:

• Il prompt di prossimità "E" che gli sviluppatori Roblox utilizzano per segnalare ai giocatori che un oggetto è interagibile se si trovano abbastanza vicino affinché appaia.
• Il tasto "C" che consente all'avatar del giocatore di accovacciarsi così da poter abbassarsi sotto ostacoli o adattarsi in spazi angusti.
• I tasti numerici che equipaggiano gli oggetti da una barra degli strumenti nelle mani dell'avatar in modo che possano essere utilizzati.
• Camminare all'interno di cerchi sul terreno per mettersi in coda per una partita.

Le convenzioni diventano consolidate quando un particolare tipo di implementazione o scelta di design cresce in popolarità grazie alla sua facilità d'uso. "C" per accovacciarsi, ad esempio, è facile da ricordare poiché è la prima lettera della parola accovacciarsi, e si trova convenientemente vicino a WASD, i tasti che i giocatori usano per navigare. È un'interazione facile da eseguire rapidamente e sotto pressione, il che è ideale poiché il tentativo di nascondersi o fuggire da una minaccia in avvicinamento è un caso d'uso comune per accovacciarsi.

Metafore

Le metafore collegano un concetto astratto a uno più familiare, creando una scorciatoia per la comprensione. In questo esempio di Spellbound Wizard RPG, l'atto di lanciare incantesimi viene eseguito pescando carte da un mazzo. L'UI/UX basata su mazzi radica l'atto astratto di lanciare incantesimi, che non ha un'espressione reale, in qualcosa con cui i giocatori possono relazionarsi più facilmente e comprendere rapidamente.

Feedback

La comunicazione dal gioco al giocatore è nota come feedback. Il feedback aiuta i giocatori a comprendere un'azione che hanno intrapreso. Può contribuire ad apprendere come funziona il gioco e aggiungere uno strato extra di rifinitura che rende un elemento più soddisfacente da utilizzare. Alcuni esempi di feedback includono:

• Un nemico che esegue la sua animazione di reazione "colpito" per indicare che ha subito danni dall'arma del giocatore
• Un pulsante che cambia colore per indicare i stati di sovrapposizione, premuto e rilasciato (selezionato)
• Un effetto sonoro “cha-ching!” della cassa che suona quando il giocatore completa un acquisto
• Una barra di progresso che si riempie mentre il giocatore completa gli obiettivi della missione

Quando il feedback è assente o insufficiente, i giocatori potrebbero non sapere cosa hanno realizzato, comprendere se gli effetti siano stati buoni o cattivi, o addirittura sapere se la funzione che stanno utilizzando sta funzionando correttamente o sta riscontrando bug.

Progettare flussi

Multiple interazioni sono spesso necessarie per consentire a un giocatore di completare un obiettivo. I designer UX si preoccupano di come i giocatori navigano da un'azione o schermata UI o scelta all'altra e assicurano che questi percorsi siano logici e convenienti.

Ad esempio, per equipaggiare un oggetto su un avatar in Berry Avenue RP, un giocatore deve:

• Trovare e toccare il pulsante Avatar
• Selezionare una categoria di oggetti (viso, testa, collo, ecc.)
• Scorrere per trovare un oggetto di interesse
• Toccare l'oggetto per equipaggiarlo sul proprio avatar
• Trovare e toccare il pulsante Fatto per uscire dalla personalizzazione dell'avatar

Questi passaggi insieme rappresentano il flusso di personalizzazione dell'avatar. Questo flusso è semplice e diretto, con il minor numero possibile di passaggi necessari per equipaggiare un oggetto. Poiché i giocatori non devono eseguire molte azioni o pensare troppo a cosa devono fare, questo flusso ha un basso attrito, una misura dello sforzo richiesto per raggiungere un obiettivo.

Progettare flussi efficienti e a basso attrito richiede un'attenta considerazione dei casi d'uso. Questi casi d'uso possono essere espressi come obiettivi dei giocatori, come:

• Desiderare di poter modificare rapidamente un avatar
• Trovare facilmente gli oggetti mentre si modifica
• Visualizzare gli oggetti prima della selezione
• Rimuovere facilmente un oggetto dopo la selezione

Questi obiettivi guidano poi il design dell'UI e della UX della funzione:

• I giocatori accedono alla funzione di personalizzazione dell'avatar tramite un pulsante prominente sull'HUD e possono immediatamente iniziare a equipaggiare oggetti sui loro avatar
• Le schede ordinano gli oggetti in categorie convenienti e il campo di ricerca consente ai giocatori di cercare direttamente oggetti
• Gli oggetti vengono visualizzati immediatamente sull'avatar
• I giocatori possono rimuovere l'oggetto toccandolo di nuovo per deselezionarlo, o toccandolo nell'elenco degli oggetti equipaggiati

I designer possono quindi iniziare a disporre l'UI e pianificare i passaggi che i giocatori intraprenderanno per completare l'obiettivo di modificare i loro avatar. Questo processo può essere facilitato dall'uso di un diagramma di flusso, che rappresenta visivamente le azioni dei giocatori mentre navigano nell'UI. Questi diagrammi possono aiutare a identificare i passaggi trascurati, i punti critici in cui i passaggi non sono chiari o convenienti e un attrito eccessivo.