UX/UI

Come realizzare il mockup delle app

| 22 Novembre 2016 | Andrea Maioli
mockup Instant Developer

Negli ultimi articoli dedicati al design delle app abbiamo visto come scrivere i documenti preliminari: User ProfileUser Story e Business Model. Con questo materiale possiamo affrontare la creazione del mockup che permetterà di valutare e testare il vero volto dell’app.

Dato che il mockup è un disegno preliminare delle videate dell’app, esso può essere eseguito con qualunque strumento, anche con carta e penna. Tuttavia oggigiorno ci sono diversi strumenti online, anche gratuiti, che permettono di ottenere velocemente prototipi animati delle nostre schermate. Basta googlare mockup tools o prototyping tools per averne una bella lista. Questi strumenti contengono già template e icone degli elementi di interfaccia utente più frequenti, quindi si possono disegnare videate con un feeling molto simile a quelle finali.

Selezionato lo strumento, dobbiamo capire di che cosa dobbiamo fare il mockup. Non vi consiglio di mockuppare tutte le videate dell’app, dal login ai setting. La strategia migliore è quella di partire dalle User Story, cioè di fare un mockup per ogni User Story descritta nel documento relativo. In questo modo otterremo la visualizzazione dei soli processi principali dell’app senza essere distratti da tutto il resto, e potremo così avere un prototipo più centrato sulle funzioni più importanti.

Infine qualche consiglio sullo stile. Nelle app, less is more, quindi resistete alla tentazione di aggiungere menu hamburger con ogni genere di funzione. Siate chiari e concisi nell’uso del testo, non dite nulla in più dell’indispensabile, e sfruttate il potere delle immagini e la riconoscibilità delle icone, che spesso valgono più di mille parole. Non fate aprire mai la tastiera, se non quando è proprio necessario evitando il più possibile l’uso di campi di input, e minimizzate il numero di tap per eseguire il processo.

Prima di mettersi all’opera, un buon consiglio è quello di studiare sia i competitor che altre applicazioni simili come processo. Potrete apprezzare alcune loro idee e troverete anche come differenziarvi. È quello che ho fatto prima di partire con il mockup di ToBuy, che potete trovare qui.

È interessante confrontare il mockup con l’app finale che potete provare in preview qui. In effetti le differenze sono minime perché il mockup e l’app condividono lo stesso tema grafico, che è quello nativo del dispositivo.

Con questo articolo concludo questa brevissima panoramica sul design delle app. A questo punto possiamo iniziare a vedere come si passa dal mockup all’app, cioè affrontare le fasi dello sviluppo vero e proprio. Se nel frattempo avete realizzato qualche mockup e volete qualche consiglio su come ottimizzarlo, sono a vostra disposizione.

Andrea Maioli
CEO & Co-Founder
Mi occupo di Instant Developer, dalla mattina presto a notte inoltrata. Mi interesso di ingegneria del software, di natural language processing e di tutti i modi per sfruttare al meglio le nuove tecnologie.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.


Potrebbe Interessarti

Instant Developer Foundation 22.5 e Fluid: il futuro comincia da qui

La versione 22.5 di Instant Developer Foundation rappresenta un passo tangibile verso il futuro di Instant Developer. Il nuovo motore grafico Fluid è infatti il...

Leggi Tutto

Webinar: Le novità di Instant Developer Cloud 22.5

Nel webinar sulle novità della release 22.5 di Instant Developer Cloud , Giuseppe Lanzi, responsabile dei reparti Customer Care e Systems e Paolo Giannelli, responsabile...

Leggi Tutto

Instant Developer Cloud 22.5: esperienze migliori per te e il tuo software

Instant Developer Cloud 22.5 è una versione progettata per una migliore esperienza di utilizzo da parte degli sviluppatori e di fruizione delle applicazioni per gli...

Leggi Tutto

Rimani Aggiornato

Iscriviti alla nostra newsletter per ricevere aggiornamenti su novità, eventi, release, webinar e tante altre notizie sui prodotti Instant Developer.