Personal tools
Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Tap, swipe, pinch, bump... e il clic?

Sep 16, 2014

Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Progettare e prototipare una nuova App sono le fondamenta per una buona riuscita: se il cemento è sabbioso basterà un "tap" di troppo a far crollare il castello

Sviluppare applicazioni per device (smartphone, tablet e surrogati) richiede un’analisi preliminare, se non pari, addirittura superiore a quella di un sito. Lo stesso dicasi per la realizzazione di siti web in ottica “mobile first”.

Le dimensioni dello schermo, il modo in cui l’utente può interagire con la nostra app, le molteplici situazioni in cui lo stesso utente si può trovare nel momento in cui la utilizza e addirittura il numero di zampe di cui dispone (leggi l’articolo fino in fondo e mi darai ragione ;-) sono tutti fattori determinanti da tenere sotto controllo, dall’analisi alla pubblicazione sullo store.

In questo post ho raccolto alcuni strumenti che possono aiutare nella fase di progettazione e protipazione su mobile.

Balsamiq - Mockups to Go

https://mockupstogo.mybalsamiq.com/projects

Chi abitualmente usa Balsamiq per la realizzazione di wireframe può trovare molto utile Mockups to Go, una raccolta di simboli e interfacce condivise dalla community e riusabili nei propri progetti.

Sono divise in categorie per tipo di applicazione, tra cui Android, iOS, Mobile Devices, Web Apps e molte altre. Utili anche per progetti desktop.

 

Pop - Make anyone’s app a reality

https://popapp.in/

Se i vostri migliori amici sono ancora il foglio e la matita allora Pop può aiutarvi a condividere i progetti con il cliente senza correre il rischio di lasciare una scia di post-it nel corridoio (mi dicono che esista una tecnica precisa per staccare un post-it dal blocchetto evitando che il suo potere adesivo soccomba al primo starnuto… personalmente non ho ancora raggiunto questo grado di illuminazione -__-).

Con Pop è sufficiente fotografare e organizzare i propri progetti, aggiungendo successivamente le interazioni tra diverse visualizzazioni definendo collegamenti e aree sensibili. E’ disponibile per iOS, Android e Windows Mobile.

 

Invision - A Prototyping, Collaboration & Workflow Platform

http://www.invisionapp.com

In azienda usiamo con soddisfazione Invision da almeno un paio d’anni per condividere progetti con i clienti. I principali punti di forza sono l’attenzione all’usabilità e alla facilità d’uso (non ho mai dovuto spiegare a nessuno come aggiungere un commento a una bozza grafica), seguiti da un costante e continuo miglioramento di tutte le funzionalità: non ultima la possibilità di rendere navigabili i prototipi direttamente da mobile.

 

pttrns - Library of iPhone and iPad user interface patterns

http://www.pttrns.com/

Se stiamo iniziando un nuovo progetto ma da oltre 2 ore la lavagna rimane immacolata, possiamo stimolare i neuroni del lobo prefrontale analizzando i patterns che altri prima di noi hanno applicato per la risoluzione di un problema (navigazione, login, commenti, mappe, notifiche, foto, …).

Pttrns ne raccoglie a decine, già classificati per tipologia e accuratamente selezionati per qualità.

 

Mobile Patterns

http://www.mobile-patterns.com/

Più laconico di Pattrns, anche Mobile Patterns ha una libreria di schermate organizzate per tipologia. In questo caso troviamo anche esempi per Android.

 

Tethr - The last UI kit you'll ever need

http://www.invisionapp.com/tethr

Lo stesso Invision citato in precedenza mette a disposizione una succosa raccolta di PSD di altissimo livello (8 PSD contenenti 138 templates e più di 250 componenti) per passare facilmente dalla prototipazione alla realizzazione del mockup grafico (solo iPhone).

 

Free iOS 7 Illustrator Vector UI (from Mercury)

http://mercury.io/blog/free-ios-7-illustrator-vector-ui-kit-for-iphone-and-ipad

Se ai PSD preferite i vettoriali, ecco un'impressionante collezione di elementi per riprodurre fedelmente l’interfaccia di iOS7.

 

Touch gesture Icons

http://www.mobiletuxedo.com/touch-gesture-icons/

Per completare la proposta grafica non resta che evidenziare “in statico” le azioni che renderanno viva l’applicazione, aggiungendo al mockup le icone messe a disposizione da Mobile Tuxedo. Il set completo è disponibile in formato PNG, PSD e EPS.

 

Last but not least: e l’usabilità?

Ho parlato finora di progettazione e prototipazione, ma alla base di tutto deve guidarci il mantra dell’usabilità a tutti i livelli: nessun potenziale utente deve essere discriminato, come ci insegna nientepopodimenoche Jackob Nielsen (guru dell’usabilità) con “Mobile Usability for Cats: Essential Design Principles for Felines"

Il sommario parla chiaro:

"gli utenti felini richiedono alcune attenzioni speciali, tra cui aree sensibili più larghe per le zampe, animazioni continue e una chiara vocalizzazione"

Scherzi a parte, consiglio a tutti la lettura dell’articolo: l’ironica metafora gatto-utente vi strapperà non poche risate ma vi lascerà anche molti spunti di riflessione, mettendo in evidenza gli errori di progettazione più comuni che compromettono l’usabilità delle applicazioni.

Alcuni esempi:

  • Il problema di usabilità più comune [durante i test fatti con i gatti] era determinato dalla grandezza dell’area di tap [tocco] nella maggior parte delle interfacce. Tutti i gatti adulti mostravano una evidente frustrazione [vengono definiti “irritati e ostili”], perfino soffiando, dopo aver involontariamente chiuso l’app [Fruit Ninja] che stavano usando.
  • Doppi e tripli tap sono molto comuni tra i felini, soprattutto nei gattini: il risultato di qualsiasi multi-tap dovrebbe essere più veloce, più rumoroso o più lampeggiante di un singolo tap.
  • L’animazione è molto importante: di fatto se la vostra app non “si muove” o non lampeggia, è completamente inutile.
  • Se è vero che la maggior parte degli utenti non legge le istruzioni scritte, i gatti le ignorano del tutto: si limitano a battere sullo schermo ripetutamente aspettandosi risultati immediati. D'altronde l’app più performante era Fruit Ninja che si apriva direttamente con musica, cocomeri rotolanti e perfette “artigliate” sullo schermo.

Next step?

Stavo pensando a un'app per iPad per la gestione delle ordinazioni di pranzo e cena.
Si tratta di fotografare tutte le scatolette, buste e croccantini disponibili in dispensa, classificandoli opportunamente per marca, varietà (pollo, pesce, manzo, …) e formato (85-175-400 gr, buste o lattine).

Lo scopo? Mostrare ai miei due coinquilini a quattrozampe tutte le possibili opzioni, sperando che la scelta anticipata possa portare a una riduzione degli sprechi. Non penso capiti solo a me il pattern:

  1. "oh che buoni i tocchetti di pollo con gustoso formaggio, in assoluto i miei preferiti”
  2. ... segue acquisto del multipack da 12 pz. in offerta
  3. “no, ho cambiato idea, adesso voglio i trancetti di tonno in gelatina…"

Foto gatto by http://nbalivescorenow.com/?p=6437
Copertina foto via NetMagazine

Filed under: , , ,
comments powered by Disqus