Progettazione UI e UX

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.


L'interfaccia utente (UI) combina il design visivo artistico con il design delle informazioni centrato sulla comunicazione per produrre menu, layout del negozio, schermi heads-up (HUD) e altre interfacce con cui i giocatori interagiscono.L'esperienza utente UX si riferisce a come i giocatori interagiscono con il Gioco, a come rendono note le loro scelte al Giocoe a come passano da una scelta all'altra.Mentre UI e UX spesso lavorano in modo collaborativo, l'UX porta un focus più significativo sull'interattività e l'esperienza del Giocatorepiuttosto che sul design visivo e informativo dell'UI.

UI

L'interfaccia utente condivide informazioni vitali come punti di colpo, obiettivi della missione 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, l'interfaccia utente è critica per l'esperienza del giocatore.Un'interfaccia utente mal progettata può lasciare i giocatori confusi e frustrati e portare a una bassa ritenzione, mentre un'interfaccia utente progettata con esperienza può contribuire all'impegno e alla Monetizzazione.L'interfaccia utente progettata efficace impiega i seguenti principi:

  • Prioritizzazione
  • Attenzione
  • Linguaggio visivo
  • Conventioni
  • Consistenza

Prioritizzazione

Condividere le informazioni più importanti prima è noto come la gerarchia delle informazioni.Questo è particolarmente importante nei giochi in cui i giocatori prendono frequentemente decisioni istantanee in base a un set limitato di informazioni.Quando si priorizza l'interfaccia utente, identifica ciò che è essenziale o più rilevante per l'esperienza del Giocatoree assicurati che sia sia accessibile che facile da localizzare.Considera queste domande:

  • Cosa sta facendo il giocatore in questo momento?
  • Qual è la cosa più importante per loro essere consapevoli, o avere accesso?
  • Quali scelte devono fare?
  • Quali informazioni hanno bisogno per fare quelle scelte?
  • Quante volte si impegneranno in quelle scelte?

Informazioni e funzionalità importanti cambiano nel corso di una Gioco, a seconda di fattori come il ruolo che il giocatore svolge, la loro posizione nel Mondodel gioco e gli oggetti che detiene.L'interfaccia utente può essere progettata per presentare solo ciò che è importante dal punto di vista contextuale - scambiando i pulsanti e le informazioni a seconda di ciò che è utile in ogni contesto.Questo garantisce che i giocatori abbiano sempre ciò di cui hanno bisogno, senza l'ingombro di tutto ciò che non hanno.

Esempi

Gli elementi irrilevanti possono causare confusione e distrazione.Spellbound RPG > ha un'interfaccia utente pulita e minimalista che è particolarmente importante per le interfacce mobili, poiché gli schermi piccoli possono facilmente essere sopraffatti da pulsanti, schermi e testo eccessivi.

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
Oggetti prima della selezione in Spellbound RPG >
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
Oggetti dopo la selezione in Spellbound RPG >

In Super Striker League, le interazioni tra i giocatori variano in base a se controllano la palla.Senza la palla, i giocatori possono correre e affrontare per riprendere il controllo.Una volta in possesso, i pulsanti passano a Deke e Pass, consentendo ai giocatori di schivare gli avversari e passare la palla.Alternando questi pulsanti, l'interfaccia utente rimane contestualmente utile, evitando distrazioni non necessarie.

Pulsanti contestuali in Super Striker League >
Pulsanti contestuali in Super Striker League >

In Nel gioco di sopravvivenza, i giocatori devono essere consapevoli del loro Statodi salute e fame e avere un rapido accesso alla loro mappa, Inventario, reportorioe strumenti.Questa informazione consente loro di prendere decisioni e priorizzare le azioni per la sopravvivenza.Se queste informazioni o strumenti sono difficili da trovare o mancanti, la sopravvivenza diventa più impegnativa e inutilmente frustrante.

Caratteristiche dell'HUD in Il gioco di sopravvivenza

Attenzione

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

  • Colore: I colori luminosi catturano l'attenzione più di quelli noiosi.Usa tonalità vibranti per testi cruciali, pulsanti e altri elementi, e tonalità opache per quelli meno importanti.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 imbottitura sono accattivanti.
  • Prossimità: Gli elementi gruppati implicano una connessione.Posizionando le funzionalità e gli elementi correlati vicino l'uno all'altro, i giocatori possono comprendere la loro associazione e localizzarli più facilmente.
  • Movimento: Gli elementi animati attirano l'attenzione.Anche una leggera vibrazione può far emergere un elemento tra le controparti statiche.Gli effetti delle particelle, i pulsanti scricchiolanti e le frecce animate sono spesso utilizzati nei tutorial per la guida.

