The Power of Video Game HUDs

A soli otto mesi dal completamento
di The Last Of Us,

Naughty Dog iniziò finalmente a lavorare
all'interfaccia utente del gioco.

"Sebbene alcuni elementi dell'UI
fossero già stati abbozzati,"

spiega la designer
Alexandra Neonakis,

"non era stato stabilito un design
generale per l'head-up display,

e molte cose erano ancora
da decidere."

Credo che questa sia la prova
del fatto che l'interfaccia utente

può diventare una delle fasi più
sottovalutate dello sviluppo.

Una fastidiosa postilla, messa insieme
all'ultimo minuto.

Ma, a mio parere, non dovrebbe essere
sottovalutata,

perché l'UI può avere un impatto enorme

sull'aspetto, il funzionamento
e le sensazioni trasmesse gioco.

Perciò in questo episodio di
Game Maker's Toolkit,

voglio esplorare l'intersezione
tra UI e game design,

per capire come le barre della salute
e i misuratori della resistenza

possono modificare
il nostro stile di gioco.

L'UI comprende molte cose diverse.

Come le lobby online, le schermate
dell'inventario, gli alberi di dialogo,

i menù per il crafting, le pagine degli
store, e così via.

Ma in questo video voglio concentrarmi
su una specifica tipologia di UI:

l'heads-up display, o HUD.

È la roba sovrapposta al gameplay,
mentre siete nel bel mezzo dell'azione.

Quindi immagino che la prima domanda sia:

qual è lo scopo dell'HUD
e quali benefici offre al giocatore?

Per facilitarmi la risposta, fatemi
suddividere l'HUD in due parti distinte:

le chiamerò misuratori e anteprime.

I misuratori sono quelli che ci vengono in
mente pensando alle HUD.

Si occupano di raccogliere informazioni
di norma invisibili,

e di comunicarle al giocatore.

Di solito la salute di un personaggio è
un numero nascosto nel codice del gioco -

ma può essere rivelata al giocatore
tramite una barra della salute.

Il comportamento dell'IA
può risultare imperscrutabile

senza aiuti visuali come campi visivi,
raggi di movimento e indicatori d'attacco.

E a causa delle limitazioni
della telecamera,

informazioni cruciali
potrebbero essere fuori schermo

a meno che non siano evidenziate
da indicatori o da una mini-mappa.

I misuratori aiutano il giocatore
a comprendere

lo stato attuale e futuro
del mondo di gioco,

permettendogli di eseguire
intenzionalmente piani e mosse.

Ecco un caso di studio dall'avvincente
deck-builder Slay the Spire.

All'inizio dello sviluppo,

i nemici non davano alcuna indicazione
su ciò che stavano progettando di fare.

Quindi ad ogni turno i giocatori
non sapevano se parare o attaccare,

finendo così per giocare in modo
abbastanza casuale.

Per risolvere, lo sviluppatore Mega Crit
ha aggiunto questi indicatori

che mostrano ciò farà il nemico.

Ora il giocatore può prendere decisioni
più ponderate su come sfruttare la mano,

ed escogitare strategie
sinergiche soddisfacenti.

Questi sono i misuratori.

Le anteprime, d'altro canto, si occupano
di mostrare cosa accadrà

se premete un pulsante
o eseguite un'azione.

Nella forma più semplice,

sono quelle icone a pulsante
che appaiono per le azioni contestuali.

Sapete, 'Premere Y per aprire la porta',
'Premere X per entrare nel veicolo',

'Premere E per saltare
nella fossa comune'.

Che?!

Uh.

Ma un'anteprima potrebbe essere anche
un arco

che mostra la traiettoria del lancio
di una granata.

Un indicatore che vi mostra quando siete
nel raggio di un punto d'appiglio.

Un riferimento che vi mostra
a quale nemico state mirando.

O questa linea che vi mostra esattamente
dove andrà la vostra unità in XCOM.

Le anteprime si occupano di dare
al giocatore una dritta

sulle conseguenze delle azioni che
potrebbe intraprendere, prima di farlo.

Questo permette ai giocatori di agire in
sicurezza, e non alla cieca.

Per il caso di studio, rivolgiamoci
a Shovel Knight.

Nella terza campagna DLC, Specter Knight
ha una mossa dash-slash,

che gli permette di tagliare di netto
certi oggetti e balzare dall'altra parte.

Inizialmente, Yacht Club Games aveva
evidenziato questa interazione

con una semplice modifica nella
posa del personaggio,

notando però che non spiegava
adeguatamente quando o dove

potesse accadere questa azione
contestualmente delicata,

o dove sarebbe finito Specter Knight
una volta compiuta.

Alla fine, il team ha applicato
un semplice indicatore

che appare quando
vi avvicinate agli oggetti.

