Categorie
Ux Blog

User Flow vs Manuale d’uso

Tutti voi ricordate di sicuro i manuali d’uso che c’erano (e a volte ancora ci sono) nella scatola di ogni apparecchio domestico che abbiamo e/o che acquistiamo ancora. Bene, lo UX designer in teoria (e spesso in pratica) fa si che non ci sia bisogno di questo “manuale” per utilizzare un’applicazione mobile o un sito web.

telefunken manual

Con user flow (flusso dell’utente) viene definito il percorso che l’utente deve intraprende quando usa le nostre app o siti web. Che questo viaggio sia onirico o un incubo, dipende proprio da come lo UX realizza lo user flow. Alcuni case study dimostrano che creare un buon user flow permette di avere un forte impatto sul business in termini di raggiungimento degli obiettivi. Per definire questo viaggio dobbiamo conoscere 3 aspetti molto importanti.

e8f38723700f65a08fd20e5c86d3ec01

Conoscere i tuoi utenti

Prima ancora di progettare si dovrebbero comprendere gli utenti (personas) e le loro esigenze e quali obiettivi intendono raggiungere con il serfvizio offerto dall’app o dal sito web. Cosa li spinge ad usare il nostro prodotto? Attraverso questa “comprensione” si possono poi definire delle sequenze (o step) da percorrere fino al raggiungimento dell’obiettivo prefissato. Maggiore è la semplicità del percorso, maggiore sarà il viaggio intrapreso dall’utente…cio’ si traduce in “motivazione” a continuare, migliorando ulteriormente l’esprerienza utente (ux).

 

Obiettivi e business

Un giusto approccio non è domandare agli utenti di come va l’applicazione, è preferibile scaturire in lui curiosità e motivazione lungo il percorso mettendoli in condizione di “imparare navigando“. Concentrarsi solo sul raggiungimento degli obiettivi è sbagliato, chiedere ad esempio di inserire la propria mail per la newsletter prima ancora che l’utente capisca di cosa si tratti si perde di “valore”, peggio ancora pubblicità invasive che occupano rilevanti parte dell’interfaccia disturbando l’attenzione dell’utente. Il tasso medio di conversione di un banner è dello 0,1%. Pertanto non ha senso rovinare il nostro lavoro in questo modo!

 

Gli obiettivi

Quando un’ utente raggiunge l’obiettivo in poco tempo, grazie alla semplicità dell’interfaccia è sicuramente pronto al prossimo step. Se carichiamo troppo in richieste di informazioni, campi obbligatori con disordine si può creare nell’utente una frustrazione anche per una semplice registrazione, che potrebbe essere un deterrente nell’operazione stessa. Se per raggiungere l’obiettivo di “registrarsi” per poi completare un’acquisto in modo difficoltoso tutto il nostro lavoro di ottimizzazione in termini di conversione decade. E’ d’obbligo quindi creare una mappa degli obiettivi e dare una priorità, una gerarchia ai percorsi di logica. Pensando ad un’e-commerce si possono definire questi 3 obiettivi:

  1. Far registrare l’utente
  2. Far acquistare all’utente
  3. Creare loyally (fidelizzarlo)

Se abbiamo chiaro questo percorso potremmo concentrarci nella progettazione di ogni singolo obiettivo per step ed avere un flusso dell’utente ottimale.

 

Walter Fantauzzi

Categorie
Ux Blog

Modus Operandi UX

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.

piramide
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.

8fcf8cf2d374808124fe967367c3b083
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…).

46b4cf25048fc4c0076612d5195978c4
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.

b915360f967d051aec3956367ae55bb7
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.

8d2c4d7dbd53bbe508d12cb4031687f9
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.

0cc760f670f48e454060d892afeb17dc

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.

Noire_UI_Kit_web-user-interface

 

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ì.

Feature_Image_Mobile_Device_Management_BYOD_Evolution
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

Categorie
Ux Blog

Why this Ux fails ?

I was very happy when I saw the Microsoft Flow app in the applestore. But what the fake at the login moment? Let’s see this screenshot… There isn’t a way to create an account on the fly… And so how I can use it on the rails?