La moderazione è la chiave con questi strumenti. L'uso eccessivo di elementi luminosi e in movimento potrebbe sopraffare e confondere i giocatori piuttosto che aiutarli.

Esempi

Nell'interfaccia utente del season pass di Jailbreak, una striscia di giallo dorato si trova sotto le icone esclusive del season pass, attirando l'attenzione sulle ricompense premium e rendendole visivamente distinte dalle gratuite.

Interfaccia utente del pass stagionale in Evasione

In Dragon Adventures, la priorità visiva viene data al pacchetto di monete di valore più alto aumentando le sue dimensioni e separandolo con più spazio, per distinguerlo dai pacchetti più piccoli.

Pacchetti di monete in Avventure di draghi

In Simulatore di difesa della torre, sia la dimensione che la vicinanza vengono utilizzate per visualizzare e distinguere le Skin della torre giornaliere dalle casse giornaliere.

Il negozio in Tower Defense Simulator >

Linguaggio visivo

Oltre a dirigere l'attenzione dei giocatori agli elementi più importanti sullo schermo, i progettisti di interfaccia utente sviluppano un linguaggio visivo per aiutare i giocatori a capire ciò che stanno vedendo.Un linguaggio visivo è un insieme di scelte di progettazione deliberate e coerenti che forniscono informazioni a colpo d'occhio sullo scopo, lo Stato, le associazioni e la rilevanza di un elemento.La lingua è costruita da strumenti come forma, colore e stile.Alcuni degli usi per il linguaggio visivo includono:

Icone

Le icone possono impiegare un'identità visiva che trasmette significato e associazioni.Ad esempio, le icone relative a statistiche specifiche possono condividere una tavolozza di colori e forme simili, consentendo ai giocatori di riconoscere e comprendere la loro funzione.

Statistiche del giocatore in Vento della fortuna

Pulsanti

Come forma prevalente di input del giocatore, i pulsanti devono essere facili da identificare.I pulsanti di housing in un container, come un colore che circonda il testo o l'Icona, li distingue dal background, rendendoli interattivi.L'aggiunta di evidenze o ombre può migliorare il loro appeal tattile suggerendo profondità 3D.

Pulsanti in Simulatore di BotClash >

Testo

Titoli e intestazioni che contengono informazioni di alto livello importanti dovrebbero essere più grandi e audaci del testo del corpo.I colori che sono altamente leggibili e si contrastano bene contro il colore di sfondo su cui verranno visualizzati devono essere considerati.Scelte stilistiche come colore e grassetto possono evidenziare informazioni importanti come oggetti in gioco, statistiche o abilità.Priorizza sempre la leggibilità quando si sceglie un carattere.

Negozio di abbigliamento in Vento della fortuna

Una volta che la lingua visiva è stata progettata, può essere documentata in una Guida di stile, un insieme di regole e esempi che aiutano tutti nella squadra a capire come applicare il linguaggio in modo coerente attraverso il Gioco.

Conventioni

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

  • Un simbolo X su un pulsante che chiude il dialogo quando viene premuto
  • Il colore grigio applicato ai pulsanti attualmente non utilizzabili
  • Un'icona di blocco che sovrappone un pulsante o una funzione per indicare che il giocatore non l'ha ancora guadagnata o sbloccata

Dato il loro uso diffuso, i giocatori sono tipicamente familiari con tali convenzioni.Sfruttare questa familiarità può rendere un'interfaccia più intuitiva e ridurre il bisogno di istruzioni specifiche per il gioco.Giocare a giochi all'interno del genere target può aiutare a identificare le convenzioni che i giocatori possono riconoscere.Un progettista di interfaccia utente può optare per un approccio unico per adattare meglio il proprio Gioco, ma conoscere queste convenzioni informa il loro processo decisionale.

X Chiudi Pulsanti in Vento della Fortuna , Dragon Adventures , Simulatore di BotClash , e DOORS >

Consistenza dello stato "Salute" verde in Arcane Odyssey >

Consistenza

Qualunque decisione prenda un progettista di interfaccia utente, dovrebbe applicarle in modo coerente durante tutto il Gioco.La coerenza aiuta i giocatori a imparare a navigare nel gioco in modo più efficiente e impedisce confusione e frustrazione.

