Guida di web design per programmatori: come disegnare un sito web applicando le regole di UX/UI design
Ti avevamo già parlato della differenza tra web designer e web developer; tuttavia, ad oggi, le figure professionali del mondo digital spesso lavorano in una situazione di cooperazione e, perché questo avvenga nella maniera più proficua possibile, anche i web developers (soprattutto i frontend developer!!) necessitano di conoscere almeno i principi basilari dell’UX/UI design, al fine di progettare siti web funzionali.
Con questa guida scoprirai come muoverti quando progetti e disegni il layout di un sito web in soli 10 passi.
Cosa si intende per UX/UI design
È un termine, ad oggi, decisamente inflazionato: ma cosa vuol dire, esattamente, UX/UI design?
L’UX/UI design è un ramo del design che contempla due attori differenti: da un lato abbiamo l’UX designer, appunto, e dall’altro l’UI designer.
Dunque, nonostante si senta sempre più spesso parlare di UX/UI, l’ UI design e l’UX design non sono la stessa cosa; anche se, non di rado, i due ruoli vengono incarnati dalla stessa persona si tratta, infatti, di due ambiti differenti del processo di progettazione del design di un sito web che, tuttavia, operano in collaborazione con il fine ultimo di strutturare l’esperienza che l’utente avrà fruendo il sito nella maniera più ottimale possibile.
Cos'è l' UX design e cosa fa l'UX designer
L’UX design è una parte fondamentale della progettazione, ed è proprio da qui che ha inizio l’intero flusso della progettazione stessa: il focus è quello di progettare per la soddisfazione dei bisogni di chi utilizza il servizio o il prodotto.
L’UX designer cosa fa, dunque? L’UX designer mette in moto una fase di ricerca (User Research), in seguito alla quale potrà analizzare i dati ottenuti e, sulla base di questi, progettare uno o più prototipi “spogli” da far testare all’utente finale per verificare che la navigazione avvenga nel modo più semplice e soddisfacente possibile.
Cos'è l'UI design e cosa fa l'UI designer
L’UI design ha meno a che fare con la parte di ricerca e lavora concretamente sull’interfaccia che visualizzerà l’utente finale.
Cosa vuol dire? L’UI designer non prescinde dalla ricerca ma, sulla base delle informazioni ottenute dal lavoro dell’UX designer, converte il tutto in linguaggio visivo, realizzando la grafica vera e propria della schermata visibile all’utente.
Volendo fare un parallelismo con il mondo dello sviluppo web, (a grandissime linee: l’analogia è, ovviamente, riduttiva rispetto ai compiti di queste figure e a fini puramente esplicativi) è come se l’UX designer fosse il nostro codice HTML, e si occupasse, quindi, dello scheletro e della gerarchia semantica delle informazioni, e l’UI designer fosse, invece, il nostro linguaggio CSS, che si occupa della veste grafica.
Chiarite queste distinzioni fondamentali, andiamo a vedere come disegnare un sito web applicando le regole di UX/UI design!
La prima cosa che dovrai fare per immedesimarti a pieno nel ruolo di UX designer quando dovrai creare un sito web da zero è partire da una fase di ipotesi.
Dovrai fare delle domande al cliente (in gergo, dovrai stilare un “brief”) che servano a:
È proprio a questo punto che devi cominciare a buttar giù le ipotesi: quali informazioni supponi di avere già?
Quali idee hai in merito agli utenti e alle loro necessità?
E come pensi di agire per soddisfarle?
Quali soluzioni hai in mente per la risoluzione dei problemi?
Come ultimo step di questa fase, dovrai analizzare (in maniera preliminare, si tratta pur sempre di ipotesi!!) tutti i metodi dell’ UX design e individuare quali di questi sono applicabili – in base, ovviamente, alle risorse disponibili – per sanare i bisogni emersi.
Ma quali sono i metodi dell’ UX design?
Tranquillo, te li mostriamo noi!
1.2 Quali sono i metodi della User Research
1.2.1 Ricerca quantitativa e ricerca qualitativa in UX design
Questi due tipi di ricerca sono complementari, si intersecano, si alimentano a vicenda, l’una può partire dai risultati dell’altra e non si sostituiscono l’una all’altra poichè hanno finalità diverse;
in particolare
I metodi della ricerca quantitativa
sono, banalmente, quelli che ci permettono di analizzare tutte le cose che sono quantificabili, misurabili con dei numeri.
Solitamente si utilizza la ricerca quantitativa su campioni di grandi dimensioni per delineare tendenze e rispondere a domande come, ad esempio, “dove l’utente si è fermato, nel flusso di navigazione?”, “quanti fruitori si sono fermati nello stesso punto?”.
Può essere utile, per esempio, a valutare il Bounce Rate.
Quali sono i metodi quantitativi?
I metodi della ricerca qualitativa
Sono quelli che, invece, fanno emergere i tratti più “umani” del campione e permettono di analizzare che sentimenti ed emozioni provano gli utenti e i loro pattern mentali: tutto ciò che non è quantificabile.
È utile, ad esempio, per misurare quali contenuti gli utenti preferiscano.
Quali sono i metodi qualitativi?
1.2.1 Ricerca quantitativa e ricerca qualitativa in UX design
I metodi della ricerca comportamentale
sono applicabili quando abbiamo una cronologia da cui attingere: in presenza, cioè, di un sito web già online, già in utilizzo; in questi casi, l’UX designer si deve chiedere che cosa, nella situazione attuale del sito, funziona e cosa no.
E come può capirlo?
Analizzando come si comporta l’utente che naviga su quella piattaforma.
Quali sono i metodi comportamentali?
i metodi della ricerca attitudinale
Sono utili per capire qual è l’atteggiamento dell’utente, i suoi pattern mentali e il suo pensiero rispetto alla user experience attualmente in auge.
È bene sottolineare che l’atteggiamento dell’utente e, dunque, ciò che dice e pensa, spesse volte non coincide con il modo in cui alla fine si comporta:
ecco la differenza sostanziale tra l’oggetto di indagine dei due tipi di ricerca.
Quali sono i metodi attitudinali?
1.2.3 Contesto d’utilizzo
L’analisi del contesto d’utilizzo prevede di raccogliere informazioni inerenti alle modalità in cui gli utenti campione utilizzeranno il sito web (o la piattaforma, in genere) nella ricerca; possiamo distinguere 4 modalità:
Quali sono i metodi dell’analisi del contesto d’utilizzo?
1.3 Come scegliere il metodo di User Research più adatto
Adesso hai ben chiaro in mente quali sono i metodi della User Research, ma, effettivamente, come capire quale di questi utilizzare?
L’ideale, come accennato già in precedenza, sarebbe utilizzare – in maniera ponderata e a seconda della casistica – una commistione di più metodologie.
Nonostante questa premessa, tuttavia, è naturale che i fattori che concorrono alla presa di decisione sono molteplici: prima di tutto occorre avere in mente la tipologia di esperienza utente da sviluppare, ma soprattutto le risorse a disposizione: budget del cliente, tool utili in possesso, grandezza del team di lavoro, limitazioni in termini di tempo come scadenze troppo brevi, ecc.
Tenendo bene a mente questi fattori, non ti resta che orientarti in base ai parametri sopra-citati!
La raccolta dati nell’UX design
Nella fase precedente hai buttato giù delle ipotesi: non dobbiamo essere certamente noi a precisare che non puoi basarti solo su quelle (non avrai mica scordato come funziona il buon vecchio metodo scientifico?), anche perchè rischi che i tuoi
bias cognitivi rovinino tutto il lavoro!
Pensaci: come puoi sapere se il target che hai ipotizzato nella fase precedente è quello giusto?
E come puoi avere la certezza che abbia realmente i bisogni che hai immaginato?
Non serve interrogarsi oltre: avrai già capito che è arrivata l’ ora, quindi, di avere dati empirici su cui lavorare.
Adesso sai come scegliere i metodi adatti, non ti resta che far partire la tua User Research!
Utilizza i metodi scelti e raccogli le informazioni emerse.
PS. Purché si tratti di informazioni aggiornate, puoi anche consultare la letteratura in materia, senz’altro ricca di analisi già esistenti ad aiutarti nella raccolta!
Un esempio per procedere nella raccolta dati, inerentemente, ad esempio, ai questionari, potrebbe essere estrapolare delle frasi dalle risposte degli utenti cui è stato posto il questionario; queste frasi andranno, poi, rielaborate (magari sintetizzate, ma sempre mantenendo fermo il concetto di base e, per quanto più possibile, il linguaggio della persona che ha risposto: rielaborare non deve significare snaturare la risposta!) per vedere se ci sono dei modelli comportamentali che tornano.
Distinguiamo, poi, tra queste, le cose che sono positive o che rappresentano un’ abitudine, e quelle che sono negative; a questo punto potremo procedere con il terzo step e andare a delineare le Personas.
A questo punto cominciamo a fare sul serio: preparati, stai entrando nel vivo del tuo viaggio nel mondo dell’ UX/UI design!
Dati alla mano, non ti resta che analizzarli e provare a rispondere alle domande che avevi posto, all’inizio del tuo viaggio, al cliente.
Le risposte sono le stesse che avevi ipotizzato?
Che la risposta sia affermativa o meno, adesso dovresti sapere perfettamente:
3.1 Delinea le User Personas
Cosa sono le User Personas nell’ UX design
Una volta in possesso di queste informazioni, per rappresentare la tua target audience, dovrai delineare le User Personas.
Le User Personas (letteralmente traducibile con “personaggi”) sono delle rappresentazioni del nostro target di riferimento che cercano di essere affidabili e realistiche, nonostante siano “inventate” (attenzione: vengono create sempre basandosi su informazioni reali emerse con la ricerca e non sono MAI frutto di voli pindarici e preconcetti inconsci del designer!)
Le User Personas rappresentano, in altre parole, l’utente ideale di ciascun gruppo in target.
Per delineare le User Personas occorre essere incredibilmente specifici, poichè rimanendo troppo generici potremmo incorrere nell’abbracciare, all’interno dello stesso target, persone e personalità opposte (che, tuttavia, hanno delle cose in comune): per questo va delineata una Personas per gruppo di target emerso, magari uno antitetico all’altro.
Bisogna fare attenzione, inoltre, nella creazione delle Personas, a non lavorare eccessivamente per stereotipi: un esempio?
Ti verrà facile pensare che i vegetariani non mangino pesce: insomma, è carne anche quella, no?
Eppure, potresti stupirti nel venire a conoscenza del fatto che esistono vegetariani che il pesce lo mangiano eccome!
È per questo motivo che occorre basarsi sulle informazioni realmente emerse dalla User Research e non soffermarsi a procedere pensando a come la nostra mente elabora l’utente medio: la realtà è piena di diversità!
Che cos’è una User Journey nell’UX design
Ricapitolando, a questo punto hai delineato i gruppi di utenti in target e le relative User Personas, quali sono i reali problemi che dovrai risolvere e con quali funzionalità del sito poterlo fare; qual è lo step successivo?
Adesso dovrai Immaginare come le Personas interagiranno con il prodotto o il servizio che stai progettando, descrivendo quali sono i passi principali per raggiungere
l’ obiettivo e, soprattutto, focalizzandoti sui sentimenti e sulle emozioni della Persona durante il processo.
Tutta questa visione circa il viaggio che la Persona compirà nell’utilizzare il tuo sito web viene definita “User Journey”
Come realizzare una User Journey nell’UX design
Proviamo a darti qualche consiglio utile per disegnare l’User Journey facendoti un piccolo esempio:
potremmo immaginare un utente che, all’ora di pranzo, ha fame ma è a lavoro e non può cucinare; a questo punto, l’utente deciderà di ordinare del cibo; poi, l’utente aprirà la tua applicazione; a questo punto, l’utente ricercherà, nella barra di ricerca, del sushi; poi? Cosa succederà? Potrebbe essere che l’utente scelga di ordinare dal ristorante di sushi più vicino, così come che scelga, invece, quello con più recensioni positive o, ancora, che scelga semplicemente in base a quanti soldi aveva ipotizzato di spendere per quel pranzo; e via discorrendo.
Come potrai notare dall’esempio, lo User Journey è utilissimo per capire cosa pensa e cosa prova la persona durante il processo e ti aiuterà a definire i punti focali su cui agire e a delineare, dunque, tutte le soluzioni ai possibili problemi in cui il fruitore “inciamperà” nel corso della sua esperienza, nonché a definire sempre meglio la lista delle funzionalità che dovrà avere il tuo sito.
PS. Puoi realizzare uno storyboard per rappresentare meglio la User Journey!
Ti aiuterà, senza ombra di dubbio, a visualizzare meglio le azioni dell’utente all’interno del contesto in cui si trova, all’interno dell’ambiente vero e proprio in cui agisce e agli stimoli che ha intorno: tutti dettagli che magari, ipotizzando, non avresti considerato.
Dopo lo step dello User Journey sei stravolto: non hai mai avuto le idee così chiare in vita tua! Eppure ci sono ancora ulteriori step che possono aiutarti prima di passare alla parte un po’ più pratica.
È giunto il momento, infatti, di disegnare uno User Flow.
Che cos’è lo User Flow?
Lo User Flow nell’UX design è la visualizzazione del processo di come l’utente interagisce con il nostro sito web; per visualizzarlo al meglio utilizziamo i diagrammi di flusso che hanno delle freccette direzionali che fanno capire il senso del flusso; questi diagrammi conterranno vari elementi: l’ inizio, la fine, i punti di scelta: tutte queste situazioni vengono rappresentate per capire quali percorsi l’utente compie sul sito.
Questo ragionamento in modalità “Flow Chart” non ti sarà affatto nuovo se sei un programmatore informatico: è lo stesso tipo di ragionamento che si attua per istruire gli algoritmi!
Insomma, disegnando lo User Flow avrai finalmente una visione cristallina di tutte le azioni degli utenti sul tuo sito.
A questo punto c’è un’ultima cosa a cui devi pensare: progettare l’architettura delle informazioni.
Devi pensare, cioè, a come devono essere organizzate le informazioni del sito, creando una gerarchia dei contenuti e strutturando una navigazione logica: dove devi disporre gli elementi?
Come devi collegarli tra loro?
Ci raccomandiamo: nell’attuare questa operazione, l’obiettivo deve essere sempre una navigazione facile e ottimale per l’utente!
Sei finalmente nella fase di ideazione, durante la quale devi esplorare idee di design creative che possano risolvere i problemi dell’utente emersi nelle fasi di analisi precedenti: la generazione di idee può spaventare, soprattutto se sei uno sviluppatore web e non ti consideri particolarmente “creativo”.
In realtà – e questo ti stupirà – le idee non vengono stando li a pensare per ore ed ore fino allo stremo delle nostre forze.
Proviamo a spiegarti in maniera semplice come avviene la generazione di una nuova idea.
Ognuno di noi ha all’interno del suo cervello delle conoscenze, più o meno approfondite, inerenti agli ambiti più disparati, che puoi immaginare, per comodità, come dei pin di geolocalizzazione.
Cosa facciamo per produrre una nuova idea?
Cerchiamo di creare connessioni tra questi pin, che abbiano un senso, un valore, un perchè.
Certamente, se i pin sono molto vicini sarà più facile: in quel caso è possibile che l’idea sia un po’ banale (ma attenzione, non è detto che non sia funzionale!).
Se invece creiamo una connessione di valore tra due pin che si trovano agli antipodi, beh.. probabilmente l’idea a cui abbiamo pensato sarà brillante.
Adesso immagina di moltiplicare quei pin: aumentano, in proporzione, anche le possibili connessioni!
Quei pin possono aumentare, ovviamente, continuando ad esplorare, facendosi muovere dalla curiosità, approfondendo e analizzando tutto ciò che ci circonda e ci stimola (o, naturalmente, tutto ciò che è inerente al settore del cliente).
Un altro modo di aumentare quei pin, però, è quello di lavorare in team.
Se lavoriamo in un gruppo, la produzione di idee sarà particolarmente proficua, perchè le conoscenze pregresse di ogni membro del team saranno utilissime alla generazione di nuove connessioni tra i pin. Quello che andremo a fare sarà il cosiddetto brainstorming.
Sicuramente è un termine che avrai già sentito, ma ti rinfreschiamo la memoria:
il brainstorming è una tecnica (anzi, come vedrai, si parla di più tecniche) creativa per generare idee “su richiesta”.
Nonostante nell’immaginario collettivo il brainstorming sia, appunto, un’attività di gruppo, ci sono diverse tecniche per praticarlo anche se stiamo lavorando da soli.
Per uno sguardo rapido ad alcune tecniche di brainstorming (individuali o collettive) ti rimandiamo al blog di Grafigata!
Anche se nella fase precedente ti sono venute in mente delle idee di design eccezionali, dovrai tenerle un attimino ancora per te perchè, a questo punto del percorso per realizzare il layout del tuo sito web seguendo le regole di UX/UI, dovrai si, mettere le mani in pasta (finalmente!!) ma in una maniera alla quale probabilmente non avevi pensato.
Quello che devi fare, adesso, è realizzare un wireframe.
Che cos’è un wireframe nell’UX design
Un wireframe in UX design, è quello che viene definito un prototipo a bassa fedeltà.
In questa fase si crea una versione iniziale del sito che sia “spoglia”, priva di grafica, che permetta di visualizzare in maniera abbozzata, come fossero sketches, come apparirà lo scheletro del tuo sito (in questo punto ci sarà bisogno di un pulsante, in quest’ altro delle cards, e così via); durante questo processo dobbiamo cimentarci per semplificare il più possibile le cose all’utente: meno step possiamo fargli fare per raggiungere il risultato, meglio sarà; dobbiamo, ancora, assicurarci che non ci siano “punti di non ritorno” perchè magari abbiamo dimenticato di inserire un bottone, e via discorrendo.
Un tool particolarmente utile nella fase di wireframing è Miro, una piattaforma online costituita da una sorta di “lavagna” con la quale condividere il lavoro con i membri del team e poter lavorare anche in simultanea, molto utile anche nella fase di brainstorming!
Che cos’è un prototipo nell’UX/UI design
Il prototipo – che è, ovviamente, interattivo – serve a far vivere l’esperienza all’utente: serve a vedere, quindi, se le idee che avevamo progettato funzionano concretamente nella realtà.
Ma occhio, un prototipo serve a testare il prodotto, non a lanciarlo effettivamente nel mercato, perchè non sappiamo ancora se la nostra idea funziona e potremmo dover riformulare, correggere o addirittura ripensare alcune cose.
La realizzazione di un prototipo richiede, ovviamente, del tempo, ed è per questo che esistono due tipologie di prototipi:
Nonostante nella teoria le due cose vengano distinte in due momenti separati, la verità è che nella pratica, ad oggi, spesso wireframe e mockup siano quasi una cosa che procede in simultanea (e spesso il wireframe ad oggi è anche evitabile, occorre solo se si ha necessità di far vedere in tempo brevissimo ciò che si sta facendo).
8.1 Come realizzare un prototipo in UX/UI design
I tool per creare un prototipo nell’UX/UI design
Partiamo col dire che esistono diversi tool per la prototipazione del tuo sito web e citeremo, in questa sede, quelli che vanno per la maggiore e che sono, ad oggi, tra i più utilizzati.
I tool che ci sentiamo di consigliarti in prima persona per la prototipazione del tuo sito web sono tre:
Come accennato, possiamo etichettare questa triade di strumenti come i tool più in linea con le scelte aziendali al giorno d’oggi e, quindi, se il tuo obiettivo è entrare in azienda può essere una buona idea allinearti ed imparare ad utilizzare proprio uno dei tre.
Ovviamente esistono delle alternative e la scelta del tool da utilizzare resta strettamente soggettiva e personale.
Comincia a sperimentare!
Ci siamo: finalmente potremo sottoporre il nostro duro lavoro agli utenti.
Per valutare quanto funzionale e di facile fruizione sia il nostro prototipo dobbiamo, adesso, condurre dei test di usabilità con gli utenti, entrando nella cosiddetta fase di User Testing.
Questa fase ci consentirà di raccogliere feedback per individuare eventuali problemi e andare a risolverli prima ancora che il sito sia online!
9.1 User Testing: come fare un test di usabilità
Potresti pensare di dover far testare il tuo prototipo a centinaia di utenti: la verità è che, se i test sono condotti come dovrebbero, il numero di utenti ottimale è pari a 5.
Ma, di preciso, come dovrebbero essere condotti?
Vogliamo darti alcune tips utili per condurre al meglio questi test.
Ora che hai tutti questi elementi e hai verificato che il tuo sito garantisce una navigazione funzionale, puoi finalmente svilupparne l’interfaccia grafica seguendo le regole della comunicazione visiva!
Anche qui, vogliamo darti qualche consiglio utile.
UI Design: come creare un'interfaccia utente efficace
Quando ci approcciamo alla creazione effettiva di un’interfaccia grafica, dobbiamo sempre tenere presente che la chiave deve essere la semplicità: dobbiamo cercare di rendere ciò che potrebbe essere complesso quanto più comprensibile possibile per l’utente finale.
L’obiettivo deve essere permettere all’utente di raggiungere il suo obiettivo con il minor sforzo possibile: l’utente non deve pensare, deve agire nella maniera più naturale possibile.
UI design: i principi fondamentali per una corretta interfaccia grafica
Alcuni principi base della comunicazione visiva
Ci sono, inoltre, dei principi basilari della comunicazione visiva – in genere – da considerare nella creazione di un’interfaccia grafica performante, che proviamo, ora, a declinare nel caso specifico dell’ UI design:
Letture interessanti: i libri imperdibili per un UI/UX designer
Non potevamo che concludere questo excursus con una lista di libri must-have per ogni UI/UX designer ma anche per ogni web developer (o aspirante tale!) che sia abbastanza desideroso di realizzare siti web altamente performanti e di piacevole fruizione:
Sei pronto a iniziare questa nuova avventura?
Adesso sei pronto per creare il tuo primo sito web applicando le regole dell’ UX/UI design!
Speriamo che questa guida possa esserti stata di aiuto e possa aver stimolato la tua curiosità e il tuo interesse verso questo mondo.
Naturalmente, si tratta di un’infarinatura e i temi trattati possono essere approfonditi.
Non vedi l’ora? Perfetto!
Abbiamo strutturato per te un corso di Web Design
Cosa aspetti? Iscriviti!