Questo vi dice chiaramente
che il dash-slash avverrà

quando premerete il relativo pulsante,

e vi mostra esattamente dove andrete
quando lo farete.

Il reticolo è stato "il cambiamento più
importante che abbiamo fatto

per rendere comprensibile il dash-slash,"
dicono gli sviluppatori.

Misuratori e anteprime sono quindi
strumenti utilissimi

per dare informazioni ai giocatori,

che si tratti dello stato attuale del gioco
o di un'occhiata al futuro prossimo.

Questo permette ai giocatori di interagire
con sicurezza e comodità,

e di attuare piani
precisi e determinati.

Ma ecco il fatto:

dietro le quinte, i giochi monitorano
centinaia di variabili

e l'UI potrebbe mostrarne
al giocatore a volontà.

E così potreste avere un'anteprima
di ogni azione prima che accada.

Quindi perché i giochi non vi mostrano
tutte queste informazioni?

Beh, come ci sono dei benefici nel rivelare
queste informazioni al giocatore,

ci sono anche dei vantaggi nel tenerne
nascoste alcune.

Pensando in termini di UX design -

con l'UX che è la spina dorsale empirica
e psicologica che sostiene l'UI -

ci si imbatte nell'espressione
"carico cognitivo".

O il fatto che il cervello umano può gestire
solo una certa quantità di informazioni

nella memoria di lavoro.

E quindi più roba mettete a schermo,
più sarà faticoso analizzare il gioco.

L'eye-tracking ci mostra quanto i nostri
occhi debbano sfrecciare per lo schermo

per tenere a mente
tutte queste informazioni.

Di conseguenza, scremare l'UI -

eliminando elementi estranei, ridondanti
o semplicemente ornamentali -

può ridurre il carico cognitivo.

Ma non si tratta solo di sbarazzarsi
di qualcosa.

Anzi, a volte l'UI può dare una mano
con il carico cognitivo.

Se dovete tenere a mente
quanti proiettili avete sparato,

beh, nel bel mezzo dell'azione potreste
perdere il conto

e non sapere se ne avete sparati sei
o solamente cinque.

In questo caso, un contatore di munizioni
è più efficiente.

Si tratta quindi di avere
un layout intelligente

che garantisca che l'informazione a
schermo sia pertinente e facile da capire.

Un modo per farlo è affidarsi
alla gerarchia visiva.

Ovvero usare tecniche come il peso,
il colore, la posizione, la grandezza

e il movimento del carattere per far
risaltare alcuni elementi più di altri.

Se ogni elemento a schermo vi parla
con la stessa intensità,

è difficile sapere su cosa concentrarsi.

E se nulla risalta, l'informazione
cruciale passa inosservata.

Considerate, ad esempio, il pop-up di
sconfinamento in Hitman.

È un avviso di vitale importanza ma in
Hitman 2016 potreste anche non notarlo.

È una semplice etichetta che appare sotto
la mini-mappa nell'angolo dello schermo.

È stato decisamente migliorato in Hitman 2
dove l'etichetta è gialla

e lampeggia per la mappa
per attirare la vostra attenzione.

È ancora meglio in Hitman 3,

dove questo cambio di stato è accompagnato
da un coerente indizio sonoro.

[segnale sonoro]

Per facilitare la riflessione
sulla gerarchia visiva,

il designer Zach Gage parla del principio
delle "Tre Letture",

ovvero tre livelli di informazioni visive,
dalla più alla meno importante.

Zach lo spiega con uno dei suoi giochi:
SpellTower.

La prima lettura saranno gli elementi
principali del gioco:

le lettere che usate
per compitare le parole.

La seconda lettura mostrerà le grandi
regole vitali per il gameplay

come le colonne prossime a farvi perdere
la partita

e le lettere bonus in blu per cancellare
un'intera riga.

E la terza lettura che mostrerà cose meno
importanti come le piccole regole contestuali,

come queste tessere che possono essere
usate solo con le parole più lunghe.

Gli sviluppatori possono classificare le
informazioni in ordine di importanza,

e poi usare il design per assicurarsi
di evidenziare le cose più rilevanti.

E dato che i giochi sono dinamici,

è possibile che le informazioni passino da
una lettura all'altra in momenti diversi.

Zach sottolinea come in Hearthstone ci sia

"un'ondata costante di cose portate alla
vostra attenzione in prima lettura,

che poi retrocedono in seconda
o terza lettura."

Un altro modo per ridurre il carico
cognitivo è porsi la domanda:

"È necessario mostrare costantemente tutti
questi elementi nell'UI?"

Come in Castelvania 1,

dove per qualche motivo potevate vedere la barra
della salute del boss per l'intero livello.

Al giorno d'oggi, compare solamente
quando iniziate il combattimento.

