Nel seguente articolo, la descrizione del mio approccio al mondo della User Experience. Le fasi ed il workflow utilizzati nelle mie progettazioni di UX e UI.
Fase 1: Il Workflow
Prototipizzare, misurare e ascoltare.
Sono le tre fasi essenziali per la realizzazione di un buon prodotto.
Le distinguo in questi tre tempi:
1. Realizzare un prototipo
2. Misurare i risultati Analizzare i feedback
3. Progettare
L’immagine seguente mostra l’andamento della fase progettuale. Partendo dal basso della piramide trovate i punti cardine alla base del mio processo lavorativo.
Fase 2: Paper Prototype
Il “Modus operandi” che utilizzo nella realizzazioni delle UX è di tipo piramidale.
Dopo l’intervista con il cliente e la definizione dei “goal” da raggiungere, il primo step che vado ad affrontare è quello del “Paper Prototype” ovvero uno schizzo su carta. Sarà pertanto il Paper Prototype la guida per definire al meglio, con il cliente, le funzionalità e la navigazione dell’applicazione (o sito web). Parto dall’unità di misura che si definisce in MVP (Minimum Viable Product = Minimo Prodotto Fattibile), ovvero realizzo l’applicazione volta per volta, partendo da una versione iniziale che racchiude un set minimo di funzionalità. Quest’ultime sono le caratteristiche indispensabili che soddisfano le richieste del cliente.
Fase 3: Wireframe
Definito il processo di navigazione e la collocazione dei contenuti procedo alla realizzazione di un wireframe digitale con il software “Sketch”. L’utilizzo delle librerie o design pattern mi permette, in tempi brevi, di realizzare un wireframe o un diagramma di flusso ottimale. In questo modo avremo un timone da seguire, senza possibilità di perdersi durante la fase di realizzazione dell’app. Utilizzando invision app, rendo disponibile la “definition on done” (ovvero il progress lavori) a tutto il team di sviluppo.
Mediante questa applicazione posso condividere con i developer ed il cliente, lo status di ogni vista secondo degli step (in fase di review, fermo, fatto ecc…).
Fase 4: Lo studio di fattibilità
Lo step successivo sarà realizzare uno studio di fattibilità con gli sviluppatori, per valutare tempi di realizzazione e processi scrum. Quest’ultima fase permetterà di avere un preventivo di tempi e costi per la realizzazione del prodotto commissionato. Una volta raggiunti gli accordi tra lo strato “developer” e quello delle “funzionalità” da realizzare procedo con la realizzazione visual.
Fase 5: Visual Design
In questa fase realizzo l’interfaccia grafica (o meglio la UI) dell’applicazione. Definisco quindi i placeholder dei contenuti, i pulsanti, le immagini ecc… da posizionare sullo schermo. La progettazione del linguaggio grafico a volte estende quello già esistente dell’azienda. Utilizzo quindi colori, loghi e simbologie tipiche del cliente. Non raramente c’è la necessità di rivalutare la palette colori, definire nuovi simbolismi o addirittura un restyling del linguaggio grafico del brand. Il tutto per rendere l’applicazione ergonomica nel migliore dei modi.
Fase 6: Prototipazione 2.0
Principal per la prototipazione animata è uno dei software più rapidi e realistici. Utilizzo questo ambiente per rendere tangibile l’esperienza d’uso ( o UX) da mostrare al cliente. Posso quindi analizzare se la mia UX è user oriented (ovvero incentrata sull’utilizzatore) o meno, così da valutarne eventuali modifiche o migliorie. Valuto se il raggiungimento dei goal sia soddisfacente, e ne monitoro i feedback o eventuali problematiche da migliorare.
Fase 7: Asset
Una volta definita la veste grafica, lo studio di fattibilità con i developer e gli obbiettivi richiesti dall’utente, creo gli asset da passare allo sviluppatore. Lavorando in ambiente Creative Cloud, la funzione “collabora” da Photoshop CC mi permette di condividere tutti gli elementi grafici agli sviluppatori. Dai colori in esadecimale utilizzati, alle immagini o elementi grafici dell’interfaccia.
Bellissima ed utilissima è l’applicazione Slack, una sorta di chat collaborativa, con la quale posso condividere dettagliatamente un elemento grafico o non con il team di sviluppo. A volte propongo tramite reference visivi e porzioni di codice, animazioni dinamiche COCOA da poter applicare a gesture o eventi.
Fase 8: Dead Line o No?
Sinceramente non credo esista una dead line per un’applicazione mobile o web. O meglio esiste uno step nel quale l’app deve andare online ma di certo non può morire così.
Il mondo dell’informatica è in costante evoluzione pertanto anche le app ed i siti web, così come gli esseri viventi, devono avere un mutamento. Possiamo valutare molti case study da facebook a flipboard ed altri ancora.
Non credo che si possa definire un’applicazione “finita”, posso dire che è in constate mutamento.
Walter Fantauzzi
E’ stato bellissimo, questa mattina, vedere il progetto di google “Project Blocks”, insegnerà ai bambini i rudimenti della programmazione informatica.
The concept behind this parable is that it is necessary to have a clear end point despite having different points of view.
The UX is how it works and not how It appear. The best strategy approach is join everyday your Team for an interactive strategy session. Use your prioritized personas and customer journey map to determine which problems to tackle first. A good approach is based on personas and customer to analyze what are the first problems to solve. The next step is to brainstorm in which to solve the problems of your customers, without getting too deep to contain the costs of the project. This session will therefore defines the UX and not the user interface (UI).
