Il processo creativo completo di UX Design in 14 fasi

Qual è il processo creativo quando si fa un lavoro di UX? Quali sono i passaggi più comuni di un progetto di User Experience Design?

Negli articoli precedenti abbiamo parlato di che cos’è la User Experience, di come diventare UX Designer e di come pensa uno UX Designer.

Ma Oggi vedremo insieme come si dovrebbe affrontare la creazione di un prodotto digitale seguendo il processo creativo di UX nella sua interezza.

Il processo completo della User Experience

Quello che io sto chiamando “processo completo” non è un’equazione universale, né uno schema riconosciuto e approvato da un ente internazionale.

Gli step che elencherò sono un canovaccio di massima: alcuni designer li alternano in maniera differente, oppure ne aggiungono altri, oppure li accorpano, o ancora ripetono i precedenti in numerose iterazioni (a questo proposito ti consiglio di approfondire il concetto di Lean UX).

Il mio obiettivo è farti comprendere la logica del processo UX in modo che tu possa iniziare ad approcciarvi ai progetti in maniera più consapevole.

Vediamo subito gli step:

1. Intervista ai clienti/parti interessate (stakeholder) in fase di Brief

Il Design Brief è una fase del processo creativo comune a tutti gli ambiti del design.

Per approfondire: guida per designer alla creazione di un design brief.

Si inizia sempre da qua ed è un momento molto delicato: spesso il cliente non ha le idee chiare, un po’ perché non è facile averle chiare, un po’ perché potrebbe non avere le competenze di un progettista. Un’ottima pratica è quella di non “subire” il brief passivamente ma di fare domande molto specifiche a tutte le persone lato cliente che avranno a che fare con il progetto: il Direttore Marketing, il Project Manager, i vari soci, gli investitori, ecc.

La nostra priorità in questo momento è conoscere in particolare:

• Gli obiettivi di business;
• Chi sono i loro utenti e cosa sanno di loro;
• Qual è la loro storia pregressa;
• Chi sono i loro competitor.

Perché tutte queste informazioni?

Noi dobbiamo essere certi che tutte le persone coinvolte lato cliente abbiano gli stessi obiettivi e che questi siano chiari, sia a loro stessi che a noi. Non ci possiamo permettere di iniziare a lavorare e scoprire successivamente che uno dei soci aveva in mente una cosa, l’altro una del tutto diversa, l’altro ancora non era stato capace di spiegarsi bene.

Quali sono gli output di questa fase?

Otteniamo un Brief chiaro e approvato da tutti; sappiamo con certezza cosa il cliente vuole ottenere e quali sono gli utenti a cui vuole rivolgersi.

2. Analisi degli obiettivi (business goal)

Una volta raccolte tutte le informazioni preliminari, poniamoci queste domande: gli obiettivi del cliente sono realistici? Possiamo aiutarlo a raggiungerli? In generale, hanno senso?

In particolare concentriamoci sui Business Goal.

Quale ritorno desidera il cliente? Più vendite? Più visualizzazioni? Una maggiore brand awareness? Insomma, per quale motivo ci sta pagando? E a quali condizioni sarà soddisfatto?

Gli obiettivi ci possono già dare dei campanelli di allarme.

Se il cliente vuole maggiori conversioni attraverso l’e-commerce e ci chiede un restyling della grafica del sito, forse non ha ben capito cosa fa uno UX Designer. Se il cliente dice di voler far crescere la Brand Awareness della sua azienda tramite un’app virale, potrebbe aver sopravvalutato le potenzialità della rete.

In generale, se ci pare di notare una discrepanza tra il Risultato desiderato e la Soluzione proposta per raggiungerlo, è il caso di fermarci un momento a riflettere.

In questa fase ci può aiutare il framework S.M.A.R.T. secondo cui un obiettivo non è accettabile se non è Specific, Measurable, Actionable, Realistic e Time-Based (Specifico, Misurabile, Azionabile, Realistico e basato sul Tempo).

Quali sono gli output di questa fase?

Abbiamo chiari gli obiettivi lato cliente e sappiamo di poter agire per raggiungerli.

3. Analisi dei concorrenti

