Caccia all'interfaccia: Card Thief e la base del contrasto

Finalmente anche io, con il mio consueto ritardo, approdo nel variopinto mondo dei videogiochi per cellulari e affini. Avendo sempre avuto una mezza carcassa di smartphone, non ho mai potuto veramente godermi le gioie del gioco in mobilità. Certo, con la mia amatissima e compianta PS Vita (che ormai sta nella sua custodietta al calduccio) ho passato bei momenti, soprattutto in compagnia di Tearaway, ma era ora di salire di livello e cominciare ad esplorare tutta la bizzarra offerta che il Google Play Store mette a disposizione. Così mi sono buttato su quelli che nello Shelter sono stati i giochi più discussi, ovvero Card Crawl e Card Thief, sviluppati da Tiny Touch Tale. Piccoli capolavori che rivisitano il classico e sempreverde Solitario, sempiterno nemico della produttività, con alcuni accorgimenti che aggiungono pepe e divertimento. Penso sia molto interessante analizzare nel dettaglio l’interfaccia di Card Thief, perché condivide con Card Crawl alcuni difetti (che vedremo alla fine). Quindi è ufficiale: dopo l’acclamata puntata dedicata a Hearthstone (qui) e le due su GRIDD: Retroenhanced (una e due), dichiaro aperta la quarta puntata di Caccia all'interfaccia!

Concentriamoci su Card Thief. La meccanica alla base è molto semplice: il nostro obiettivo è quello di muovere la carta del nostro ladro all'interno di una griglia 3x3, facendo attenzione alle guardie e alle torce, cercando di recuperare più bottino possibile e portando a casa anche il preziosissimo forziere. Inoltre è possibile sfruttare delle carte equipaggiamento, in grado di fornirci bonus ed effetti di diverso tipo, ciascuno utile a modo suo in contesti differenti. Possiamo quindi vedere nello schema qui sopra l’organizzazione dello spazio di gioco di Card Thief:

• al centro (nei riquadri rossi): la griglia di gioco in cui ci sono tutte le carte del mazzo e in cui muoviamo;
• in basso (nei riquadri gialli): il nostro inventario, con le carte speciali equipaggiate; da notare che, per sottolineare il contrasto con la griglia principale, queste carte sono “tagliate” e infilate in una cintura, quindi risultano a colpo d’occhio diverse;
• in alto (nel riquadro verde): a sinistra le carte restanti nel mazzo (dopotutto è pur sempre una variazione di Solitario), al centro gli “incrementi” ai valori di tutte le carte dovuti ai nostri spostamenti, e a destra il pulsante di pausa/opzioni. In questo caso è importante sottolineare che le prime due icone, a sinistra e al centro, hanno un’estetica comune perché fanno entrambe riferimento alle “regole di gioco”, mentre la terza icona si differenzia graficamente in modo sostanziale, suggerendo una funzione slegata dalla partita (anzi, il maggior numero di dettagli suggeriscono una vicinanza allo sfondo e, dunque, una relazione più stretta all'ambiente circostante e quindi all'applicazione in sé).

È dunque importante sottolineare come, molto facilmente, l’interfaccia riesca a suggerire agilmente le funzioni delle diverse aree dello schermo. In particolare, sembra banale, ma è proprio il contrasto a mettere i rilievo le diverse funzioni. Ad esempio il contrasto tra carte intere e carte “tagliate” ricorda che queste ultime sono l’equipaggiamento; anche il contrasto tra le icone nella parte in alto suggerisce funzioni diverse, le prime (carte e incrementi) sono bianche monocromatiche e spiccano sullo sfondo nero, ma sono anche in contrasto con l’icona più elaborata della pausa/opzioni.