Ma questo principio si può estendere
a quasi tutti gli elementi dell'UI.

In Ghost of Tsushima,

vedrete la vostra barra della salute
solo sfoderando la spada

in quanto rivelante solo in combattimento

e non durante l'esplorazione
generica dell'isola.

Ok. Un'altra ragione per ridurre l'HUD -
che sta diventando sempre più popolare -

è di carattere visuale.

Il desiderio di far apparire i giochi
più cinematografici ed immersivi,

senza rovinare quei begli elementi visivi
tridimensionali con noiosi asset 2D.

Ma chi pensa che l'UI debba apparire noiosa
non ha ovviamente mai giocato a Persona 5.

[♫ Musica da Persona 5 ♫]

Non si tratta semplicemente
di eliminare del tutto l'HUD.

Non è qualcosa che dovrebbe essere fatto
a scapito della leggibilità

o della comprensione.

Si tratta invece di capire come presentare
brillantemente queste informazioni.

Quindi, come in precedenza, gli sviluppatori
possono celare un'informazione

e mostrarla solo quando
è strettamente necessario.

Ma un'altra soluzione è rendere diegetici
gli elementi dell'HUD.

Ovvero quando l'UI esiste effettivamente,
fisicamente, nel mondo di gioco.

L'esempio più popolare è, ovviamente,
Dead Space.

Per testare e aumentare le caratteristiche
immersive di questo gioco survival horror,

Visceral Games ha rimosso l'HUD, inserendo
le informazioni nel mondo di gioco stesso.

Così la barra della salute e il misuratore
di stasi di Isaac

sono integrati nei tubi
e nei misuratori della sua tuta.

Il contatore di proiettili di ciascun arma
è mostrato sull'arma stessa.

Anche elementi come l'inventario

sono rappresentati come proiezioni
olografiche nel mondo.

Possiamo vedere esempi efficaci dello
stesso genere anche in altri giochi.

In Metroid Prime, l'HUD funziona come in
ogni altro sparatutto,

ma inserendolo nel visore
dell'elmetto di Samus,

e facendolo sfarfallare e appannare
in modo realistico,

il vostro senso di presenza e la vostra
connessione col personaggio aumentano.

Ma non si tratta solo di stile
e presentazione.

Rendere diegetiche queste informazioni

può generare interessanti
conseguenze di gameplay.

In Alien Isolation, potete impugnare
un aggeggio

e osservare la lettura
del rilevatore di movimento.

È simile alla mini-mappa di un gioco
come Call of Duty,

ma dato che è uno strumento fisico,

significa che dovete scegliere tra
accedere a questa informazione

o impugnare un'arma.

Non potete avere entrambe.

Un'HUD diegetico non implica solo barre
della salute e contatori di munizioni,

ma anche una rappresentazione brillante
nel mondo di gioco.

Perché se spingete l'idea
ancora più in là,

potete usare degli elementi che
normalmente non immagineremmo come UI

per comunicare la stessa informazione.

Ad esempio, in Wreckfest non avete bisogno
di una barra della salute

per sapere quanto manca
alla demolizione della vostra auto:

potete vederlo dall'auto stessa.

E avete davvero bisogno di un indicatore
per sapere se Link ha troppo caldo

o troppo freddo in Breath of the Wild?

Possiamo risalire fino a
Super Mario Bros.,

dove la salute di Mario è rappresentata
dalla dimensione del suo sprite.

Ok, un'altra ragione per celare l'HUD

è rendere intenzionalmente
il gioco meno decifrabile.

In The Last of Us Part II, i primi nemici
umani che incontrate

esprimeranno a voce alta
le loro intenzioni e i loro piani,

dandovi un'idea di ciò che sta
pensando il nemico

e permettendovi di pianificare
di conseguenza.

Ma in seguito incontrerete una nuova
fazione nemica

che comunica esclusivamente con fischi
striduli e acuti.

[fischio]
[Impatto della freccia] [Ellie geme]

Questi fischi sono volutamente progettati
per essere indecifrabili dal giocatore.

E infatti ho trovato questi avversari
decisamente più minacciosi

e difficili da combattere, in gran parte
per la mancanza di queste informazioni.

Andando oltre, la quantità di informazioni
che abbiamo in qualità di giocatori

cambierà completamente
il nostro comportamento.

Gli sviluppatori di Reigns lo hanno capito
durante lo sviluppo

del loro gioco manageriale
in stile Tinder.

Originariamente, il gioco mostrava
i valori esatti di ogni stat,

e come le vostre scelte
li avrebbero modificati.

Ma nel testing i giocatori
si concentravano quasi esclusivamente

sul tentativo di ottimizzare questi numeri,
ignorando gran parte del testo.

Dopo aver modificato l'UI
con delle barre generiche,

i giocatori hanno ricominciato
a leggere la storia