Ecco alcuni esempi di coerenza dell'interfaccia utente 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 Articoloin gioco, viene evidenziato in grassetto.
  • I pulsanti di chiusura sono sempre quadrati, rossi e contengono una X bianca, che appare 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, mirando a facilitare la comprensione e la navigazione del giocatore.Applicandoli in modo coerente, consentono ai giocatori di associare elementi correlati, identificare oggetti importanti, sviluppare la memoria muscolare, prendere decisioni informate rapidamente e trascorrere più tempo immerso nel Gioco.

UX

Il design UX si riferisce a come i giocatori interagiscono con il Gioco, a come rendono le loro scelte note al Giocoe a come passano da una scelta all'altra.Sebbene UX lavori spesso a stretto contatto con l'interfaccia utente (UI), si concentra maggiormente sull'interattività e sull'esperienza del giocatore piuttosto che sul design visivo e informativo dell'interfaccia utente.

Capire i giocatori

Uno degli obiettivi principali del designer UX è creare interazioni e flussi intuitivi, invadenti e convenienti per i giocatori da utilizzare.Quel processo inizia con una comprensione dei giocatori stessi, del pubblico previsto per un Gioco.Quando si identificano i giocatori di un'esperienza, considera quanto Seguendo:

  • Demografia: La demografia aiuta a informare le scelte di progettazione rivelando informazioni generalizzate su un Gruppodi giocatori.Ad esempio, i giocatori più giovani sono generalmente più probabili a giocare su dispositivi mobili o tablet rispetto ai computer personali, quindi i giochi destinati a quell'audience spesso privilegiano la progettazione e la lucidatura dell'esperienza utente mobile.

  • Livello di esperienza: Gli sviluppatori possono scegliere di progettare per i giocatori con poca esperienza di gioco, una quantità significativa o qualche punto intermedio.Le interazioni familiari ai giocatori esperti, come premere una tastiera numerica per equipaggiare un oggetto in una barra degli strumenti o premere c per accovacciarsi, potrebbero non essere evidenti ai giocatori inesperti e richiedere ulteriori messaggi o formazione.

  • Familiarità del genere: Simile al Livellodi esperienza generale, la familiarità del genere riflette il livello di esperienza dei giocatori con un tipo specifico di Gioco.I giochi che cadono in generi popolari su Roblox, come Roleplay, Survival Horror e First-Person Shooter, sono probabili avere molti potenziali giocatori che hanno giocato a un gioco simile prima.I giochi in altri generi possono avere meno giocatori esperti, ma tale gap di esperienza può essere superato attraverso tutorial e usabilità.

  • Stile di gioco: I giocatori spesso preferiscono tipi specifici di Giocare, che vanno dalla competizione e raccolta di successi all'esplorazione e alla cooperazione.Queste preferenze non si riflettono solo nelle meccaniche di gioco preferite dai giocatori, ma influenzano anche le decisioni UX.I designer considerano quali interazioni prioritizzare, quali polire e quali presentare ai giocatori.Tengono anche conto del mindset che i giocatori avranno quando si impegnano in queste interazioni e delle emozioni che mirano a evocare da loro.

Dopo aver considerato questi fattori e selezionato un gruppo target di giocatori (o gruppi), conoscili incontrandoli, giocando con loro e imparando sui loro obiettivi e preferenze per informare meglio le scelte di progettazione.

Progetta interazioni

Interazioni sono funzionalità che consentono ai giocatori di sperimentare e comunicare le loro scelte in un Gioco.Gli designer UX vogliono che quelle interazioni siano intuitive e richiedano la minima spiegazione possibile.Per farlo utilizzano:

  • Conventioni
  • Metamore
  • Risposta

Convenzioni

Convenzioni sono progetti e principi UX con cui i giocatori potrebbero essere già familiari da altri giochi.

"E" prompt di prossimità in Vita di Sirena

Esempi di convenzioni includono:

  • Il prompt di prossimità "E" che i sviluppatori di Roblox utilizzano per segnalare ai giocatori che un oggetto è interattivo se si trova abbastanza vicino per apparire.
  • La chiave "C" che consente all'avatar del Giocatoredi accovacciarsi in modo da poter nuotare sotto le ostruzioni o adattarsi a spazi stretti.
  • Gli oggetti delle chiavi numeriche si equipaggiano negli oggetti della barra degli strumenti nell'Avatarper poter essere utilizzati.
  • Camminare nei cerchi sul terreno al fine di fare la coda per una Corrisponde.

Le convenzioni si stabiliscono quando una particolare implementazione o scelta di progettazione guadagna popolarità a causa della sua facilità d'uso.Ad esempio, "C" per accovacciarsi è facile da ricordare poiché è la prima lettera della parola accovacciamento e si trova convenientemente accanto a WASD, le chiavi che i giocatori usano per Barra di navigazione.È una semplice interazione da eseguire rapidamente e sotto pressione, che è ideale poiché tentare di nascondersi o fuggire da una minaccia in arrivo è un caso d'uso comune per accovacciarsi.