Questa fase è cruciale: che stiamo lavorando sul nuovo prodotto di una startup o sul redesign del sito di un’azienda consolidata, l’analisi di competitor ci permette di capire cosa è presente nel mercato in questo momento e di prendere ispirazione dalle soluzioni adottate da altri professionisti.

I competitor sono sia i prodotti simili a quello che stiamo progettando, sia i prodotti che risolvono lo stesso problema del nostro.

Per una startup che vuole entrare nel mercato dell’Home Fitness, ci chiederemo: quali altre soluzioni esistono? Le palestre? I video su Youtube? Le altre app di fitness? Come sono progettate? Che tono di voce utilizzano? Qual è il loro business model?

Se dovessimo ridisegnare un servizio di online banking, ci chiederemo: quali altri servizi simili esistono? Che tono di voce utilizzano? Sono tanto diversi dal nostro? Esiste un high-level concept, un servizio del tutto diverso ma da cui poter trarre ispirazione?

Anche in questo caso esistono dei framework che possono dare una mano, per esempio la famosa analisi SWOT che ci permette di individuare punti di Forza e di Debolezza dei competitor.

Quali sono gli output di questa fase?

Abbiamo un’idea del mercato di riferimento e dei player in gioco. Non solo: abbiamo preso ispirazione dai pregi e i difetti del lavoro degli altri e abbiamo definito una prima bozza di concept.

4. Applicazione del “design thinking“

Il Design Thinking non è altro che l’approccio alle soluzioni sulla base di problemi. In poche parole, ogni soluzione deve partire da un problema reale. Questa massima zen in aggiunta al proprio buon senso e, quando possibile, a esperienze pregresse, è più che sufficiente.

Chiediamoci:

• La soluzione desiderata dal cliente risolve il problema indicato?
• E Il problema indicato è un problema reale?

La maggior parte delle volte bastano queste due domande.

• Se una soluzione non risolve alcun problema, nessuno l’adotterà mai.
• Se una startup chiede un prodotto che non risponde a reali esigenze degli utenti, quel prodotto non avrà mercato.
• Se un’azienda vuole che i propri utenti scarichino un’app inutile, quell’azienda butterà dei soldi.

Non bisogna aver paura di essere critici con le idee del cliente. Anzi, sarebbe meglio coinvolgerlo in questo genere di riflessioni in maniera chiara e aperta.

Se vai a vedere cosa è un Lean Canvas, strumento processuale usato da tutte le startup, ti accorgerai che il primo passaggio di ogni nuovo prodotto è definire Utenti, Problemi e Soluzioni.

Quali sono gli output di questa fase?

Abbiamo un concept meglio definito: ci siamo fatti un’idea più chiara dei problemi e delle relative soluzioni. Queste ultime definiscono le funzionalità del prodotto.

5. La ricerca dell’utente giusto (User research)

L’abbiamo già accennato prima: uno UX Designer non può lavorare partendo solo ed esclusivamente dalle proprie ipotesi! Se lo fa, rischia di prendere la direzione sbagliata e dover rifare tutto il lavoro da capo.

Allora è necessario interpellare gli utenti in target. Possiamo farlo con due strumenti:

• I sondaggi.
  Forniscono dati quantitativi, informazioni non approfondite da tante persone. Sono economici e richiedono poche risorse.
• Le interviste.
  Forniscono dati qualitativi, informazioni approfondite da poche persone. Richiedono un certo dispendio di tempo (preparare l’intervista, reperire gli utenti in target, intervistare gli utenti)

Cosa stiamo cercando di scoprire con la User Research?

Dipende dall’obiettivo che abbiamo. In generale, sarebbe utile capire:

• se il target individuato ha davvero i bisogni e i problemi ipotizzati durante la fase di concept;
• se ha bisogni e problemi differenti da quelli ipotizzati (per poter integrare il prodotto con nuove soluzioni);
• se è il target corretto;
• quali sono le abitudini di comportamento del target.

Per approfondire l’argomento ti rimando qui.

Quali sono gli output di questa fase?

Abbiamo validato le ipotesi fatte finora e, si spera, abbiamo scoperto delle nuove informazioni circa gli utenti in target.

6. Creazione profili utenti ideali (User Personas)

Chi sono i nostri utenti ideali? Che bisogni hanno? Quali sono le loro aspettative?

