Mockup e wireframe con Balsamiq

Seppur sottovalutata da molti programmatori alla prime armi (e non solo), la creazione di mockup delle schermate dei prodotti che si andranno a realizzare e’ un processo molto importante nel ciclo di vita del prodotto, alla stregua della scrittura del codice. Un buon programma deve anche essere percepito come tale dagli utilizzatori, altrimenti fallira’ inesorabilmente il suo obiettivo.

Progettare le schermate con cui l’utente andra’ ad interagire prima di mettere le mani sul codice aiuta a capire, e a far capire, il flusso informativo e l’operativita’ generale, permette di focalizzarsi su quello di cui ci sara’ bisogno azione dopo azione, fa emergere eventuali legami tra dati che ad una prima analisi erano sfuggiti. Inoltre puo’ essere un piacevole momento di creativita’. Se poi c’e’ uno user designer (aka grafico) che si puo’ dedicare a tutto questo, noi poveri poeti del codice avremmo risolto la parte che tipicamente ci risulta piu’ ostica di tutte: la grafica.

Anche Microsoft Paint o Gimp possono essere utili, ma un software che eviti di conoscere nozioni di grafica e permetta di andare subito allo scopo, quello di creare prototipi del prodotto finale, schizzare le sue schermate  e modificarle successivamente in fretta, e’ sicuramente preferibile. Per questo ho provato la versione desktop di Balsamiq, un software che fare tutto quello fino a qui descritto, e anche qualcosina di piu’.

Multipiattaforma (Win, Mac e Linux grazie al runtime AIR), l’utilizzo del programma e’ semplice e intuitivo, la grafica e’ apparentemente scarna e ricorda quella di un blocco per gli appunti. Anche l’aspetto finale del lavoro sembrera’ un disegno schizzato: linee non perfettamente dritte e marcate, caratteri non tutti allineati. Ma non e’ un errore, e’ una precisa scelta stilistica: sembra davvero di trovarsi davanti ad un prototipo e il cliente non avra’ difficolta’ a capire che quanto da lui commissionato non avra’ quell’aspetto definitivo, ma seguira’ le linee proposte e potra’ comunque sperimentare come muoversi tra le schermate, le relazioni tra i componenti e il look’nd feel generale.

Ogni controllo inseribile ha alcune parametrizzazioni: nelle label, ad esempio, il testo da visualizzare e il font, nei bottoni la grandezza e il testo dello stesso, nelle liste i campi che appariranno, nei menu’ le voci e via di seguito.

Una feature molto interessante riguarda la possibilità di aggiungere nuove librerie che estendono i controlli esistenti. Se Balsamiq arriva con supporto per mockup di programmi desktop, siti web e interfacce iPhone, con qualche aggiunta sara’ possibile prototipare anche per Blackberry, Windows Mobile, Android e persino iPad. Senza contare le decine di layout per siti web gia’ ampliamente sperimentati e conosciuti dalla Rete, dai quali partire per realizzare i propri.

Esiste anche una versione gratuita fruibile dal web di Balsamiq, che ha alcune limitazioni come il mancato supporto all’editing di piu’ file contemporaneamente, non permette l’aggiunta di nuove librerie e di salvare le proprie creazioni. Esportando pero’ il lavoro fatto, salvandolo in un file di testo e reimportandolo la volta successiva, si puo’ comunque aggirare quest’ultima.

Ci sono comunque margini di miglioramento: mi sarebbe piacuto poter applicare uno stile ad un insieme di controlli, come ad esempio le label, in modo da non dover cambiare la grandezza del font ad ognuna di esse singolarmente, non sempre gli allineamenti fanno andare i controlli dove vogliamo che vadano e qualche volta, con diversi progetti aperti, il programma necessitava di un riavvio pena lentezza e malfunzionamento.

Concludendo la mia esperienza personale con Balsamiq e’ stata davvero positiva. Ammetto di averlo usato, al massimo, per prototipare un programma desktop da una decina di schermate collegate tra loro, ma in fase di confronto con il cliente il risultato e’ stato molto profiquo. Dopo quella demo, ho visto usare la versione online da altri miei colleghi che erano rimasti piacevolemente stupiti dalla velocita’ con cui avevo cambiato “al volo” alcuni elementi per riadattarli a quanto ci stavamo dicendo.

Chiudo con un bel video, sempre piu’ esplicativo di mille parole:

httpv://www.youtube.com/watch?v=zLysy3IPfFI

Leave a Reply