Shadowlands: Un approfondimento della nuova interfaccia utente per la schermata di creazione del personaggio

La pubblicazione di Shadowlands ha fornito una nuova opportunità per riprogettare e ottimizzare il processo di creazione del personaggio. Sbircia dietro le quinte con il progettista interfaccia utente senior Jeff Liu, scoprendo di più sulle idee alla base del processo.

Saluti, abitante di Azeroth! Mi chiamo Jeff Liu e sono progettista interfaccia utente senior del team di World of Warcraft. Sono qui per condividere con te alcune riflessioni sulla riprogettazione della creazione del personaggio implementata alla pubblicazione di Shadowlands. Viste tutte le nuove fantastiche opzioni di personalizzazione che sono state introdotte di recente, abbiamo pensato che fosse un buon momento per alzare il sipario e spiegare qualcosa sulle scelte di progettazione dietro le quinte che abbiamo fatto per l'interfaccia utente (IU).

In passato avevo già lavorato alla riprogettazione del sistema di trasmogrificazione e della Casa d'Aste. Riprogettare vecchie IU è di gran lunga il tipo di progetto che preferisco e sono quindi stato entusiasta di farlo anche per la schermata di creazione del personaggio.

Era una parte delle iniziative dedicate all'Esperienza Nuovo Giocatore, insieme alla nuova zona di partenza per i nuovi giocatori, l'Isola dell'Esilio. La creazione del personaggio è la prima schermata con cui un nuovo giocatore interagisce, quindi volevamo rendere tutto più moderno per fare una buona prima impressione. Inoltre, il team della grafica dei personaggi era in procinto di aggiungere molte nuove opzioni di personalizzazione per Shadowlands, quindi era il momento perfetto per aggiornare l'IU.

Il nuovo layout

Per darti un riferimento, questo era il vecchio aspetto della schermata di creazione del personaggio:

Uno di nostri primi tentativi è stato dividere le schermate di selezione della classe e della razza. Nella prima schermata si sceglieva la classe e nella seconda si sceglieva la razza:

In questo esempio, se tu avessi voluto giocare un Elfo della Notte, saresti dovuto tornare alla schermata precedente, scegliere una classe diversa e poi continuare ad andare avanti e indietro tra le schermate per vedere tutte le tue opzioni.

Sì, piuttosto scomodo.

Come idea non funzionava, quindi per un attimo abbiamo pensato di mantenere il vecchio layout aggiornando semplicemente la grafica. Con un colpo di genio dell'ultimo minuto, i miei colleghi progettisti IU Crash Reed e Ray Ocampo proposero un bozzetto in cui le razze venivano divise su lati opposti:

Uno dei punti di forza di questo layout era come il confronto tra l'Orda da una parte e l'Alleanza dall'altra comunicasse istantaneamente il concetto di guerra di fazione. Ci piaceva la semplicità e l'originalità del progetto, così abbiamo proseguito su quella strada!

Segui il tuo istinto

Con un nuovo layout in tasca, ho riconsiderato la quantità di informazioni fornite ai giocatori nella schermata. La vecchia schermata di creazione del personaggio includeva molte informazioni sotto forma di testi descrittivi:

Il rischio nel presentare troppe informazioni, per quanto utili, è che possono impedire a qualcuno di fare una scelta altrimenti semplice.

Abbiamo progettato la nuova schermata di creazione del personaggio in modo da aiutare i nuovi giocatori a evitare quella che si chiama "paralisi da analisi". Abbiamo tolto molto testo e ci siamo affidati alla grafica e ai suoni per spiegare le razze e le classi: meglio vedere un Mago che lancia una Palla di Fuoco, che descriverlo.

La maggior parte dei nuovi giocatori avrebbe comunque riconosciuto questi archetipi fantasy grazie alla cultura pop. È risaputo che un guerriero impugna una spada, indossa un'armatura pesante e combatte a distanza ravvicinata.

Abbiamo organizzato le classi così da aiutare i nuovi giocatori a identificare rapidamente le classi in modo comprensibile:

I primi tre sono gli archetipi più lineari e conosciuti. Le successive tre classi sono leggermente meno ovvie. Per esempio, qualcuno che non avesse mai giocato a un videogioco potrebbe non sapere cosa fa un Sacerdote. Quindi ci sono le classi ibride, che sono più complesse.

È importante sottolineare che questa scelta progettuale non si è basata su quanto sia difficile giocare ogni classe, ma sulla facilità di comprensione dei concetti alla base di cosa sia quella classe e cosa faccia, senza la necessità di ulteriori spiegazioni.

Le razze sono una scelta in buona parte estetica. Non volevamo che i nuovi giocatori scegliessero la razza in base alle abilità razziali, quindi le abbiamo nascoste:

Secondo noi è giusto che un nuovo giocatore non crei il suo "personaggio per sempre" al primo tentativo. I giocatori apprenderanno di più sulle razze e le classi giocando che con le spiegazioni presenti nella schermata di creazione del personaggio.

Vogliamo solo che i nuovi giocatori scelgano la razza con l'aspetto più intrigante, la classe in base all'archetipo preferito, e via!

Mostrare, non descrivere

Dopo aver rimosso tutto il testo, abbiamo creato delle nuove animazioni che mostrassero l'immaginario alla base della classe.

Abbiamo iniziato discutendo di quanto elaborate queste animazioni dovessero essere, soprattutto dal punto di vista della durata, perché non volevamo si trascinassero troppo a lungo.

Ecco alcuni primi bozzetti creati dal capo animatore Ian Lang:

Nota: l'ultima clip mostra un modello iniziale che avevamo provato a fare, con un ampio sfondo di stoffa e il personaggio in piedi su un piedistallo. Ecco un altro bozzetto:

Dopo aver deciso che direzione prendere, il team delle animazioni ha creato una sequenza per ogni classe, lavorando con il team degli effetti speciali per scegliere quelli migliori da affiancare alle abilità mostrate. Quindi, un progettista audio ha unito i suoni a tutte le diverse animazioni.

Penso che siamo tutti d'accordo nel dire che i team delle animazioni, degli effetti speciali e dell'audio hanno fatto un gran lavoro nel rendere queste classi davvero eroiche. Le animazioni sono risultate il punto di forza più grande della nuova schermata di creazione del personaggio.

Mantenere la concentrazione

Uno dei nostri obiettivi principali era concentrare l'attenzione del giocatore sul modello del personaggio al centro dello schermo. Volevamo si avesse la sensazione di star creando un supereroe. È stata questa la filosofia che ha guidato tutte le decisioni del team nella riprogettazione di questa schermata.

Invece del tradizionale stile grafico dell'IU di WoW, abbiamo optato per un'estetica più minimalista. Abbiamo rimosso l'elaborata grafica artistica sui lati, come i vecchi stendardi di fazione, poiché visivamente distraevano troppo l'attenzione dal personaggio.

Abbiamo aggiunto un'ampia ombreggiatura sul bordo dello schermo, per dare l'idea che il personaggio fosse sotto un riflettore, creando di fatto una vignetta.

Abbiamo anche posizionato gli elementi dell'IU in modo da portare lo sguardo dove volevamo noi.

Infine, abbiamo reso sfocato lo sfondo quando la visuale si ingrandisce, durante la modalità di personalizzazione. In questo modo, il personaggio si ingrandisce e permette di concentrarsi sulle sue caratteristiche.

Nuovi giocatori

I nuovi giocatori vedono una versione diversa della schermata di creazione del personaggio rispetto a quelli veterani. Volevo che loro avessero un'esperienza più semplice e più pulita.

Per esempio, vengono mostrate solo le razze principali e i loro nomi sono evidenziati sotto i ritratti.

Poi ci sono differenze più sottili.

Il primo personaggio che si vede, da veterani, è una combinazione di razza e classe assolutamente casuale. Per i nuovi giocatori, il primo personaggio visualizzato è sempre un Umano o un Orco Guerriero (di genere casuale). Questo per tornare all'idea di introdurre i nuovi giocatori in un gioco in cui vedono qualcosa di facilmente riconoscibile.

Anche la casualità dei personaggi è leggermente diversa per i nuovi giocatori. Poiché è il loro primo passo nell'universo di Warcraft, volevo che potessero vedere ogni razza nel suo aspetto più caratteristico. Quindi, quando si genera un personaggio casuale, le opzioni che modificano la faccia, come tatuaggi, pitture di guerra e copricapi, sono state disabilitate.

Niente paura: una volta che si accede alla personalizzazione, i nuovi giocatori possono scegliere tutte le opzioni che preferiscono.

Infine, i nuovi giocatori vedono un consiglio nella schermata di personalizzazione:

Un input che abbiamo ricevuto dalle prove con gli utenti è stato che alcuni nuovi giocatori provavano ansia nel finalizzare il proprio personaggio. Ha senso, no? Se pensi che sia l'ultima possibilità per personalizzare il tuo personaggio, vuoi prenderti tutto il tempo possibile per assicurarti che sia perfetto. Questo consiglio permette di procedere con serenità e iniziare a giocare prima.

Personalizzazione del personaggio

A proposito della personalizzazione del personaggio, vediamo alcuni dei primi bozzetti per quella schermata. È evidente come la progettazione si sia evoluta dal vecchio layout:

A un certo punto, ho sperimentato un layout più libero, in cui le opzioni non fossero contenute in una scatola:

Non ci piaceva questo aspetto disordinato, ma ci piaceva l'idea di apertura, quindi l'abbiamo combinato con alcune delle idee precedenti in cui avevamo raggruppato le opzioni in categorie:

Eravamo ormai vicini al layout finale!

Il selettore di opzioni

Avrai notato che le opzioni nell'ultimo bozzetto erano controllate da delle barre. Questo controllo dell'IU ha subito diversi cambiamenti durante lo sviluppo.

Il vecchio layout includeva larghi ritratti di anteprima sulla destra. Guardando questi esempi, è difficile dire quale sia la differenza tra le diverse opzioni facciali:

Inoltre, non sono scalabili e contrastano con il nostro obiettivo di concentrare l'attenzione sul personaggio al centro.

Così, abbiamo trovato un controllo dell'IU che sostituisse i ritratti.

Non volevo usare un miscuglio di controlli diversi (come checkbox, pulsanti e colori), perché avrebbero intasato lo spazio della schermata in modo fastidioso. Volevo usare un singolo controllo che funzionasse con tutti i tipi di opzioni.

Tuttavia, l'obiettivo più importante era consentire di passare rapidamente da un'opzione all'altra, in modo da poterle confrontare facilmente.

I primi tentativi non soddisfacevano quel requisito ed era faticoso confrontare opzioni molto lontane tra loro.

Le barre rendevano possibile saltare da un punto a un altro rapidamente, ma senza precisione. Inoltre, le barre vengono solitamente usate per spostarsi tra due estremi (come basso o alto), il che non si applicava alla maggior parte delle opzioni.

Alla fine, ho trovato il menu a tendina multi colonna in grado di soddisfare tutti i nostri obiettivi:

1. permette di passare rapidamente tra due opzioni.
2. permette di vedere tutte le opzioni nello stesso momento.
3. è un controllo utile e versatile, che funziona sia con i nomi che con i colori. in alcuni casi, abbiamo potuto unire due tipologie nello stesso menu a tendina.
4. la concentrazione è sempre sul personaggio al centro.
5. E questa è la parte più interessante: puoi vedere un'anteprima delle opzioni in tempo reale semplicemente passandoci sopra il mouse.

Nota a margine: sono un grande fan di Overwatch. Quanti riferimenti a Overwatch riesci a trovare nei nomi delle opzioni?

Le icone di categoria

Tutte le opzioni di personalizzazione sono contenute in una di queste tre categorie. Ecco quali sono le categorie e come si sono evolute le icone:

Originariamente avevo progettato cinque categorie, ma dopo averle provate in gioco ho cambiato idea.

Era strano che le opzioni per il taglio di capelli fossero nella seconda categoria, dal momento che cambiare la pettinatura è in genere una delle prime cose che si fa. Quindi, le ho spostate nella prima categoria, con le opzioni per la faccia.

Molte razze non hanno molte opzioni per tatuaggi e caratteristiche corporee, quindi ho unito queste due categorie. Ed è così che alla fine le categorie sono diventate tre.

Barbiere

Forse ricorderai che il Barbiere aveva una IU completamente diversa dalla schermata di creazione del personaggio. Con la riprogettazione, ha iniziato ad avere senso avere la stessa IU in entrambi i posti.

Alcuni Barbieri erano troppo cupi a causa delle condizioni di illuminazione dei luoghi in cui si trovavano. Inoltre, la percezione dei colori in alcuni casi veniva falsata. Per esempio, un verde poteva sembrare giallo.

Il team grafico ha risolto il problema applicando una luce completamente neutrale attorno al personaggio quando si attiva la sedia del Barbiere. Ora, la luce è brillante e i colori accurati.

Una nuova opzione disponibile dal Barbiere è il cambio di genere del personaggio. Ecco un video del primo cambio di genere, registrato dall'ingegnere che l'ha implementato.

Problemi

Ci sono stati diversi problemi grafici che abbiamo dovuto sistemare nel corso del progetto:

Ringrazia il team QA per averti salvato da questi incubi!

Alla Prossima

La riprogettazione della creazione del personaggio è stato un lavoro di squadra che ha coinvolto artisti, animatori, produttori, analisti, progettisti audio, ricercatori e programmatori (puoi leggere un loro articolo in proposito qui!). Speriamo di aver costruito un'IU moderna e flessibile, che faciliterà la creazione di milioni di personaggi negli anni che verranno.

Spero che questo approfondimento sulla riprogettazione della schermata di creazione del personaggio ti sia piaciuto. Grazie per aver letto!

Jeff Liu
progettista interfaccia utente senior, World of Warcraft