La regola del contrasto si applica anche durante il gioco vero e proprio. Ogni carta, infatti, è caratterizzata da un’icona in alto a sinistra, che ne indica la funzione, e da un numero in alto a destra che ne riporta il valore. La combinazione di queste due informazioni discende chiaramente dai semi e dalle carte da gioco classiche, ma a questo si aggiungono le altre icone in basso al centro della carta. Ogni carta riporta in quella posizione le icone delle carte adiacenti che la influenzano in qualche maniera. In questo modo si forma una struttura rigida e ben ripetuta, e ogni interruzione o elemento fuori posto è indice di sospetto. Va notato, infatti, che la carta del giocatore (nelle figure è quella in alto a sinistra) presenta un layout diverso dalle altre: è assente un numero in alto a destra, in alto a sinistra l’icona è accompagnata da un numero, e in basso a sinistra c’è un’altra icona accompagnata a sua volta da un numero. Questo layout spezza la struttura che formano le altre carte, per cui è sempre facile riconoscere a colpo d’occhio il proprio alter ego.

Un’altra trovata molto interessante è la meccanica che ci permette di muovere il nostro ladro sulla griglia. Inizialmente, saranno illuminati i bordi delle carte a noi adiacenti; a ogni nostro movimento si illumineranno solo le carte appena vicine a noi. Senza dubbio è utilissima per suggerire in modo molto naturale al giocatore le azioni da svolgere: non gli viene negata la possibilità di scegliere quale mossa fare, ma può comunque effettuare questa scelta in modo agevolato. A questa meccanica ne viene affiancata un’altra, meno scontata ma non meno importante. Il giocatore può muovere il proprio ladro di carta in carta più volte, senza fermarsi per forza alla prima carta incontrata. In questo modo può tracciare un percorso e, se abbastanza abile, può arrivare a toccare tutte le carte in un solo turno. Il fatto che vengano illuminate solo le carte adiacenti, però, è anche una funzione limitante, e mostra chiaramente al giocatore che non può toccare carte troppo lontane. Viene inoltre in aiuto del giocatore anche una traccia rettilinea, che segna su schermo il percorso del nostro ladro, in modo chiaro e non invasivo.

Infine, Card Thief sfrutta la sua estetica in sola scale di grigi a proprio vantaggio anche per introdurre la meccanica dell’illuminazione. Le torce sono infatti carte particolari che metteranno in piena luce le carte adiacenti, rendendo la vita più facile alle guardie e più difficile a noi ladri. Per mettere in risalto questa meccanica viene sfruttato il contrasto tra bianco e nero, metafore di luce e ombra: le carte illuminate avranno più aree bianche, al contrario quelle in ombra saranno prevalentemente scure. La meccanica luce/ombra si integra perfettamente nel gioco, e la realizzazione tramite contrasto bianco/nero non fa che creare un ambiente ancora più coerente con se stesso e funzionale alla narrazione… pur senza bisogno di grandi spiegazioni! Certo, un minimo di tutorial iniziale è d’obbligo, ma una volta capite le basi, sarà immediato riprendere a giocarci anche dopo lunghi periodi d’inattività.

Abbiamo visto finora come il contrasto sia alla base di una buona esperienza, per mettere in luce elementi e funzioni differenti. Inspiegabilmente però, Card Thief sembra dimenticarsene proprio in uno dei menù di gioco. In particolare i problemi maggiori sono sorti, almeno nel mio caso personale, nella schermata del Maestro di Gilda (Guild Master), dove si organizza l’equipaggiamento e si aprono i forzieri rubati. Nell'immagine a destra ho evidenziato le varie interazioni presenti:

