“Abbiamo una grande idea, vogliamo farci un’App!”

Questa è la frase tipica che sentiamo dai nostri clienti che, pronti a iniziare l’”avventura” del loro nuovo business, ci chiedono fin da subito di creare l’interfaccia per app iPhone e Android.

Il processo corretto, però, prevede degli step preliminari al design dell’applicazione, fondamentali per lo sviluppo – intelligente e funzionale – di App iOs e Android: la creazione dei prototipi per App.

 

Prima di lavorare alla grafica delle applicazioni, infatti, è doveroso ragionare sull’interfaccia utente e sulle possibili soluzioni di interattività ovvero alla usability dell’applicazione stessa, da condividere e definire con il cliente, che beneficerà alla riuscita del progetto.

Si presuppone ci sia stato un incontro preliminare con il cliente per definire le linee guida utili al processo di sviluppo del mockup come, ad esempio, analisi del mercato, sondaggi, analisi del business, scelta del tipo di business, così da definire efficacemente tutti gli elementi e le caratteristiche che andranno a popolare l’applicazione.

Ma andiamo a vedere cosa si intende per creare prototipi per app. Il prototipo, per essere definito tale, necessita di due fasi: il disegno del wireframe e lo sviluppo del mockup.

Una distinzione: wireframe e mockup.

Il wireframe è lo scheletro di un App che aiuta a mostrare i concetti di navigazione e alcuni dei contenuti di base delle varie schermate. Lo scopo del wireframe è quello di aiutare a decidere e concordare, assieme al cliente, il layout e gli aspetti riguardanti la navigazione che l’applicazione avrà.

È possibile creare wireframe con diversi tool online per wireframe come, ad esempio, Moqups, Pop e Balsamiq, quest’ultimo a nostro avviso, il migliore e più specifico per questa fase vista la sua semplicità e dinamicità nell’utilizzo. Si può anche delineare un wireframe in Photoshop o Fireworks se si vuole, o addirittura schizzandolo a matita su un foglio di carta ma, l’importante, è capire che il fine è ottenere una visualizzazione veritiera di come l’App iOS e/o Android funzionerà.

Il mockup, invece, serve anzitutto da analisi preliminare per sviluppare applicazioni. È la versione più vicina a quello che sarà il prodotto finale, è il wireframe (approvato dal cliente) perfezionato e ridefinito con design e usabilità dell’interfaccia utente. Una simulazione realistica, anche se statica, dove è presente già il look & feel* da condividere con il team dei developer che utilizzeranno per sviluppare l’applicazione per device definitiva.

per look & feel si intende tutto ciò che caratterizza l’aspetto visivo del progetto come, ad esempio, font/caratteri istituzionali, scala cromatica, set di icone, stili di immagini e pattern.

 

 

Oltre a quanto già scritto sui mockup, in dotIT pensiamo che disegnare mockup per applicazioni iOS e Android (come anche ad esempio prototipi di studio per watch) è un passo fondamentale anche perché è possibile testare la user experience* del layout prima di aver scritto una sola parola di codice. E, eventuali modifiche in questa fase, sono facili e più veloci da gestire, rispetto a una modifica da fare su una mobile application gia programmata e pubblicata negli store.

La User experience in gergo chiamata UX design, è un processo che guida gli utenti a raggiungere con successo i propri obiettivi nel modo più efficace e piacevole quando si interagisce con un prodotto, che sia esso un applicazione, un software o un sito web.

I Mockup tools che utilizziamo per mockup statici sono i software del pacchetto Adobe, ovvero Illustrator, Photoshop e, ultimo arrivato della casa, il potentissimo Experience Design che promette proprio di semplificare e velocizzare il processo di definizione dei mockup.

Ma in dotIT non ci fermiamo ai mockup statici. Infatti ai nostri clienti presentiamo in anteprima alcune delle interazioni e delle animazioni che saranno presenti nelle loro App grazie all’utilizzo di software di animazione come Principle e Atomic.
Un test utente preliminare che è la versione più vicina all’app definitiva, dove i clienti avranno la possibilità di toccare con mano ciò che sarà la loro futura app.

Conclusioni

Software quali Moqups, Balsamiq e Pop, sono strumenti utili allo sviluppo di wireframes ma, per definire un percorso che va dall’idea al prototipo di un’applicazione, è fondamentale farsi aiutare da un team di consulenti che abbia al suo interno sia esperti in comunicazione visiva sia esperti di sviluppo mobile application. Infatti crediamo che affiancare la creazione del linguaggio visivo e di una comunicazione adeguata alla programmazione delle App possono dare il valore aggiunto e determinare il successo di un’applicazione mobile e, in generale, di tutti i progetti digitali.