e ad agire su un livello
più emotivo che analitico.

Penso che questo dimostri

che gli sviluppatori non debbano
necessariamente eliminare l'HUD,

ma quantomeno valutare
la precisione dell'HUD.

Volete che la barra della salute
sia un numero esatto, una misura

o solo una vaga chiazza rossa
al centro dello schermo?

Dipende da ciò che farà il giocatore
con questa informazione.

Serve a calcolare un'esatta differenza

o consiglia solamente di indietreggiare
e trovare un riparo?

Quando si tratta di quegli elementi
d'anteprima dell'HUD di cui ho parlato,

beh, più l'informazione è precisa
e rivolta al futuro,

più specifici sono i piani
che potete fare.

Come in Mark of the Ninja, che mostra
esattamente cosa accadrà

quando lancerete un coltello
contro questo riflettore.

Ma se riducete la futuribilità
di tale informazione,

o la rendete confusa ed imprecisa,

il giocatore è obbligato
ad imparare e interiorizzare

il funzionamento delle
meccaniche di gioco.

Consideriamo Peggle per un istante.

Di default, l'indicatore di tiro vi mostra
dove andrà la pallina,

ma solo fino al primo colpo.

Da lì in poi starà a voi calcolare a mente
la traiettoria di rimbalzo.

Fa parte della curva di apprendimento.

Voglio dire, c'è un modo per spingere
ulteriormente quell'anteprima nel futuro,

ma si tratta di un power-up,

che dimostra quanto può essere potente
questa informazione.

Inoltre, sapete che c'è un brevetto
sul gameplay di Peggle?

Perché sembra che ormai sia
un tema del canale.

E dato che l'UI è così potente,

può essere collegata a cose come
la difficoltà o le modalità assistite.

Pensate ai giochi di corse

che vi mostrano la linea di traiettoria
ottimale in modalità facile,

per poi lasciarvi da soli
a difficoltà maggiori.

L'UI può essere usata per cambiare
la difficoltà di un gioco

tra le varie modalità
o nel corso dell'avventura

proprio come ogni altro elemento
del gameplay.

Penso che tutto questo dimostri

come l'UI possa avere un effetto
davvero potente su un gioco.

E se usata efficacemente,

come l'UI possa supportare e promuovere
gli obiettivi del game design.

E che dire del contrario?

Non il game design che influenza l'UI,
ma l'UI che influenza il game design.

Come ultimo caso di studio,

affidiamoci alla gemma
deterministico-tattica Into The Breach.

Questo gioco vi mostra l'azione che ogni
nemico sta per compiere,

contemporaneamente,
in una piccola griglia claustrofobica.

Il risultato è una complessa ragnatela
di frecce e icone

che offre un quadro completo di ciò
che l'esercito nemico sta pianificando.

Ma lo sviluppatore Subset Games ha scoperto
che per far funzionare questo sistema

alcuni nemici e armi dovevano essere
rimossi dal gioco

semplicemente perché erano
troppo difficili da rappresentare.

Come le armi con una lunga catena
di causa ed effetto

o attacchi nemici che avrebbero
influenzato una vasta area.

Il co-designer Justin Ma dice: "Come
principio di game design,

sacrifichiamo continuamente
delle belle idee in nome della chiarezza."

E non è l'unico gioco in cui è successo.

In Hearthstone, potete avere solo sette
minion in gioco contemporaneamente

perché a schermo non ce ne stanno di più.

E certi Poteri Eroi sono stati modificati

perché erano troppo complessi da mostrare
attraverso gli elementi dell'UI.

In definitiva, se non è possibile chiarire
qualcosa al giocatore

allora forse non è una buona meccanica
di gioco e dovrebbe essere semplificata.

L'UI non è un cerotto per riparare
meccaniche di gioco imperfette,

ed è per questo che è importante progettare l'UI di pari passo con tutto il resto,

invece di raffazzonarla
all'ultimo momento.

Perché come ogni altra cosa
nello sviluppo dei videogiochi,

l'UI non è qualcosa che può essere
fatto arbitrariamente,

o "perché è così che lo fanno gli altri."

Dovrebbe essere concepita
con chiarezza e intenzionalità.

Fatemi sapere quali giochi pensate che
abbiano una UI meravigliosa

nei commenti qui sotto.

È il momento della raccomandazione indie!

Questo è Room to Grow,
un puzzle a griglia

con un cactus che può crescere così da
spingere le piante verso la meta.

Diventa rapidamente complesso mentre
vi muovete lungo il muro

per muovere tutto il vostro corpo spinoso,

con altre altre meccaniche
che andranno poi ad aggiungersi.

È un piccolo gioco fatto con cura, con
molta personalità

e alcune subdole sfide meta-livello.

È disponibile ora su Steam.