• in alto a sinistra (nel riquadro verde): il classico pulsante di uscita. Facilmente riconoscibile sia grazie all'universale X, sia grazie a due contrasti: un contrasto cromatico (bianco+viola uniformi su sfondo multicolore) e un contrasto “contestuale”, visto che in una schermata piena di rappresentazioni di diversi oggetti fisici, la linguetta viola risalta subito come estranea;
• in alto a destra (nell'altro riquadro verde): il pulsante per andare alla schermata di selezione del livello. Curiosamente ho scoperto l’esistenza di questo pulsante solo dopo diverse ore di gioco. Come mai? La mappa che sembra scendere dal soffitto non riesce a spiccare sufficientemente sullo sfondo. Infatti ci troviamo in una schermata piena di dettagli: libri, lampade, cassettini e quant'altro. In questo contesto ci sembra assolutamente normale vedere una mappa cascare dal soffitto, e ci sembra parte dello sfondo e dunque non interattiva;
• al centro (nel riquadro fucsia): due pulsanti che ci permettono di cambiare la schermata inferiore, scegliendo rispettivamente tra modificare l’equipaggiamento e aprire i forzieri. Questi due tasti sono facilmente riconoscibili, per gli stessi motivi del pulsante di uscita: spiccano sullo sfondo sia grazie ai colori (uniforme vs. eterogeneo), sia grazie al contesto (oggettini reali vs. rettangolo con scritta);
• al centro, sotto (nel riquadro azzurrino): in questo riquadro si trovano le carte equipaggiamento sbloccate, e le bustine che contengono le carte da sbloccare. L’interazione prevista è quella di far scorrere il dito orizzontalmente in quest’area per portare in rilievo le diverse carte di nostro interesse. Quest’interazione, però, non è suggerita in modo esplicito, se non da due piccole frecce ai lati sinistro e destro dello schermo. Il problema è che le bustine si mimetizzano con lo sfondo e, nuovamente, manca un contrasto sufficiente per farle risaltare e suggerire dunque l’interazione prevista. In questo caso, ad esempio, avremmo potuto sfruttare la lezione imparata nella prima puntata di Caccia all'Interfaccia: le animazioni con strumento narrativo. Una soluzione potrebbe essere infatti uno scorrimento automatico delle carte appena si entra nella schermata: questo movimento (se fosse l’unico di questo tipo) potrebbe farle risaltare rispetto alle altre componenti statiche;
• in basso, a destro (nel cerchio rosso): questo pulsante è adibito al potenziamento delle carte equipaggiamento già sbloccate. Purtroppo soffre di due sostanziali problemi: il primo è che non sembra un pulsante, di nuovo per mancanza di contrasto con l’ambiente, e il secondo è che non presenta differenza estetica in assenza o in presenza di possibili upgrade. Mentre la sua “non riconoscibilità” è ininfluente in assenza di upgrade, una volta disponibili nulla ci fa capire che dobbiamo cliccare proprio quel tondo. Una semplice animazione di illuminazione sarebbe di grandissimo aiuto, pur senza sacrificare la coerenza o l’estetica;
• in basso (nel riquadro giallo): qui troviamo le carte equipaggiamento attive. Notate come viene ripresa l’estetica della schermata di gioco, in cui le carte equipaggiamento sono infilate in appositi spazi e sembrano dunque “tagliate”. In questo modo si stabilisce un legame diretto alla fase di gioco, ed è facilmente riconoscibile la funzione di queste carte.

Uno dei modi per capire a “colpo d’occhio” l’efficacia di una comunicazione visiva è quello di guardare il nostro oggetto d’interesse tramite un filtro in bianco e nero. Questo metodo, scoperto grazie alla lettura del recente CROMORAMA di Falcinelli (che consiglio veramente di cuore a tutti, sia agli addetti che ai curiosi), permette di mettere in risalto la luminosità dei vari elementi, così da capire dove il nostro occhio è guidato. Come possiamo vedere nel confronto qui sopra, la schermata del maestro di gilda risulta molto confusionaria, ed è difficile riuscire a identificare le varie interazioni. Notate soprattutto come “scompaiono” le bustine delle carte e il pulsante di upgrade.

Qui sopra trovate il menù principale di Card Crawl, altro titolo di Tiny Touch Games che purtroppo condivide alcuni problemi di Card Thief. Utilizzando il trucchetto del “bianco e nero”, infatti, vediamo subito che la zona centrale risulta carica di contenuti, ma il contrasto non è sufficiente a rendere ben distinguibile ciascun elemento. Certamente le linguette in sovrimpressione ci guidano nella scelta, ma si sarebbe potuto sfruttare un po’ meglio lo spazio a disposizione.

Anche per oggi abbiamo concluso questa puntata di Caccia all'Interfaccia. Cosa abbiamo imparato? Facile: che il contrasto è alla base di una buona comunicazione. Contrasto che può essere di diverso tipo: cromatico, logico, estetico e chi più ne ha più ne metta! Per cui non mi resta che consigliarvi di scaricare Card Thief e Card Crawl, vere meraviglie dell’intrattenimento mobile, tanto che pure la mia ragazza ci si sta inflippando e mi lancia le maledizioni per questo. Alla prossima puntata!