Metamore

Metamore si riferisce a un concetto astratto a uno più familiare, creando un scorciatoia per la comprensione.In questo esempio da Spellbound Wizard RPG, l'atto di lanciare incantesimi viene eseguito tracciando carte da un mazzo.L'interfaccia utente/UX basata sul deck rende concreto l'atto astratto di lanciare incantesimi, che non ha espressione nella vita reale, in qualcosa a cui i giocatori possono relazionarsi più facilmente e più rapidamente.

Spellcasting come carte in Spellbound RPG >

Feedback

La comunicazione dal gioco al giocatore è nota come feedback.Il feedback aiuta i giocatori a capire che un'azione che hanno intrapresa ha avuto un effetto nel Gioco.Può contribuire a imparare come funziona il gioco e aggiungere uno strato extra di polacco che rende una funzione più soddisfacente da utilizzare.Alcuni esempi di feedback includono:

  • Un nemico sta giocando la sua animazione di reazione "hit" per indicare che ha subito danni dall'arma del Giocatore
  • Un pulsante che cambia colore per indicare lo stato sorvolare, depresso e rilasciato (selezionato)
  • Un effetto sonoro "cha-ching!" della cassa registratrice che suona quando il giocatore completa un Acquista
  • Una barra di avanzamento che si riempie man mano che il giocatore completa gli obiettivi della missione

Quando manca o è insufficiente il feedback, i giocatori potrebbero non sapere ciò che hanno realizzato, capire se gli effetti sono stati buoni o cattivi o anche sapere se la funzione che stanno utilizzando funziona correttamente o sta riscontrando errori.

Flussi di progettazione

Spesso sono necessarie più interazioni per completare un obiettivo per un giocatore.I progettisti UX sono preoccupati di come i giocatori navigano da una azione o schermo UI o scelta all'altra e si assicurano che questi percorsi siano logici e convenienti.

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

  • Trova e tocca il pulsante Avatar
  • Seleziona una categoria di oggetti (viso, testa, collo, ecc)
  • Scorri per trovare un elemento di interesse
  • Tocca l'elemento per equipaggiarlo sul loro Avatar
  • Trova e tocca il pulsante Fatto per uscire dalla personalizzazione dell'avatar
Flusso di personalizzazione dell'avatar in Berry Avenue RP >

Questi passaggi compiuti insieme rappresentano il flusso di personalizzazione dell'avatar.Questo flusso è semplice e lineare, con il minor numero possibile di passaggi necessari per equipaggiare un Articolo.Poiché i giocatori non devono eseguire molte azioni o pensare troppo a ciò che devono fare, questo flusso è basso in attrito, una misurazione dell'impegno richiesto per raggiungere un obiettivo.

Progettare flussi efficienti e a bassa attrizione richiede una attenta considerazione dei casi d'uso. Tali casi d'uso possono essere espressi come obiettivi del giocatore come:

  • Vuoi essere in grado di modificare rapidamente un Avatar
  • Trovare facilmente gli elementi mentre si modifica
  • Anteprima degli elementi prima della selezione
  • Rimozione facile dell'elemento dopo la selezione

Questi obiettivi guidano quindi la progettazione dell'interfaccia utente e dell'UX della Proprietà:

  • I giocatori accedono alla funzione di personalizzazione dell'avatar attraverso un pulsante prominente sull'HUD e possono immediatamente iniziare ad equipaggiare oggetti ai loro avatar
  • Le schede ordinano gli elementi in categorie convenienti, e il campo di ricerca consente ai giocatori di cercare gli elementi direttamente
  • Gli oggetti vengono visualizzati in anteprima sull'avatar all'istante
  • I giocatori possono rimuovere l'elemento toccandolo di nuovo per deselezionarlo, o toccandolo nella lista degli elementi equipaggiati

I progettisti possono quindi iniziare a disporre l'interfaccia utente e pianificare i passi che i giocatori dovranno compiere per completare l'obiettivo di modificare i loro avatar.Questo processo può essere aiutato dall'uso di una tabella di flusso, che visualizza visivamente le azioni dei giocatori mentre navigano nell'interfaccia utente.Questi diagrammi possono aiutare a identificare passaggi trascurati, punti dolorosi in cui i passaggi non sono chiari o inconvenienti e friction eccessiva.

Esempio di una tabella di flusso.