Servizi web per creare mockup di applicazioni mobile

Per un nuovo progetto di lavoro, avrò la necessità di realizzare un mockup di un’applicazione iOS che dovremo sviluppare. In questo giorni ho dedicato un po’ di tempo per cercare un servizio web che mi permetta di realizzare un mockup da condividere con il resto del team.

La scelta di utilizzare servizi web e non app disponibili ad esempio su iPad, è stata dettata da alcune mie necessità. Un servizio web mi permetti di avere più flessibilità, permettendomi di lavorare indipendentemente dal computer su cui mi trovo (spesso mi trovo infatti ad alternarmi tra PC¹ e Mac). Utilizzare mouse e tastiera, inoltre, mi è sicuramente più comodo rispetto a passare la giornata chino sul display del mio iPad.

Un altro aspetto fondamentale dei serivizi che ho valutato è la possibilità di condividere il lavoro con altre persone. Dovendo lavorare con diverse altre persone (non solo sviluppatori) su questo progetto, avrò la necessità di condivedere con loro il mockup, in modo che possano valutarlo e darmi un loro feedback. È importante, quindi, che il servizio abbia la possibilità di condividere il mockup e ricevere eventuali commenti.

Questi sono i principali fattori che hanno influito nelle mie ricerce e nella mia scelta finale. Di seguito troverete i principali servizi che ho testato. Troverete una breve descrizione e alcuni pro e contro per ognuno di essi.

Balsamiq

Balsamiq è uno degli strumenti di prototipazione più famosi tra gli addetti al settore. Dispone sia di un’interfaccia web, che di un’app desktop (disponibile per Windows, OS X e Linux).

Balsamiq si basa sull’idea di utilizzare componenti che sembrano disegnati a mano, per focalizzare così l’attenzione sulla UX, nascondendo per un momento l’interfaccia vera e propria. L’utente ha comunque la possibilità di cambiare la visualizzazione, per passare a una grafica con componenti più definiti, utili magari in una fase finale del mockup.

Il grande assente è la possibilità di provare i mockup tramite live prototyping². Al momento questa funzionalità non è disponibile, o comunque io non sono riuscito ad utilizzarla :].

Pro

• Possibilità di lavorare sia da web che tramite l’app desktop
• Componenti facilmente configurabili. È possibile, ad esempio, creare una tabella con diverse tipologie di celle semplicemente utilizzando del testo formattato correttamente

Contro

• Pochi componenti per iOS (non sono disponibili, ad esempio, le navigation bar o le tab bar)
• Mancanza live prototyping

Prezzi

L’applicazione desktop ha un costo di 79$, per una singola licenza (ad aumentare poi in base al numero di utenti).

La piattaforma web dispone di piani che partono dai 12$/mese a salire, a seconda del numero di progetti attivi. È disponibile una preview gratuita di 30 giorni.

FluidUI

FluidUI gode anch’esso di un discreto successo. Permette di realizzare mockup per tutte le maggiori piattaforme mobile (iOS, Android e Windows Phone), ma anche per web e applicazioni desktop.

I componenti disponibili sono davvero tanti, quasi tutti quelli principali della piattaforma sono utilizzabili per creare mockup.

Molto utile è la possibilità di creare prototipi interattivi, inserendo link e azioni tra le varie schermate del mockup. Una volta termitata la fase di disegno, è possibile testare il mockup direttamente dalla piattaforma web.

FluidUI dispone anche di un’app per iOS e Android che permette a chiunque ti testare il mockup che abbiamo realizzato. Basterà condividere il link che viene generato oppure scannerizzare direttamente il codice QR che ci viene proposto.

Pro

• Live prototyping, sia da browser che direttamente da device (iOS o Android) tramite l’apposita app
• Ampia scelta di componenti

Contro

• L’interfaccia web è macchinosa, spesso si fatica a posizionare e modificare gli elementi
• I componenti sono poco personalizzabili

Prezzi

