Redesign Menu di Skyrim
Durata: 4 settimane | Strumenti: Figma, Game UI Database
Lettura: 6 min
In questo primo progetto in ambito Gaming ridisegno la User experience e la User interface dei menu di gioco di Skyrim, concentrandomi su vincoli tecnici, problemi di usabilità e coerenza stilistica, per proporre una soluzione più navigabile e facile da usare.
Contesto
Vincoli ed esplorazione
Senza l’accesso ai vincoli interni quali obiettivi di produzione, limitazioni tecniche, tempistiche o risorse disponibili, questa riprogettazione va intesa come un’esplorazione esterna dell’esperienza utente.
Il sistema di menu originale è il risultato di scelte progettuali deliberate, e questo lavoro si limita a esplorare come la stessa esperienza possa essere affrontata da una prospettiva diversa in termini di usabilità.
Contesto
L’obiettivo
L’obiettivo del progetto è una riprogettazione concettuale del sistema di navigazione dei menu di Skyrim, incentrata sul miglioramento dell’usabilità, tenendo conto dei vincoli relativi ai comandi e preservando l’identità visiva originale.
Contesto
La sfida
La sfida principale è stata far convivere la nuova User Experience con il contesto di partenza. Ogni nuova idea di navigazione doveva integrarsi naturalmente con i comandi di gioco e rispettare l’identità visiva originale del gioco.
Processo
Framework
01 – Processo
Mappatura controlli
Trattandosi di un’esperienza di gioco pensata per l’utilizzo del controller, ho deciso di tralasciare i comandi da tastiera, per semplificare l’analisi. Testando direttamente all’interno del gioco, mi sono fatto un’idea dei vincoli relativi ai comandi e delle opportunità che potevo sfruttare. È emerso che alcuni tasti non avevano alcuna funzione in determinate aree, mentre altri presentavano funzioni che si discostavano dagli standard.
Opportunità:
•Sfruttare i tasti inutilizzati
•Rivedere alcuni comandi per allinearli meglio agli standard
02 – Processo
User flow
Ho analizzato il sistema originale del menu di Skyrim mappando un task di navigazione comune come la selezione di un oggetto casuale e osservando come gli utenti navigano la lista. L’analisi ha evidenziato una forte dipendenza dallo scorrimento verticale e una mancanza di scorciatoie di navigazione.
Opportunità:
•Implementare shortcuts di navigazione
•Rivalutare la funzione “Preferiti”
03 – Processo
Analisi euristica
Ho basato la User Experience su criteri di usabilità; effettuare una valutazione euristica mi ha fornito gli strumenti per individuare i veri problemi presenti nell’intera esperienza. Ho utilizzato le 10 euristiche di usabilità di Jakob Nielsen e i 7 principi di usabilità di Celia Hodent.
04 – Processo
Benchmark
Dopo aver riflettuto sugli aspetti euristici, ho avuto le idee chiare su come procedere con la riprogettazione. Grazie alle straordinarie risorse di UI Database e ad alcuni test di gioco personali, ho esplorato i modelli di interazione comunemente utilizzati nei menu dei videogiochi, valutando come potessero adattarsi al contesto di Skyrim senza compromettere l’immersione.
05 – Processo
Wireframe
Ho iniziato il lavoro con alcune idee in mente per mantenere intatto il layout originale del menu:
•Rivedere i pulsanti funzione LB/RB per implementare una funzione “Vai indietro/Avanti” (Pokémon Spada e Scudo) per velocizzare la navigazione
•Progettare un “Menu contestuale” (Tloz Totk) e adattare le funzioni degli altri pulsanti per evitare azioni irreversibili senza conferma
•Aggiunta di icone alle categorie per fornire un riferimento visivo e ridurre il carico cognitivo
•Riprogettazione della “Selezione preferiti” con un “menu a carosello orizzontale” (Tloz Totk) o un menu radiale (Aliens/Apex)
Nonostante tutte le modifiche, c’è comunque stato qualcosa che non ha funzionato:
•L’uso delle nuove funzioni di LB/RB non è risultato intuitivo con lo scorrimento verticale
•Per rilasciare molti oggetti tramite il “menu contestuale” era necessario premere troppi pulsanti
06 – Processo
UI finale
Interfaccia del menu ‘Strumenti’ di default
I principali problemi che ho individuato nell’interfaccia del menu originale riguardavano l’usabilità:
•L’interfaccia mostra solo testo, impedendo l’identificazione immediata degli elementi
•Lo squilibrio nelle proporzioni tra gli elementi dell’interfaccia utente peggiora l’esperienza di navigazione
•Le istruzioni visualizzate in basso aiutano a capire cosa è possibile fare. Purtroppo, sono definitive e prive di pulsanti di conferma, creando flussi potenzialmente frustranti
•La navigazione nel menu risulta lenta e priva di qualsiasi tipo di scorciatoia
Redesign dell’interfaccia del menu ‘Strumenti‘
In questa prima fase ho apportato alcune piccole migliorie all’esperienza utente, cercando di mantenere intatto il menu originale:
•Aggiunta di icone di categoria per un migliore riconoscimento visivo e una riduzione del carico cognitivo.
•Ridimensionamento degli elementi dell’interfaccia utente per una migliore gerarchia visiva
•Modifica dei comandi per includere un modale contestuale e una funzione di ‘Jump forward’:
-In precedenza, il pulsante “B” chiudeva il menu, indipendentemente dalla posizione in cui ci si trovava. Ora svolge la funzione di “Annulla”
-Il pulsante “A” ora apre un menu contestuale per evitare azioni definitive. Selezionando “Rilascia” si entra in uno ‘Checklist state’ in cui si può selezionare gli elementi che si desidera rilasciare e confermare l’azione con “A”
-È stato aggiunto un acceleratore “Salto” attivabile cliccando su LB (torna indietro di 5 elementi) e RB (vai avanti di 5 elementi)
Redesign dell’interfaccia del menu ‘Strumenti’
Redesign dell’interfaccia del menu ‘Magie’
Per quanto riguarda la soluzione finale, ho optato per un classico ‘Tab menu’, mantenendo coerenza con gli standard e in grado di rendere la navigazione molto più intuitiva e semplice. Ho incluso una funzione di filtraggio, in linea con il principio di flessibilità di Hodent per facilitare ulteriormente la navigazione.
Sebbene questa soluzione sia eccellente dal punto di vista dell’usabilità, si scontra con un problema fondamentale del gioco: il riconoscimento delle icone, specialmente per gli incantesimi, non è immediato, costringendo il giocatore a fare ampio ricorso alla memoria. Se avessi avuto le risorse, mi sarebbe piaciuto testare questo aspetto con alcuni utenti, per comprendere meglio quale potesse essere la portata del problema e, eventualmente, procedere con un passaggio di consegne al team artistico, per una riprogettazione artistica completa.
Interfaccia del menu ‘Preferiti’ di default
Il modo in cui venivano visualizzati i ‘Preferiti’ presentava lo stesso problema del menu strumenti e magie:
•Mancanza di riferimenti visivi
•Struttura gerarchica confusa
•Lungo scorrimento verticale
Redesign dell’interfaccia del menu ‘Preferiti‘
Per questa interfaccia mi sono ispirato molto al menu di selezione di The Legend of Zelda: Tears of the Kingdom. Progettare un carosello orizzontale come questo mi ha permesso di:
•Rendere la sezione dei preferiti più intuitiva e facile da navigare
•Includere la funzione «Ordina» per facilitare la navigazione anche nelle fasi avanzate del gioco, quando il giocatore potrebbe avere molti preferiti
Menu radiale
Un’altra soluzione che mi è sembrata sensata è stata quella di un menu radiale. Mi è piaciuta l’idea di offrire al giocatore ancora più libertà con questo tipo di interfaccia, con l’obiettivo di:
•Mantenere al massimo il livello di immersività del gioco, anche durante i combattimenti
•Fornire una soluzione incentrata sull’uso del controller.
•Ridurre il carico cognitivo sfruttando il riconoscimento spaziale
Selezione dei menu
Per includere le funzioni precedenti alcuni comandi dovevano venir modificati, da qui la necessità di unire il ‘Menu giocatore’ con il ‘Menu missioni/opzioni’. Ho optato per un layout semplice ispirato a The Witcher 3, mantenendolo essenziale, poiché non era il fulcro del progetto.
Grazie per l’attenzione!
Se hai qualsiasi tipo di domanda sul progetto o ne vuoi semplicemente parlare, sentiamoci su LinkedIn!