Le user personas dovrebbero essere una per gruppi di target. In caso avessimo 3 gruppi di target – Freelance, Imprenditori e Project Manager – potremmo creare le seguenti Personas: Matteo, il freelance; Giorgio, l’imprenditore; Carla, la Project Manager.

L’utilità delle user personas è duplice: primo, aiutano in presentazione con i clienti perché creano un’empatia; secondo, assicurano che le caratteristiche degli utenti di riferimento siano ben chiare a tutti, sia ai progettisti che ai clienti.

Quali sono gli elementi da inserire in una User Persona?

• Il nome della Persona;
• Una foto (non deve sembrare stock/finta);
• Una citazione che incarni la personalità;
• Il tipo di Persona;
• Una breve bio;
• Età e professione;
• Obiettivi;
• Bisogni.

A seconda della necessità è possibile ampliare le Personas con altri elementi, come suggerisce usability.gov.

Quali sono gli output di questa fase?

Abbiamo un profilo utente ideale per target group.

Ricapitoliamo: Cosa abbiamo fatto fino a ora?

• Ci siamo assicurati che il brief del cliente fosse sensato;
• Abbiamo ipotizzato le funzionalità del prodotto perché rispondano a reali bisogni degli utenti;
• Abbiamo fatto ricerca per validare le nostre ipotesi.

Il nostro obiettivo non è solo quello di accertarci di essere nel giusto, ma di scoprire bisogni e problemi a cui non avevamo pensato! Le fasi precedenti non sono del tutto lineari: se dovessimo renderci conto che gli utenti non hanno il problema ipotizzato bensì un altro del tutto diverso, torneremmo indietro e modificheremmo le funzionalità del prodotto di conseguenza. Questo discorso vale anche per gli utenti: potremmo scoprire di aver immaginato come destinatari del prodotto gli imprenditori quando sarebbero più idonei i freelance!

Proprio per essere certi di aver inquadrato il target corretto, è meglio stilare le User Personas dopo aver svolto la ricerca.

Cosa succede da qua in poi? La seconda parte del processo di UX

Nelle fasi precedenti abbiamo costruito e validato un concept di prodotto: utenti in target, bisogni da soddisfare, problemi da risolvere, una lista di funzionalità da progettare. Adesso inizia la fase di creazione vera e propria!

7. Analizzare l’esperienza dell’utente (customer journey)

Arrivati a questa fase, abbiamo un concept ben definito e una serie di utenti ideali, entrambi validati e specificati attraverso una ricerca.

Adesso potremmo decidere di analizzare il viaggio dell’utente per avere una visione d’insieme del modo in cui interagirà con il nostro prodotto o servizio. Per fare un esempio concreto, se stessimo progettando un sito di booking, potremmo studiare tutte le fasi inerenti all’acquisto di un volo aereo:

Ricerca e Pianificazione  >  Definizione del volo  >  Prenotazione del volo  >  Post-Prenotazione  >  Viaggio  >  Post-Viaggio

Cosa ci interessa di queste fasi? Dipende dal progetto, tuttavia uno schema abbastanza usato prevede l’analisi di Azioni, Pensieri, Sentimenti e Opportunità:

• Azioni dell’utente: cerco su google, comparo i prezzi, inserisco le date, il numero di passeggeri, i dati di pagamento, ecc.;
• Pensieri dell’utente: «Voglio andare in vacanza», «Dove spendo di meno?», ecc.;
• Sentimenti dell’utente: frustrazione, gioia, confusione, noia…

Questi elementi possono essere la chiave per lo sviluppo delle cosiddette Opportunità, le soluzioni a possibili problemi in cui l’utente incapperà.

Per avere un buon esempio di Customer Journey ti rimando a quello della Rail Europe.

8. Identificare le storie (user stories) e i flussi dell’utente

Nelle fasi precedenti abbiamo stilato la lista delle funzionalità principali di un prodotto: per un’app di project management potrebbero essere «Annotare un lavoro in una lista di cose da fare», «Ricevere notifiche in vista dello scadere del lavoro» e «Visualizzare un calendario con tutti i lavori da fare».

