Durante una delle mie missioni come designer UX/UI, mi sono ritrovato a capo di un perimetro di un'applicazione bancaria già matura. Che fossero legati alla funzionalità o all'interfaccia utente, i viaggi erano avanzati e già numerosi.

Il design del sistema, sufficientemente ricco, diversificato e strutturato, consente di prototipare rapidamente nuovi percorsi ad alta fedeltà senza dover passare per wireframe Mid-Fi. L'implementazione di un progetto di sistema consente di ridurre i costi di sviluppo e di mantenere la consistenza generale del prodotto. Questa coerenza ha un vantaggio significativo per l'utente perché gli consente di trovarsi su un terreno familiare e di associare facilmente schemi visivi con funzionalità o un modo di organizzare le informazioni.

Solo allora, come designer (garante dell'esperienza utente) ci troviamo presto a dover creare, gestire e aggiornare innumerevoli prototipi e schermate molto simili ma che rispondono a casi d'uso diversi. Navigare tra le schermate e i progetti in corso diventa allora una vera sfida.

Il mio obiettivo attraverso questo articolo e di condividere con voi lo strumento che mi ha permesso di mettere ordine in questo groviglio di percorsi e mantenere una visione globale. L'implementazione di Userflows mi ha dato l'aiuto necessario per la creazione, l'aggiornamento, l'organizzazione e la comunicazione dei diversi percorsi all'interno dei team. Ed ecco come...

#1 WIREFRAME / PROTOTIPI E LORO LIMITAZIONI

La creazione di wireframe e la prototipazione hanno vantaggi immediati e importanti. Ci consentono di testare rapidamente i nostri schermi e abbastanza presto nel progetto. L'obiettivo di un prototipo è rendere tangibili casi d'uso specifici. Permettono così di vivere l'esperienza dell'utente, diventano un mezzo di scambio durante le fasi di test.

Se sei già in una fase avanzata del tuo Design System, creare prototipi ad alta fedeltà può essere estremamente veloce. Sono anche strumenti essenziali per convincere un cliente permettendogli di proiettarsi.

Come abbiamo visto sopra, i prototipi hanno un ruolo chiave nella progettazione dell'esperienza utente. Tuttavia, consentono di avere, al momento T, solo una visione schermo per schermo e all'interno del quadro definito dal nostro caso d'uso. Da un punto di vista organizzativo, è difficile capire la posizione di un particolare schermo nel mezzo del flusso di lavoro generale. Soprattutto, mentre approfondiamo lo sviluppo, il prodotto diventa più complesso, ci rendiamo conto che dobbiamo fare i conti con molti scenari, inizialmente non presi in considerazione.

Infatti i prototipi prodotti generalmente rappresentano casi nominali e spesso il “percorso felice” ma per quanto riguarda gli altri casi?

Come ad esempio :

• Come devo mostrare che un pulsante può fare riferimento a schermate diverse a seconda dello stato dell'utente?
• Devo prototipare queste due versioni per visualizzare e testare l'esperienza utente di queste due ramificazioni?
• Come devo integrare i casi di errore nei miei prototipi come perdita di connessione, problema con il server? Devo realizzare un prototipo dedicato?
• Come posso rappresentare i trigger per questi messaggi di errore nel mio prototipo?
• Devo creare versioni in base allo stato degli utenti (profilo memorizzato / non memorizzato / Iscritto / Non iscritto)?
• Se l'utente è già registrato a una funzione o non ha completato il processo di abbonamento, devo saltare alcuni passaggi a seconda della situazione dell'utente?

Il ruolo di un designer è prevedere tutti questi casi e fornire soluzioni ergonomiche. Ma tutti questi diversi casi sono scenari alternativi che combinati insieme possono portare a moltissime possibilità. È possibile creare prototipi per rispondere a tutti questi scenari? Supponendo che il prodotto abbia un budget e il tempo necessario per la declinazione di tutti questi schermi, quali problemi possono sollevare i prototipi?

• La difficoltà di mantenere aggiornate tutte queste varianti dello schermo, soprattutto all'interno di un design di sistema in rapida evoluzione.
• La difficoltà nel valutare gli impatti che la modifica di una schermata può avere sul resto dei percorsi che hanno in comune questa schermata.
• Il tempo dedicato alla creazione delle schermate, all'organizzazione e alla condivisione con sviluppatori/PO.
• La difficoltà per un altoparlante esterno di trovare così tante versioni.

Ci rendiamo conto che utilizzare i prototipi come strumento di comunicazione e gestione non è più sufficiente. Si arriva a un certo limite se vogliamo rispondere a tutti i diversi casi.

Considerare un approccio macro renderà più facile navigare in questo labirinto di possibilità.

#2 L'INTERESSE DEI FLUSSI D'UTENTE

Come abbiamo visto sopra, più un sistema diventa complesso, più è difficile comprendere/organizzare/mantenere il prodotto nel suo insieme con il solo uso di prototipi. Da dove viene l'utilità di accoppiare questo strumento con un flusso utente?

Lo Userflow permette di illustrare i movimenti attraverso un sistema, mostra quali passaggi l'utente dovrà compiere per raggiungere il suo obiettivo. Il prossimo è il livello di dettaglio che possiamo integrare le decisioni degli utenti e i percorsi che ne derivano. Interessante anche integrare i vincoli tecnici che possono essere determinanti nel flusso del prodotto. Se utilizzati al momento giusto nei progetti, i flussi utente possono aumentare la velocità di formazione dell'iterazione e migliorare la comunicazione all'interno del team di prodotto.

Proprio come i Wireframe, i flussi utente possono essere presentati con diversi livelli di dettaglio :

• Più rudimentale è il flusso utente, più il tuo approccio sarà focalizzato sui passaggi che soddisferanno le principali esigenze e obiettivi degli utenti. Questo livello di dettaglio è molto interessante perché dà un'idea complessiva delle diverse fasi e del numero di schermi che dovranno essere prototipati. Ciò consente di tornare alla funzione globale senza soffermarsi sui dettagli.
• Più alto è il livello di dettaglio, più è possibile integrare elementi finiti di interfacce, elementi tecnici o decisioni dell'utente. Raggiungendo questo livello di dettaglio potrai quindi avere una visione dettagliata dei diversi rami permettendoti di raggiungere l'obiettivo dell'utente.

Ecco alcuni dei principali vantaggi dell'utilizzo di Userflow :

• Il vantaggio di utilizzare questo mezzo fin dall'inizio della progettazione è quello di poter "mappare" i percorsi in maniera macro, ma soprattutto di poterli modificare di conseguenza. È anche interessante vedere il tuo flusso utente come uno strumento di lavoro vivo e in evoluzione. Va di pari passo con i vincoli tecnici, gli sviluppi del business e le esigenze degli utenti.
• Al contrario, è difficile sviluppare determinati schermi senza il supporto di questo strumento perché non ci rendiamo conto dell'impatto che ciò può avere su altri casi d'uso che hanno questo schermo in comune. Infatti, utilizzandolo sarai in grado di visualizzare a colpo d'occhio le ramificazioni e quindi tutti gli schermi che potrebbero essere interessati. Ciò consente, ad esempio, di sviluppare questa schermata tenendo conto di tutti gli scenari possibili, evitando duplicazioni e riducendo i costi di sviluppo. D'altra parte, se l'utilizzo è troppo diverso da quello che l'utente o le richieste dell'azienda si aspettano, è possibile deviare e creare una nuova versione con piena cognizione di causa.
• Su un prototipo è difficile integrare i vincoli tecnici che possono avere un impatto molto forte sull'esperienza dell'utente finale: Tempo di attesa / Chiamate al server / Controlli di sicurezza. La mappatura di questo tipo di informazioni può già fornire buoni indizi su dove potrebbero esserci errori o ritardi. Ciò consente, ad esempio, di fornire “Shimmerings” per far aspettare l'utente o di preparare casi di errore con messaggi contestuali, umoristici o leggermente emotivi.
• Questo permette anche di presentare i diversi corsi in maniera macro ai diversi interlocutori del progetto. Ad esempio, è un vantaggio per il team dei dati avere questo tipo di rappresentazione. Questo gli permette di visualizzare le diverse filiali e le decisioni degli utenti e di essere in grado di sviluppare il "Piano di Tagging" di conseguenza.

#3 Strumento di esempio:

In questa parte, vorrei presentarvi lo strumento di creazione collaborativa di Userflow che apprezzo particolarmente: Whimsical.

più :

• Iniziare è estremamente semplice anche per chi non ha mai utilizzato strumenti simili.
• È molto facile modificare un flusso utente "complesso" esistente senza annullare tutto e dedicarci troppo tempo.
• Le possibilità di personalizzazione non sono moltissime ma semplici, estetiche e ben fatte per soddisfare tutte le principali esigenze senza perdersi nella complessità.
• Vuoi facilitare il lavoro e il processo di comunicazione tra gli sviluppatori e il tuo team di progettazione? Potrai sfruttare questo strumento collaborativo che consente a più persone di lavorare contemporaneamente sullo stesso file. Puoi commentare, taggare i collaboratori su elementi specifici del documento.
• Questo strumento consente anche di integrare collegamenti e immagini (come interfacce per i flussi utente). È tuttavia deplorevole che sia impossibile.
• Questo software integra anche altri strumenti che non sono oggetto di questo articolo ma che rimangono dei veri e propri asset (Mappa mentale, Sticky Notes, Wireframe).
• Il prezzo è ragionevole: gratuito per i revisori e 10€/mese per gli editori.

Il minimo :

• Peccato non poter avere anteprime delle tavole da disegno di Invision, Sketch o Figma che permetterebbero l'aggiornamento di un vero Wireflow in automatico.
• La versione gratuita offre un solo piano di lavoro collaborativo.

Ci vediamo domani per nuove sorprese nel nostro calendario dell'Avvento di UX-Republic!

Clemente Guillot, UX-UI Designer @UX-Repubblica