FluidUI mette a disposizione un piano gratuito, in cui è possibile avere un solo progetto con 10 schermate. In alternativa, sono disponibili tre piani a pagamento: 12$/mese, 29$/mese e 49$/mese, a seconda del numero di progetti attivi.

NinjaMock

NinjaMock è sicuramente il servizio com il maggior numero di componenti disponibili. Non manca davvero nulla: bottoni, share sheet, barre di navigazione. Insomma, qualsiasi componente è disponibile per realizzare mockup!

I componenti somigliano a quelli utilizzati da Balsamiq, ovvero disegnati a mano, seppure risultino più precisi e definiti. Anche in questo caso lo scopo è focalizzare l’attenzione sulla UX.

In NinjaMock a volte sembra di lavorare con Interface Builder: vengono proposte guide per allineare gli elementi, proprietà per cambiarne la dimensione o il font. Il tutto però rimane semplice e veloce, basta selezionare gli elementi e loro si posizioneranno nella parte corretta della schermata. Interessante è anche la possibilità di creare manualmente dei componenti personalizzati, mediante uno strumento di disegno libero.

Anche NinjaMock permette di avere un live prototyping, in cui testare il mockup realizzato. Per creare i collegamenti e le azioni sono disponibili apposite proprietà nei componenti.

È possibile creare mockup per iOS, Android, Windos Phone, Surface e web.

Pro

• Archivio di componenti completo e facilmente configurabili
• Ottima interfaccia web

Contro

• La preview del mockup a volte non funziona, bisogna ricaricare la pagina diverse volte prima che riprenda a funzionare

Prezzi

NinjaMock offre un piano gratuito, in cui si possono creare senza limiti fino a 3 progetti. In aggiunta, sono disponibili piani da 15$/mese e 25$/mese, sempre con un numero di progetti maggiori.

Invision

Invision si propone più come una piattaforma di collaborazione che un servizio per creare mockup.

Invision, infatti, non permette di creare mockup da zero, ma è possibile caricare immagini, che avete in precedenza disegnato con altri strumenti (a mano libera oppure con Photoshop, come preferite). Dopo aver caricato le vostre schermate, potrete collegarle tra di loro, creando così i vari link che vi permetteranno di realizzare un prototipo interattivo, testabile direttamente dalla piattaforma.

I punti di forza di Invision sono due: la collaborazione e il live prototyping, che fornisce ottimi strumenti per creare animazioni, condividere idee e ricevere feedback da tutto il team.

È un servizio molto buono, più indicato per chi ha già una base grafica definita e vuole concentrarsi sui dettagli o migliorare l’esperienza generale dell’applicazione.

Pro

• Piattaforma curata e completa
• Ottima fase di live prototyping

Contro

• Non è possibile creare mockup da zero

Prezzi

Invision dispone di un piano gratuito, in cui è possibile creare un solo progetto. Sono disponibili, poi, piani da 15$/mese, 25$/mese e 100$/mese al mese, a seconda del numero di progetti.

And the winner is.. NinjaMock!

Il mio vincitore è senza dubbio NinjaMock! Di questo servizio ho apprezzato subito la facilità con cui si riescono a creare le interfacce. È sufficiente cliccare i vari componenti per vederli posizionati, per poi modificarli come più ci piace. L’interfaccia è chiara, funzionale e completa. La presenza di un piano gratuito, inoltre, è un punto a favore, anche se ha influito solo in parte sulla scelta.

Interessanti sono anche le possibilità di ricevere commenti sul prototipo interattivo, che può aumentare la collaborazione e il lavoro all’interno del team.

Fra qualche settimana inizierò ad utilizzare questo strumento a fondo, creando l’intero prototipo. Vi farò sapere se la scelta è stata quella corretta, oppure se dovrò cambiare in corsa.

Avete altri servizi da suggerirmi? Voi cosa utilizzate nella vostra fase di prototipazione? Fatemelo sapere :]