Le user stories sono una tecnica semplicissima che ci aiuta a esplorare le funzionalità e a disegnare i relativi flussi degli utenti.

Hanno una struttura molto sintetica:

In qualità di <Ruolo> voglio <azione o funzione> in modo da <risultato desiderato>.

Ad esempio:

In qualità di Utente voglio registrarmi con Facebook in modo da fare più in fretta.

In qualità di Utente voglio aggiungere un task alla to-do list in modo da tenerlo in memoria.

Aiutano ad analizzare tutte le possibili azioni degli utenti; sono paragonabili a un breve brainstorming, più ne produciamo meglio è!

Possiamo anche optare per la versione semplificata:

In qualità di Utente voglio modificare un task inserito.

In qualità di Utente voglio cancellare un task inserito.

La rappresentazione grafica delle User Stories sono gli User Flows, che ci permettono di avere una visione complessiva di tutti i percorsi che un utente potrebbe seguire.

9. Strutturare l’Architettura dell’Informazione (information architecture)

Va bene, adesso abbiamo definito l’alberatura delle azioni degli utenti!

Però… com’è fatto lo scheletro completo dell’app o del sito web? Noi sappiamo che un utente può arrivare sull’homepage, leggere le feature di prodotto e poi effettuare una registrazione, tuttavia dobbiamo chiederci: a cosa è collegata la homepage? Quali sono i contenuti? E le altre pagine? E i sottoelementi?

L’Architettura dell’Informazione può essere a ragione definita come la scienza dell’organizzazione delle informazioni: ci aiuta a capire dove disporre gli elementi e come collegarli tra di loro per garantirne una facile fruizione.

Ci si può avvalere di metodologie come il Card Sorting e l’output che se ne ricava in genere è una sitemap, ossia una mappa di tutte le pagine di un prodotto e delle loro relazioni. In un’app, potremmo dire che gli User Flow sono tutti i possibili percorsi degli utenti all’interno di un edificio e la sitemap è la struttura dell’edificio, la quale rende possibili i movimenti sopracitati.

10. Fare il “Wireframing“

I wireframe sono la struttura scheletrica delle schermate di un prodotto. Quando abbiamo definito l’alberatura di un prodotto e le possibili azioni che l’utente sarà in grado di performare, dobbiamo iniziare a progettare le schermate una per una.

Sempre per una questione di economia e ottimizzazione, non ci lanceremo subito nella creazione delle schermate finali, ma lavoreremo su visualizzazioni grafiche che ci permettano di studiare il funzionamento generale e le interazioni degli utenti. Possiamo considerare il Wireframing come una fase di Sketching: all’inizio buttiamo giù le schermate con carta e penna usando degli stampabili come quelli di Sneakpeekit (il Low Fidelty Wireframing) per poi elaborarle con precisione utilizzando un software di grafica come Sketch, oppure uno dedicato come Axure.

Per il wireframing non ci sono delle regole particolari: la scuola migliore è nella pratica. Tuttavia posso lasciarvi un paio di consigli:

• Studiamo una gerarchia visiva: impostiamo le cose più importanti perché siano più grandi ed evidenti, e segmentiamo il contenuto per una migliore fruizione (Chunking).
• Facciamo tante prove, cancelliamo e ridisegniamo, guardiamo le altre app e compariamo le soluzioni adottate.
• Semplifichiamo la vita all’utente: se possiamo passare da 3 tap a 2, facciamolo (il buon vecchio “Less is more”).
• Cerchiamo di evitare i vicoli ciechi: l’utente clicca su un pulsante, va nella seconda schermata, vuole tornare indietro ma… non c’è il pulsante BACK!
• Studiamo le linee guida dei sistemi operativi di riferimento: se stiamo progettando un’app per Android, andiamo a guardare il Material Design; se invece stiamo facendo per iOS, diamo un occhio a quelle di Apple!

11. Creare un prototipo e testare (prototyping & user testing)

Qui torna la logica della User Research: abbiamo appena disegnato una ventina di schermate del nostro prodotto (che siano a penna o a computer non importa, purché siano comprensibili) e pensiamo di aver fatto un ottimo lavoro. Passiamo subito alla fase successiva? No! Uno UX Designer parte dal presupposto di avere sempre un margine di miglioramento, perciò: costruiamo un prototipo e testiamolo con gli utenti!

