Come creare un wireframe interattivo

I wireframe sono uno strumento potente ed indispensabile nel processo di produzione di un sistema interattivo. Hanno delle proprietà meravigliose. Costituiscono la fase germinale della struttura visiva e funzionale di un sito web o di una app, consentono di rappresentare in uno storyboard i possibili percorsi dell’utente e aiutano a prendere una serie di decisioni sull’architettura dell’interazione prima che il costoso lavoro di visual design e di sviluppo inizi. Qualunque strumento di disegno può essere utilizzato per produrre un wireframe e solitamente una matita e un pezzo di carta sono sufficienti per realizzare il primo sketch da cui, magari, nascerà la app che ci renderà famosi.

Ma veniamo al rovescio della medaglia. I wireframe tradizionali sono delle meta-interfacce e cioè costituiscono una mappa statica che sarà utilizzata per lo sviluppo del sistema interattivo. Non sono responsive e quindi macchinosi nella rappresentazione di GUI che richiedono una visualizzazione su differenti devices, come accade oggi per la maggior parte dei progetti. Hanno alcuni altri inconvenienti pratici. Una sequenza di fogli o schermate composta da box grigi è faticosa da seguire quando la mostriamo al cliente, che deve resistere a sbadigli e botte di sonno. Inoltre non sempre offrono indicazioni affidabili negli early stage test sugli utenti finali.

Qualcuno ha affermato che questi limiti riducono l’utilità dei wireframe nelle nuove metodologie di progettazione delle interfacce. Non sono d’accordo. Al contrario direi che, con l’aumentare della complessità e della velocità di sviluppo richiesta dai progetti, il wireframing è ancora più importante. Purchè diventi interattivo. Se realizziamo wireframe che si possono cliccare e toccare, riproducendo le modalità e l’esperienza dell’interfaccia finale, avremo grandi vantaggi:

– I clienti si appassioneranno molto di più quando gli presenteremo un wireframe interattivo. Potranno comprendere meglio l’impostazione del progetto e fornire un feedback più preciso. Proporre wireframe interattivi velocizza il processo di approvazione da parte del committente specialmente quando si lavora a distanza.

– Gli utenti coinvolti nel testing iniziale godranno di un’esperienza d’uso contestuale che è molto importante soprattutto quando progettiamo sistemi mobile. In questo modo potremo effettuare sessioni di testing scenario-based estremamente significative anche su prototipi low-fidelity.

– In aggiunta alla documentazione di progetto, gli sviluppatori avranno una rappresentazione interattiva delle funzionalità da sviluppare, potranno dare feedback rapido su constraints tecnici e tempistiche, e si ridurranno equivoci ed incomprensioni.

Ma se i vantaggi dei wireframe interattivi sono evidenti il punto chiave è: come facciamo a realizzarli? Dobbiamo sviluppare template in HTML5 o cose del genere con tutto l’aggravio di tempi e costi che la cosa comporta? Non necessariamente. Esistono una serie di tool che ci permettono di realizzare mockup interattivi con estrema rapidità e senza scrivere una riga di codice, rendendo il processo integrabile anche in progetti low budget.

Segnalerò qui tre strumenti che uso di frequente. Li ho scelti perchè si tratta di web tools che non richiedono installazione, perchè consentono una attività collaborativa cloud based, perchè gestiscono bene i progetti multidevices e perchè hanno una versione free che permette di testarli sia pure con funzionalità limitate.

Invision http://www.invisionapp.com/
InVision consente di trasformare rapidamente i wireframe statici in prototipi interattivi. Basta importare le immagini dei propri mockup e creare degli hot-spots per renderli navigabili con gestures, transizioni e animazioni per il web, iOS e Android. Basterà inviare il link che il sistema mette a disposizione per condividere il prototipo con collaboratori e clienti. Uso questo tool soprattutto quando ho realizzato una serie di wireframe dettagliati per trasformarli in un prototipo high-fidelity

UXPin (http://www.uxpin.com)
UXPin mette a disposizione una libreria di componenti UI ed un editor grafico ricco di funzionalità. Gestisce agevolmente i layout responsive e li presenta dinamicamente in base al device che il cliente o utente sta usando. Usatelo se volete una piattaforma completa per gestire un progetto di interaction design dal primo sketch fino al prototipo interattivo.

Solidify http://www.solidifyapp.com/
E’ un tool ideale per il testing sugli utenti. Oltre a creare wireframe interattivi multi-devices vi permette di tracciare le attività degli utenti a cui li sottoporrete (il sistema analizza click rate ed aree di touch, percorsi e tempi di interazione, etc) e di avere a disposizione un report sulla loro esperienza d’uso. Lo uso per condurre sui wireframe test scenario-based e sessioni di A/B testing.

In conclusione possiamo dire che questi strumenti ci aiutano a saldare l’anello tra il wireframing e il rapid prototyping.

Sottolineo che, oltre a quelli che ho elencato, ci sono in rete altri tools validi ed interessanti per il wireframing interattivo. Cito almeno Mockflow, Axure e JustinMind.

Provateli e fatemi sapere come vi trovate.