Share
Quanto è facile per il tuo giocatore mettere in pratica le loro intenzioni o per capire cosa sta succedendo nel tuo gioco? In questo tutorial, imparerai come costruire un'interfaccia utente migliore esaminando sia gli esempi buoni che i cattivi dai giochi esistenti e finirai con una lista di domande che ti guiderà nella progettazione di questi.
A proposito, se stai cercando un posto dove iniziare, puoi trovare una miriade di risorse di gioco ben progettate su Envato Elements.
Risorse di gioco su Envato Elements Come giocatori e sviluppatori di giochi sappiamo che l'immersione è tutto. Quando sei immerso, perdi la cognizione del tempo e prendi parte a ciò che il gioco presenta. Un fattore importante in ciò che rende o rompe l'immersione è la facilità con cui il tuo giocatore converte un'idea in un'azione di gioco, cioè quanto sia fluida l'esperienza utente (UX) del tuo gioco e quanto sia ben progettata la sua interfaccia utente (UI) è. Un gioco fa male se fornisce troppe informazioni o troppo, richiede troppi input, confonde il giocatore con prompt inutili o rende difficile per un nuovo giocatore interagire. La scarsa progettazione dell'interfaccia utente può addirittura interrompere completamente il gioco.
In questo articolo non ti insegnerò come mettere insieme un'interfaccia utente. Invece, mi concentrerò su ciò che rende l'interfaccia utente ben progettata o mal progettata, e su come applicare questo pensiero al tuo gioco. Esaminerò il design di UI e UX come una serie di obiettivi che sono tanto importanti e precisi quanto qualsiasi altra parte del tuo gioco, usando esempi di giochi che sbagliano e giochi che lo fanno bene.
I termini UI e UX a volte sono usati (erroneamente) in modo intercambiabile, ma hanno significati specifici.
UI, o Interfaccia utente, si riferisce ai metodi (controllo della tastiera, controllo del mouse) e alle interfacce (schermata di inventario, schermata della mappa) attraverso cui un utente interagisce con il gioco. UX, o L'esperienza utente, si riferisce a quanto intuitive e divertenti sono quelle interazioni.
Per guardarlo in un altro modo: l'interfaccia utente di una macchina è il suo volante, i suoi pedali, i quadranti e i comandi sul cruscotto; la UX della vettura proviene da beni immateriali come il pedale del freno che reagisce bene, il motore che si accelera dolcemente quando calpesti il gas, avendo la leva del cambio appena la giusta quantità di resistenza - quelle cose che rendono la macchina piacevole da guidare.
In parole povere, il ruolo di una buona interfaccia utente è quello di fornire informazioni pertinenti in modo chiaro e rapido, e di togliersi di mezzo una volta che ha fatto il suo lavoro. Se prendi solo un po 'di informazioni da questo tutorial, lascia che sia questo:
Una buona interfaccia utente ti dice cosa devi sapere e poi ti toglie di mezzo.
Possiamo andare oltre e ridurre il processo di progettazione dell'interfaccia utente a sei domande fondamentali:
Fai spesso queste domande mentre progetta e fai il tuo gioco. Il mondo del design dell'interfaccia utente è un mondo infinito di pignoli, ed è una delle poche aree di sviluppo del gioco in cui va bene ossessionare.
Un buon esempio è Fallout 3's Pipboy - o, più specificamente, la breve animazione del tuo personaggio che solleva il Pipboy all'altezza degli occhi ogni volta che accedici:
L'animazione dura solo mezzo secondo, quindi non ci si può pensare molto. Ma guarda come sfida la pazienza dei tuoi giocatori dopo averlo affrontato innumerevoli volte nel corso di una partita di 80 ore. Non concludere mai che il tuo giocatore si "abituerà" a fare qualcosa in modo non ottimale. Non faranno che ribaltare la tua mancanza di senso del design.
Credo che il modo migliore per imparare il design dell'interfaccia utente sia creare siti web. Risorse sorprendenti come Alertbox di Jakob Nielsen esistono per darti quante più informazioni vuoi su cosa rende l'interfaccia utente facile da usare, come le persone interagiscono con il software e così via.
Nota dell'editore: E c'è sempre il nostro sito sorella Webdesigntuts + ...
Al centro di ciò che rende una buona interfaccia utente usabilità, un attributo che incorpora le risposte alle sei domande fondamentali menzionate in precedenza. C'è molto altro da dire sull'usabilità e sulla possibilità di rendere utilizzabile la tua interfaccia, e io lascio a te la scelta alertbox e trova le parti che sono rilevanti per la tua esperienza.
Molti programmatori sono spaventati dal creare interfacce utente perché ritengono che questo sia un lavoro creativo, meglio lasciarlo a qualcuno come un artista che ha una migliore comprensione della presentazione. Eppure il design dell'interfaccia utente è un processo in gran parte logico, perfettamente accessibile a uno sviluppatore.
In effetti, credo che il programmatore (o il direttore creativo, o chiunque nella tua squadra abbia il ruolo più diretto nel plasmare l'esperienza di gioco del tuo gioco) dovrebbe essere responsabile della creazione dell'interfaccia utente, poiché sono loro che conoscono il gioco all'interno e fuori, e che sanno quali informazioni sono importanti e quali sono secondarie.
Dovrebbero concentrarsi sugli aspetti funzionali dell'interfaccia utente: quanto è grande, lo fa (o dovrebbe) scorrere, quali informazioni vengono visualizzate e dove e come il giocatore naviga attraverso di esso. Prendilo in due o tre colori e non affidarti mai solo alle variazioni di colore per trasmettere informazioni. Per lo meno, eseguilo tramite ColorOracle o Coblis per assicurarti che le persone daltoniche non vengano perse.
Prima di addentrarmi in questo, è importante capire che quando parlo di cattive UI, faccio quel giudizio basato sulle idee e sui comportamenti che porto ad esso come un giocatore di PC che gioca con una tastiera e un mouse.
La scelta di input da parte dell'utente è estremamente rilevante per l'esperienza dell'utente, sebbene non sia l'intera storia. Qualcuno che è abituato a un'interfaccia touch sta trovando l'interfaccia di un pulsante scomoda, ad esempio, ma un'interfaccia pulsante ben progettata sarà ancora facile da capire e prevedere.
L'interfaccia utente di Oblivion è un classico esempio dell'interfaccia utente di una piattaforma che è incompatibile con un'altra. Anche se Oblivion è stato trasferito da console a PC, ha mantenuto l'interfaccia utente orientata al controller. Questo è completamente analogo al rilascio di un gioco su iOS o Android e il giocatore muove un cursore sullo schermo come se stessero usando il trackpad del portatile invece di sfruttare il posizionamento tattile assoluto.
Quindi cosa rende l'interfaccia utente di Oblivion così brutta? È una combinazione di spazio sprecato, ridimensionamento improprio e controlli inappropriati.
Spero che tu sia bello con la visualizzazione di sei articoli alla volta; queste finestre non sono regolabili. La parte effettiva del menu che trasmette le informazioni pertinenti, ad esempio il contenuto del tuo inventario, utilizza solo il 21,7% dello spazio totale dello schermo con una risoluzione di 1920x1080.
Usare solo un quinto di uno schermo non è poi così male: puoi fare molto in quello spazio. Il vero problema è che il font e le icone hanno il doppio della dimensione di cui hanno bisogno per essere visualizzati su un monitor PC, e ciò limita notevolmente il numero di elementi che possono essere visualizzati.
Una vista di lista lineare significa anche che si tende a fare molto scorrimento, e l'interfaccia a schede nasconde tutto da te. Controllando gli effetti di stato è necessario fare clic sulla scheda Magic, andare alla sottoscheda Effetti, quindi scorrere l'elenco. Una cosa è nascondere le informazioni usate raramente come le statistiche dei personaggi dietro le schede, ma completamente diverse per nascondere informazioni importanti come quello che sta drenando la tua salute mentre vai in giro.
Anche l'oblio manca scorciatoie. Non c'è il pulsante Mappa per visualizzare la mappa; devi fare clic sulla bussola per visualizzare la scheda Mappa. Non ci sono chiavi Quick-Sell o Sell Stack; devi far funzionare il cursore della quantità con il tuo mouse e confermarlo cliccando o premendo Invio. Non c'è un pulsante standard per uscire da una finestra (Fuga nella maggior parte dei giochi), quindi uscire da finestre diverse è possibile premendo E, Tab, Escape o qualche altro tasto.
Il seguito, Skyrim, avrebbe continuato a risolvere alcuni di questi problemi, ma alcuni rimarrebbero o sarebbero peggiorati. In realtà sono rimasto bloccato la prima volta che ho aperto un baule in Skyrim: Escape non mi ha fatto uscire da quella finestra; la chiave di inventario non mi ha tirato fuori; provare a usare di nuovo il forziere non mi ha fatto uscire. Non c'era nessun pulsante su cui fare clic per uscire o richiedere che ti dicesse cosa fare. Cliccando fuori dalla finestra non ha funzionato. Indovina quale chiave finalmente mi lasci uscire dal petto? Sheathe / Ready Weapon, ovviamente.
I menu di Far Cry 3 sono davvero scomodi per gli utenti di PC. A volte non risponde ai clic quindi devi fare clic tre volte; i menu possono richiedere del tempo per essere caricati; non è davvero efficiente in termini di spazio: sai già l'accordo.
È stato patchato, quindi mi concentrerò sullo stato del suo HUD in-game quando è stato rilasciato per la prima volta. Iniziamo con uno sguardo all'HUD nel suo predecessore, Far Cry 2.
Questo è ciò che vedi la maggior parte del tempo. Cose come gli indicatori di salute e il conteggio delle munizioni sfumano dentro e fuori quando ne hai bisogno, ma in generale l'HUD ti lascia in pace.
Adesso guardiamo Far Cry 3L 'HUD.
Far Cry 3L 'HUD non lo fa lasciarti solo. Ho difficoltà a mostrarlo in screenshot o video; è solo qualcosa che si prova come un giocatore che continua a farsi sussultare nella realtà. Crea un sentimento claustrofobico.
La minimappa è grande e opaca, quindi ti ostacola. Il promemoria obiettivo in alto a sinistra è anche grande e opaco e si mette sulla tua strada, e anche se scompare dopo pochi secondi ha la tendenza a riapparire proprio mentre stai per iniziare a dimenticare che stai giocando. Quando vieni colpito, gli indicatori di successo appaiono vicino al centro dello schermo dove si intromettono di nuovo, invece di apparire ai bordi dello schermo come in ogni altro gioco. Se raccogli abbastanza ingredienti per la lavorazione, sulla destra comparirà un'altra grande finestra opaca per farti sapere che puoi creare qualcosa di nuovo.
Ogni volta che appare uno di questi pop-up, fa scattare il giocatore fuori dal divertimento che stava facendo e ricorda loro che stanno usando il software. L'eccesso di informazioni ovvie fa pensare che il gioco non abbia fiducia nel giocatore. La patch ti consente di disattivare la peggiore di queste funzionalità HUD, ma la minimappa è ancora lì ei menu sono ancora scomodi per l'interazione con mouse e tastiera.
Ma non passiamo tutto questo tempo a parlare di cattive UI. I grandi esempi di interfacce utente provengono da giochi che riconoscono i limiti e i punti di forza dei loro sistemi.
La maggior parte dei giocatori di PC concorda sul fatto che Morrowind (il predecessore di Oblivion) ha una delle migliori interfacce per PC in circolazione - tranne per un problema di cui parlerò di seguito.
Andiamo oltre gli elementi di base di questo schermo.
Cosa significa questa interfaccia utente per il lettore PC? Quasi tutto è letteralmente un clic di distanza. Se vuoi vedere le tue abilità scorri la finestra dei personaggi. Se vuoi equipaggiare qualcosa, trascinalo sulla tua bambola di carta. L'interfaccia è veloce e accessibile, e quasi ogni tipo di oggetto nel mondo ha un'icona di inventario unica, quindi trovare il tuo Journeyman Hammer richiede mezzo secondo di guardare il tuo inventario accurato e scalabile.
L'unico dettaglio che consente a questa interfaccia utente è il fatto che pozioni e pergamene riutilizzino le icone di inventario; ci sono icone uniche per la qualità della pozione, ma non per il suo effetto, quindi una pozione Master Water Breathing appare come una pozione Master Restore di fatica.
L'immissione di testo con un controller è scomoda nel migliore dei casi e dolorosa nel peggiore. Non puoi muovere le dita direttamente su un tasto, devi premere il pulsante a modo tuo, creando molti movimenti e azioni inutili.
Oltre il bene e il male eludere tutto ciò implementando ciò che è comunemente accettato come il migliore schema di input di testo della console di sempre: un nastro infinito con lettere e numeri disposti su di esso in ordine. Il nastro scorre velocemente e senza indugio, fornisce un feedback acustico costante ed è reattivo alle regolazioni. È un mistero il motivo per cui altri giochi non hanno seguito il suo esempio.
Beh, sono stato un po 'ingiusto. Altre schermate di immissione del testo in stile tastiera consentono di tenere premuto una direzione e scorrere tutti i tasti in sequenza, ma spesso hanno un ritardo prima che inizi a scorrere a piena velocità o non scorrano abbastanza velocemente. (Ricorda la domanda fondamentale: "Devo mai aspettare che l'interfaccia carichi o riproduca un'animazione?")
Homeworld ruppe terreno nel 1999 per essere stato il primo RTS con un vero movimento tridimensionale. Essere in grado di spostare unità lungo tre assi è stata una nuova sfida di design, e Homeworld è stato assolutamente consegnato con stile ed eleganza. Il problema: come rappresentare il movimento 3D su un piano 2D (il tuo monitor).
La soluzione: in primo luogo, affrontare il tradizionale piano orizzontale a cui i giocatori sono abituati.
Quindi, gestisci il piano verticale extra.
Lo schermo di movimento fornisce anche al giocatore alcuni strumenti sottili ma potenti:
Crusader Kings 2 è il tipo di gioco complesso a più livelli che ti fa sentire stupido. Tuttavia, la sua interfaccia fa del suo meglio per aiutarti attraverso tutto. In primo luogo, ci sono molte caselle di Aiuto che appaiono finché non ti senti abbastanza a tuo agio con quella parte del gioco per dirgli di smettere. In secondo luogo, c'è questa meravigliosa caratteristica. Diciamo che voglio sapere che cosa rappresenta un'icona di monete; Mi limito a passarci sopra e BAM!
È apparso un suggerimento selvaggio! Il gioco mi dice cosa chiamare l'icona delle monete, mi dà l'informazione pertinente e mi dice anche come sono organizzate tali informazioni. Puoi farlo con qualsiasi altro elemento del gioco, e il tooltip appare velocemente, quindi non devo aspettare.
Potresti dare un'occhiata a questo e dire "Duh, i tooltip sono sempre stati in circolazione, ovviamente uno dovrebbe saltar fuori quando passo il mouse su qualcosa". Basta tenerlo a mente, come è facile dimenticare.
Un posto in cui è particolarmente facile dimenticare le descrizioni dei comandi è nei menu frontali del gioco. Ecco il suggerimento Vsync nel menu A Valley Without Wind's Options.
Ecco il suggerimento Vsync in Half Life 2: Episodio 2Il menu Opzioni.
Veramente utile. La maggior parte dei giocatori di PC che si aggirano nelle opzioni grafiche avanzate sapranno cosa è VSync, ma posizionare un suggerimento è solo educato - purché sia un tooltip utile e non uno che legge "Attiva o disattiva VSync".
Lo schermo della città di Civ 5 è un ottimo esempio di come rendere rapidamente disponibili le informazioni.
Questo schermo unico ti dice: lo stato economico e culturale di tutto il tuo impero; la produzione di questa città, compresa la crescita della popolazione (e la crescita dei confini se la lista di edifici è crollata); le unità e gli edifici disponibili per questa città e quanto tempo ci vorrà per costruirli; lo sprawl della tua città, così come le tessere delle risorse al suo interno e quali tessere stanno attualmente lavorando; gli edifici già costruiti al suo interno e un pannello di gestione Citizen collassato in cui è possibile passare a diversi profili di allocazione dei lavoratori per specializzare l'output di questa città.
Puoi anche spostare i lavoratori tra le tessere direttamente sulla mappa della città, mettendo tutto questo spazio sullo schermo a buon uso.
Ridefiniamo le sei domande fondamentali del design dell'interfaccia utente come sei linee guida generali:
La progettazione dell'interfaccia utente è un lavoro logico che non dovresti avere paura di fare. Presta attenzione ai giochi che giochi, prendi nota di come presentano le informazioni e di come ti senti. Prendi nota delle cose che fai ripetutamente e come potrebbero essere migliorate. Cerca le informazioni che fungono solo da decorazione e considera ciò che vorresti sostituire con. Presta attenzione alle cose che ti confondono. E, infine, avere sempre qualcuno che mette alla prova il tuo gioco di fronte a te. Dì loro come eseguire il gioco, quindi osserva in silenzio e resisti all'impulso di guidarli. È abbastanza umiliante.
Accentsconagua