Il Prototipo è una simulazione del prodotto. Può essere:

• Non-Interattivo: prendiamo le schermate disegnate a penna oppure stampiamo le schermate fatte a computer, le mettiamo una sopra l’altra e voltiamo la pagina quando un utente clicca sul giusto elemento rappresentato sul foglio;
• Interattivo: prendiamo le schermate fatte a computer oppure fotografiamo o scansioniamo quelle disegnate a penna, quindi con un software come Marvel o InVision costruiamo un prototipo cliccabile e fruibile su un supporto digitale.

Sul sito della Nielsen-Norman Group trovi una classificazione più approfondita dei vari tipi di prototipo.

12. Iterazioni sui prototipi

Perché investiamo delle risorse per creare un prototipo e testarlo?

Per individuare immediatamente delle criticità!

Se ci pensate, finora il lavoro è stato piuttosto rapido: a parte la ricerca, abbiamo studiato un po’ di flussi e qualche wireframe. È nostro interesse validare il risultato subito per poter proseguire senza preoccupazioni.

I test sugli utenti ci mostreranno dei Pain Points gravi (da risolvere con massima priorità), altri più tenui (da risolvere in seconda battuta), in aggiunta alle considerazioni dei tester, che potrebbero essere fonte di ispirazione per apportare ulteriori migliorie.

13. Sviluppare l’interfaccia grafica (User Interface, UI)

Abbiamo sviluppato i wireframe di tutto il prodotto, li abbiamo testati con gli utenti e li abbiamo successivamente iterati. Inoltre abbiamo mostrato il prototipo al cliente, che ne è rimasto entusiasta. Perfetto! Adesso si passa alla fase di User Interface.

Spiegato in soldoni, è arrivato il momento di dotare di grafica i nostri wireframe spogli. Attenzione perché qui si abbandona il confortevole mondo del Problem Solving e della validazione con gli utenti per entrare nell’universo della soggettività.

Come si sviluppa la UI?

Per schematizzare un possibile processo creativo di UI:

1. Innanzitutto si crea una Moodboard, una tavola di ispirazioni grafiche per comunicare la personalità che il prodotto avrà;
2. Poi, si scelgono i font da utilizzare (leggi la guida su come scegliere un font);
3. Si costruisce una palette di colori (leggi come scegliere una palette di colori);
4. Si sceglie il tipo di immagini e il loro trattamento;
5. E infine si elaborano gli elementi principali (bottoni, form, livelli del testo, ecc.).

Non esiste una prassi esatta, la grafica viene applicata, se ne controlla l’effetto, poi si decide cosa mantenere e cosa no. È come durante qualsiasi fase creativa classica: un misto di pensiero divergente e convergente.

Ci sono comunque dei requisiti che sarebbe meglio rispettare:

• La UI riflette la personalità del prodotto: la UI per il sito istituzionale di una banca dovrà trasmettere certi valori (sicurezza, affidabilità, concretezza), mentre quella per un social di teenager ne comunicherà altri (vitalità, libertà, condivisione).
• Deve contribuire all’usabilità del prodotto: gli elementi devono avere un aspetto che ne suggerisca la funzione (un pulsante deve sembrare cliccabile!).
• Infine, deve contribuire alla creazione di una gerarchia visiva attraverso l’uso di Colore, Luminosità e Contrasto; per quanto riguarda i testi, attraverso l’adozione di diverse grandezze e stili (grassetto, corsivo, ecc.).

Per approfondire l’argomento ti rimando al sito di Usability.gov

14. Test finale

Alla fine di tutto, dopo aver vestito tutte le schermate con la UI definitiva, si può decidere di creare un nuovo prototipo e di eseguire degli ulteriori test sugli utenti.

Perché lo facciamo di nuovo?

Dopo il lavoro dello UX/UI Designer arriva quello dei programmatori e, se noi impieghiamo una settimana a progettare un’app, a loro potrebbero servirne 4 per svilupparla. Questo dato simbolico ci suggerisce una cosa: meglio essere sicuri che tutto sia a prova di bomba prima di passarlo ai programmatori!

Il principio del processo UX: il Buon Senso

Qual è il filo rosso che lega tutte le fasi appena viste?

Il buon senso.

La User Experience, una materia che sta crescendo sempre di più includendo Information Architecture, Human-Centered Design, Interaction Design, ecc., non è altro che la scienza del Buon Senso; e il processo appena visto è un misto di buona progettazione e prevenzione degli errori.

Il Vademecum del processo di UX Design finale:

1. Penso agli utenti
   Evito di fare cose a casaccio, perché progetto per persone che hanno determinate caratteristiche. È una pratica che ogni bravo progettista adotta: se disegno una sedia per bambini, la farò a misura di bambini; se progetto una degustazione di vino per mamme single sarà del tutto diversa da una per dirigenti di banca.
2. Chiedo agli utenti
   Mi accerto di non stare lavorando sulla base di stupidaggini. Non ci vuole un genio a capirlo: se sto progettando un prodotto per fotografi, meglio chiedere l’opinione dei fotografi prima di perdere tempo dietro a delle fantasie.
3. Faccio un pezzetto, poi chiedo di nuovo agli utenti
   Evito di lavorare sei mesi su un prodotto e scoprire solo alla fine di essere sulla strada sbagliata. Al contrario, appena ho un wireframe comprensibile, chiedo a degli utenti di provarlo per individuare subito i famosi pain points (punti dolenti).
4. Ho fretta di sbagliare e ancora più fretta di correggere
   Parto da questo presupposto: so che farò degli errori, ma devo individuarli al più presto. E la mia priorità è quella di far vedere il mio lavoro, testarlo, così da iterare (cambiare sulla base dei feedback ricevuti).
5. Ottimizzo tutto quello che posso
   Come posso analizzare le richieste del cliente per evitare di partire con il piede sbagliato? Come posso organizzare il contenuto al meglio? E come esplorare le funzionalità di un’app nella maniera più efficace? Lo UX Designer adotta metodologie e tecniche per ottimizzare le varie fasi del processo.

Sei anni fa lavoravo ad Amsterdam, non si sentiva quasi parlare di UX Designer, e Sketch era un prodotto di nicchia con poche funzionalità; oggi si leggono articoli sul futuro della UX e se non sai cos’è l’atomic design e i design system in Sketch sembri un professionista poco preparato. Il mondo si evolve alla velocità della luce: ogni giorno spuntano nuove metodologie e acronimi come funghi.

Per non perdersi in questa costante innovazione è cruciale afferrare la chiave di lettura alla base del Processo UX: il buon senso! Tutte le azioni di uno UX Designer sembrano infatti seguire una logica di rigida praticità e criterio.

La User Experience per prodotti non digitali

Oggi la UX è strettamente riferita ai prodotti digitali: nel linguaggio comune, quando si parla di uno UX Designer, si immagina un professionista che progetta app, siti web, interfacce.

In verità, la progettazione per l’Esperienza Utente si può riferire a tutti i prodotti (e i servizi) esistenti.

Un ottimo esercizio per comprendere ancora più a fondo il Processo di UX appena visto insieme è applicarlo a una lavatrice, a un gioco da tavolo, a un hotel. Se ci pensate, che cambia in fondo? Andremo a studiare il target dell’hotel, le loro esigenze, analizzeremo i loro competitor, svilupperemo il customer journey (come arrivano i clienti? Cosa si aspettano? Con chi parlano?) e andremo a progettare dei nuovi flussi per migliorare l’esperienza complessiva.

Non solo: investiresti 20mila euro per produrre un tuo gioco da tavolo, senza prima testarlo? E preferiresti testare una versione di bozza rudimentale, oppure lavorarci sopra sei mesi con il rischio di rifare tutto daccapo?

Lo ripeto ancora una volta: il processo di design di UX è fondato sul buon senso e l’ottimizzazione, e proprio per questo funziona! Con ogni genere di progetto, ti basterà prendere le metodologie più idonee a una certa fase, applicarle e analizzarne i risultati!

Conclusioni

Oggi abbiamo fatto chiarezza su un possibile processo UX per affrontare progetti digitali. È un approccio che può disorientare all’inizio e che richiede un certo tempo per essere compreso e padroneggiato.

Alla prossima,

Matteo.