Dall’idea al prototipo di un’applicazione (Gratuita)

Sviluppa, crea e codifica i tuoi sogni.

Questo non è solo il mio motto è la filosofia che mi permette di mantenere un filo logico e una continuità tra la miriade di cose che dovrei fare.

Tutti abbiamo dei progetti da portare avanti, che siano di lavoro, hobby o studio siamo sempre e costantemente all’inseguimento senza sosta di un’idea da trasformare in realtà.

Se ogni mattina ti svegli pensando a tutte le cose che devi fare e ancora non hai fatto, non preoccuparti! Siamo tutti sulla stessa barca. 

Tutti navighiamo in acque torbide. Ti basta pensare a quelle volte in cui ti sei ritrovato a dire: “Bene! Da domani inizio a sviluppare la mia applicazione” oppure: “Promesso! Domani comincio a studiare”.

Oggi è già domani!

Il problema è che poi per un motivo o per l’altro, riusciamo sempre a procrastinare ad un altro giorno. I progetti da sviluppare, da uno diventano due, da due diventano dieci e riusciamo ad accumulare talmente tante idee e progetti innovativi che finiamo per dimenticarcene di alcuni, se non addirittura di tutti.

Solo in pochi riescono ad uscire dallo stagno e a raggiungere il fiume dell’eterna beatitudine.  Eh si! Perché come sempre tra il dire e il fare, c’è di mezzo il mare. E che mare!

Ma cosa c’azzecca, lo sviluppo di applicazioni, con tutto questo?

Sviluppare un progetto visto fare dagli altri, magari nei tutorial o in qualche video, sembra qualcosa di estremamente semplice e lineare. Si fa questo, metto quest’altra cosa, scrivo questo codice ed il gioco è fatto. Ecco che l’applicazione ha preso vita.
Chi ha già un po’ di esperienza acquista degli automatismi in grado di far sembrare un processo produttivo, perché di questo si parla, semplice e banale.
Un po’ come guardare una corsa di formula 1. Guidano macchine che sfrecciano a più di 300 km/h come se utilizzassero dei modellini giocattolo. Eppure dietro c’è una preparazione che dura e va avanti da tutta la vita.

Il fatto è che: a guidare una macchina siamo capaci tutti, il difficile è quando ci danno tra le mani una supercar.

Cosa imparerai da questa lezione: dall’idea al prototipo di un’applicazione

Nella lezione precedente ti ho consigliato di scrivere su un foglio di carta l’idea della tua applicazione. In questa lezione voglio affrontare tutti i passaggi che ti permetteranno di trasferire l’idea, che hai in testa, in un progetto di un’applicazione funzionante su foglio di carta.

Si esatto! L’applicazione funzionerà su un foglio di carta!

Nella prima parte della lezione cercherò di focalizzare l’attenzione sul concetto di:

  1. Idea emulativa: posso o non posso partire da un’applicazione esistente per creare un nuovo prodotto?
  2. Idea innovativa: come sviluppare un’idea non ancora presente sul mercato.

Da entrambe le scelte nascono domande alle quali daremo una risposta prima di finire in un tunnel senza via d’uscita.

Una volta che avrai ben chiaro il concetto d’idea, passerai a svilupparla mediante dei passaggi pratici e fondamentali per qualsiasi tipo di progetto. Quindi nella seconda parte della lezione:

  • Mind map (mappa mentale): trascrivere un’idea su un foglio.
  • Sketch/storyboard o prototipo di un’applicazione: realizzare su un foglio un’applicazione funzionante.

Sei pronto? Apriamo le danze!

la regola IPA

I 3 passaggi fondamentali che non devi mai saltare quando sviluppi un’applicazione

In questo corso non parlo solo delle basi della programmazione, ovviamente necessarie, qui parlo del modus operandi che ti aiuta e facilita nello sviluppo di una qualsiasi applicazione e progetto personale.

Infatti ciò di cui ti parlerò non riguarderà solo il mero aspetto della creazione di un’applicazione, bensì tutti i passaggi utili a qualsiasi progetto informatico o personale.

Voglio farti focalizzare subito l’attenzione sui 3 punti necessari per sviluppare qualsiasi progetto:

  1. Idea
  2. Prototipo o storyboard
  3. Applicazione

Saltare uno dei 2 punti precedenti al 3 è ciò che decreterà la nascita o meno della tua applicazione.

come sviluppare un'idea

1# l’idea. Come svilupparla e come focalizzarla senza perderla di vista

La ricerca di un’idea la paragono sempre alla ricerca della felicità: tutti la cercano ma in pochi la trovano.

Di certo non c’è un modo per creare un’idea, le idee non si creano, né posso dartela io o qualcun altro. L’idea deve appartenere a te e deve venire da te.

Quando nasce un’idea, sono più che sicuro che è quando ci si alza o ci si infila a letto, iniziano anche i primi dubbi e perplessità:

  • Esiste già un’applicazione simile? Se si, posso seguire la sua strada e perfezionarla?
  • La mia idea è completamente nuova! Riuscirò a farla emergere?

In entrambi i casi vedrai che i passaggi successivi sono sempre gli stessi. Però prima bisogna analizzare se entrambe le strade sono percorribili.

Un’idea si può emulare? Spezziamo un falso mito!

Nell’ambito della programmazione le nuove idee possono sempre affiorare guardando quello che c’è attorno. Si dice che i più grandi artisti sono diventati tali emulando e perfezionando ciò che i loro maestri gli hanno lasciato in eredità.

Più o meno qualcosa del genere può avvenire nello sviluppo di applicazioni.

Sicuramente avrai fatto caso a come moltissime applicazioni non sono altro che un riadattamento di applicazioni più vecchie, in disuso o persino contemporanee. Telegram è simile a WhatsApp, Viber a Skype e se ci spostiamo nell’area giochi, le applicazioni sono sempre più simili tra loro.

Bada bene che simile non vuol dire uguale. 

Tante volte mi sento dire:

  • Utente: Ehi Peppe! Vorrei sviluppare un’applicazione simile per certi versi all’applicazione X. Secondo te è una buona idea?
  • Peppe: Certo che si! L’emulazione con fine di miglioramento non è un crimine.

L’emulazione e la competizione tra gli sviluppatori è il motivo per cui oggi godiamo di applicazioni di alta qualità.

Se la tua idea nasce come miglioramento di qualcosa che già c’è nel mercato, sono sincero, è difficilissimo arrivare a soppiantare le big app del tuo settore. Difficile ma non impossibile!

La prima cosa da fare è porsi delle domande:

  • In cosa la mia app potrebbe differenziarsi dall’app X?
  • Sono differenze che l’utente medio noterà?
  • La mia app risulterà essere un prodotto realmente necessario?
  • Le differenze che voglio apportare mi faranno guadagnare una fetta di mercato?

Se hai risposto SI ad una delle domande, allora la tua idea ha senso d’esistere.

Un esempio degli ultimi tempi, di ottima emulazione e idea innovativa, è stata sicuramente quella delle app di messaggistica con protezione e autodistruzione delle conversazioni. Ovvero hanno creato un WhatsApp i quali messaggi non potessero essere intercettati.

Hai scaricato un’app simile? Molto probabilmente si e molto probabilmente no. L’obiettivo di questi sviluppatori, oltre a portare avanti un’idea innovativa, frutto dell’emulazione e miglioramento di applicazioni già esistenti, è stato pienamente raggiunto. Infatti, io oggi te ne sto parlando e loro sicuramente avranno ottenuto un’ottima fetta di mercato.

Quindi se il tuo obiettivo è quello di creare un’applicazione, che ne migliora un’altra già esistente, continua pure a seguire il corso.

Un’idea innovativa. Sono sicuro che questa è l’invenzione del secolo!

Forse è l’invenzione del secolo o forse non lo è. Forse lo è ma non è il periodo adatto per svilupparla.

Ecco la mia idea innovativa: sviluppare un’applicazione per parlare con gli astronauti che sbarcheranno su Marte.
Figooo, nessuno c’aveva pensato prima! Questa sarà la prima app del suo genere.

Se il tuo intento è quello di guadagnare, con un’idea innovativa trasformata in applicazione, devi inesorabilmente confrontarti con il mercato e con i trend del momento. 

Se un tempo bastava rilasciare un’applicazione ben fatta (definirò il concetto di “ben fatta” durante il corso) per essere più che sicuri che l’app venisse scaricata, oggi non è più così. L’App Store è invaso da milioni di applicazioni (nel 2014 erano 1.5 milioni, quest’anno verranno superati i 2) e sono solamente un centinaio quelle ad essere definite come: must have.

Quindi la tua idea, per quanto bella e figa possa essere, deve affrontare quel milione di applicazioni che si contendono le prime 100 posizioni.

Ok capito! Ma chi è che sceglie le prime 100 app? Tu!

Si esatto! Prima di essere uno sviluppatore sei e continuerai ad essere un consumatore. Mentre i programmatori sono pochi i consumatori sono tutti gli Apple users in circolazione: stimati in 800.000.000 di account Apple.

Di sicuro non si metteranno d’accordo, tutti e ottocento milioni, per decretare le fantastiche 100. Deve esserci un modo che li spinge a scegliere un prodotto rispetto ad un altro. Quale?

La risposta è nelle stelle, no stalle, anzi no! È nel marketing.

Tutto viene mosso da campagne di marketing. Se dietro c’è una forte pubblicità, è stata creata una bella immagine del prodotto e sono stati messi a punto dei buoni motivi per cui si rende necessario il download di un prodotto, allora si! L’applicazione schizzerà tra le vette.

Il problema è che il marketing ha bisogno di capitali che chi è alle prime armi difficilmente possiede.

Come si procede quando non si posseggono i capitali?

Mai mollare. Quando non si hanno i fondi da assegnare ad un’operazione di marketing è necessario affidarsi alla forza dell’idea che si vuole realizzare.

Indubbiamente per noi, l’idea appena partorita, è sicuramente eccezionale. Da quello che hai appena letto sai che l’essere eccezionale non è condizione sufficiente per essere apprezzata dal vasto mondo dell’economia dell’App Store. Serve un modo per pesare il valore, che ha la tua idea, in termini di probabile successo.

Anche in questo caso è necessario interrogarsi sull’idea appena nata: Mira a risolvere un problema?

Tutte le applicazioni hanno uno scopo. Anche la tua deve averne uno. Se la tua idea è vaga, ad esempio: “Risolvere la fame nel mondo”, c’è il rischio di andare completamente fuori strada.
L’idea deve nascere come risposta ad un problema e non come una nuova domanda.

Quindi un’idea potrebbe essere: “Un’applicazione che unisce tutte le ONG e mette in contatto l’utente con ognuna di esse”, questa ad esempio è una risposta, che puoi chiamare idea, al problema della fame del mondo.

Un’idea come: “Voglio creare un nuovo social network” oppure “Voglio creare un nuovo gioco” ecc. non è un’idea! È un abisso. Sono il punto di partenza da cui nasce un’idea e non il punto d’arrivo.

Cosa faccio quando la mia applicazione è pensata per risolvere un problema?

Comincia guardandoti attorno. La prima cosa da fare è chiedersi: c’avrà pensato qualcun altro prima di me?

C’è solo un modo per scoprirlo: Google e App Store. Inizia a cercare su internet e nell’App Store se sono presenti prodotti che combaciano con ciò che volevi creare. Se ci sono probabilmente la tua idea rientra nella categoria trattata nel precedente paragrafo, quindi don’t worry! Hai sempre le stesse possibilità.

Nel caso la tua idea non esistesse e quindi è inedita, poniti questa domanda: per chi sarà utile l’applicazione?
Cerca il target dei potenziali clienti. Se la tua idea riguarda il settore dell’edilizia è probabile che la fetta di mercato che stai per servire non utilizza l’iPhone o è una composta da pochi utilizzatori (nicchia di mercato).

Ma fai attenzione!

Più utenti non vuol dire necessariamente più guadagno. Se la tua idea copre una vasta fetta di mercato non è automatico che i guadagni siano proporzionati, anzi, spesso le nicchie di utilizzatori sono più propensi a spendere per un prodotto. Il motivo? Nessuno prende in considerazione le nicchie ed è per questo che quando si presenta un prodotto innovativo si è disposti a spendere.

mappa mentale o mind map

Mind Map: la mappa delle idee. Cominciamo a lavorare in modo pratico costruendo la prima applicazione del corso

In questo momento ti sei appena alzato dal letto e stai provando a tirare le somme di ciò che ti è frullato in testa nella notte insonne che hai passato. A questo punto dovresti:

  • Avere un’idea di un prodotto nuovo o di un perfezionamento ad uno già esistente.
  • Sapere quale problema risolve.
  • Conoscere la nicchia o l’area d’utenza a cui è rivolta l’applicazione.

Scriviloooo! Prendi quel stramaledetto diario, quaderno, libro, pavimento, palmo della mano, schiena di tuo fratello e annota ciò che hai appena pensato.

Non lo dico io, lo dico tutti i maggiori esperti di business plan. Scrivere non solo evita di farti dimenticare ciò che hai appena pensato, ma aiuta a rafforzare in te la stima nei confronti del tuo progetto.

Le idee non sono mai fluide, soprattutto quando sono nella nostra testa. Esse si presentano sempre come concetti separati collegati da una macro categorie che è l’idea di partenza. 

Ti faccio un esempio parlandoti del mio progetto: il corso che stai seguendo.

Tutto il corso di sviluppo applicazioni iOS è incentrato sull’apprendere i concetti fondamentali che riguardano il come costruire un’applicazione partendo da zero. Ciò che ho appena detto, se consideriamo quanto ti ho esposto nei precedenti paragrafi, puoi considerarlo come il problema che mi sono posto.
Per risolverlo mi è venuta l’idea di insegnarti tali strumenti utilizzando un sistema pratico: parto da un’idea di un’applicazione e man mano che la sviluppo ti spiego la teoria e la pratica dei passaggi che andrai ad emulare per costruire l’applicazione.

Quindi anch’io per scrivere questo corso ho dovuto trovare un’idea che potesse risolvere il problema: come spiegherò i concetti.

L’applicazione che realizzerai e che realizzerò anche io, parte da un’idea emulativa. La mia idea è quella di insegnarti a sviluppare partendo dalla realizzazione di un’applicazione per la gestione degli appuntamenti – ammetto che non è il massimo ma ai fini dell’apprendimento è la scelta che mi permette di spaziare, in poco tempo, quasi tutti gli argomenti principali.

E inoltre ti confido che mentre scrivo questa lezione non ho ancora idea di che forma avrà l’applicazione. Tutte le idee non escono dalla testa come già formate, lo diventano man mano.

Una volta definita l’idea è necessario delinearne i contorni. 

Ok! L’applicazione è per gli appuntamenti e poi? Bisogna interrogarsi su tutto ciò che potrebbe ruotare intorno a questa idea. Ad esempio sai che l’applicazione serve alla gestione degli appuntamenti, ma appuntamenti di che tipo?

Di sicuro non esistono solo appuntamenti lavorativi. Quindi è necessario delineare quali tipi di appuntamenti deve trattare l’applicazione:

  • Gestirà solo gli appuntamenti di lavoro o anche ricreativi?
  • Se lo farà, svilupperò funzionalità diverse per ogni tipo di appuntamento?

A ogni caratterizzazione che darai alla tua idea, inizieranno a delinearsi tante sotto idee e tante scelte che potrebbero farti perdere il filo che le uniscono. C’è il rischio che la tua applicazione, da risolvere un problema A, finisca per risolvere il problema B o addirittura incasinarli entrambi.

Scrivere a questo punto potrebbe richiedere tanto tempo e tanta pazienza nel rileggere (ti basta guardare la lunghezza di questa lezione per capire quanto tempo occorre per rileggerla). Durante le fasi di sviluppo il tempo può giocare un ruolo importante e avere un sistema veloce per tenere sotto controllo le proprie idee diventa di vitale importanza.

In nostro aiuto, il saggista inglese Tony Buzan, famosissimo per le sue tecniche di memorizzazione e apprendimento, ha creato il concetto di mappa mentale.

La particolarità della mappa mentale, a differenza dei classici schemi, è che è di tipo gerarchico associativa.

Scopriamo insieme cosa vuol dire!

La costruzione della mappa delle idee

Prendi un foglio e al centro scrivi l’idea che vuoi sviluppare. Nel nostro caso al centro deve stare “applicazione appuntamenti”:

mind map costruire i rami

Ad ogni caratterizzazione dell’idea va creata una freccia che parte dal centro verso la nuova sotto idea. Così facendo vengono a crearsi due nuovi elementi:

  • Ramo: la freccia che collega il punto di partenza con la sottocategoria. Nell’esempio è la linea viola.
  • Foglia: la sotto categoria o sotto idea. Nell’esempio la foglia è il testo scritto sopra il ramo.

Ad esempio, i tipi di appuntamenti trattati dall’applicazione formano un ramo della mappa. Quindi dal centro della mappa dovrai far partire una freccia verso la nuova sotto categoria:

mind map costruire i rami

Anche un ramo può essere personalizzato aggiungendo uno o più sotto rami. Ad esempio l’applicazione potrebbe gestire diversi tipi di appuntamento in modo completamente diverso in base alle esigenze. Quindi potremmo inserire tanti sotto rami quante sono le specializzazioni che vorremmo trattare (lavorative e ricreative):

sotto rami di un mind map

Quello che hai appena creato, se l’avessi scritto avrebbe generato un testo più o meno di questa lunghezza:

L’applicazione appuntamenti permette di gestire diversi tipi di appuntamento in base alle tipologie più utilizzate. Quella ricreativa e quella lavorativa.

Data la ridotta lunghezza queste due righe per ora non sembrerebbero pesare. Prova a fare lo stesso esercizio non appena avrai finito il paragrafo e ti accorgerai di quanto tempo occorrerà per leggere e trovare le parole chiave.

Ogni ramo non deve obbligatoriamente essere collegato logicamente ad un altro. Questo ti permette di spaziare su più fronti sempre rimanendo collegato al tema principale.

Per esempio un altro ramo potrebbe essere quello relativo alle funzionalità o caratteristiche che deve possedere l’applicazione. Se consideri già alcune applicazioni simili, tutte presentano una schermata di benvenuto. Dato che le maggiori applicazioni la posseggono, perché non dovrebbe averla anche la nostra?
Inoltre, oltre a servire da benvenuto, la schermata potrebbe permettere di aggiungere un nuovo appuntamento.

Quindi, dato che l’app potrebbe avere diverse caratteristiche, tira un nuovo ramo chiamato “funzionalità”. Da questo fai partire un nuovo sotto ramo chiamato “schermata di benvenuto” e a quest’ultimo aggiungi un ramoscello con scritto “aggiungere nuovo appuntamento”:

caratterizzazione mindmap applicazione

Cos’altro potrebbe contenere la schermata di benvenuto? Magari se gli appuntamenti sono più di 1 potrebbe dirmi quanti ancora ne devo fare (quindi potresti aggiungere un nuovo ramo alla schermata di benvenuto).

L’app ha bisogno solo della schermata di benvenuto?

La schermata di benvenuto non da le informazioni dettagliate di ogni appuntamento. Serve necessariamente qualche altra funzionalità che mi permette di mostrare più dettagli per ogni appuntamento.

Dal corso di programmazione Swift hai conosciuto le liste o array, ancora non sai come crearle in un’applicazione grafica però sai che esiste il corrispettivo in codice Swift. L’applicazione quindi potrebbe contenere una sorta di lista grafica dove ogni elemento rappresenta un appuntamento. Peppe, ma così non devo conoscere gli elementi grafici di un’applicazione? 

NO! Immagina e prendi ispirazione dalle applicazioni che utilizzi ogni giorno. Qualsiasi cosa pensi e ti viene in mente, aggiungila alla mappa durante il corso scoprirai quali sono possibili con le conoscenze attuali e quali no.

Ogni elemento della lista potrebbe mostrare il nome della persona da incontrare, il luogo e il tipo di appuntamento (quel famoso ricreativo o lavorativo):

mindmap applicazione appuntamenti semi completa

La mappa oltre ad essere potenzialmente infinita ti permette d’avere sempre sotto controllo tutti gli aspetti fondamentali del tuo futuro progetto. Così facendo è impossibile dimenticare ciò che vuoi realizzare. Ti basta inserire un nuovo ramo ogni qual volta ti accorgi di aver trovato qualcosa che potenzia la tua applicazione.

A questo punto si hanno già i primi elementi per iniziare ad abbozzare un primo sketch dell’applicazione che realizzeremo.

Domande e Risposte

Non riesco a creare una mind map, mi aiuti?

Se proprio non riesci a costruire una mind map eccoti dei consigli utili:

  • Scrivi su un foglio in modo discorsivo cosa la tua applicazione dovrà fare.
  • Cerchia le parole chiave del testo.
  • Le parole chiave formeranno sicuramente i rami e foglie della tua mappa.

Niente da fare? Prendi ispirazione dai progetti altrui:

  • Apri una qualsiasi applicazione.
  • Prova ad analizzarla cercando di capire quali sono le sue caratteristiche. Ad esempio le caratteristiche dell’applicazione di Facebook sono: condividere stati, relazioni tra amici, profilo utente, ecc.
  • Prova a delineare la mind map dell’applicazione in esame partendo dalle sue caratteristiche.

Eccoti come io inizierei ad impostare l’app Facebook (non ho scritto tutti i rami):

mind map app facebook

Esistono applicazioni per creare le mind map?

Si. Uno è quello che ho utilizzato durante tutto il paragrafo e si chiama: MindNode Pro è a pagamento. Esistono dei tool gratuiti facilmente reperibili sul Mac App Store, come: MindMaple lite.

In alternativa puoi sempre usare la carta ;).

Che consigli puoi darmi per creare una buona mind map?

Uno dei consigli classici è quello di utilizzare diversi colori per ogni ramo creato. I colori aiutano meglio a memorizzare i concetti e i collegamenti fra i vari sotto rami. Un’altra cosa che puoi fare è inserire immagini e disegni che ti aiutino meglio a sviluppare il concetto che hai in testa.

Non fossilizzarti su uno schema ben preciso. Crea i tuoi collegamenti, inventa nuove forme e trova lo stile che meglio rappresenta la tua mappa mentale.

Sono davvero necessarie le mappe mentali?

Si. Sono utili in qualsiasi processo produttivo e di sviluppo.

  • Aiutano nel processo di brainstorming.
  • Aiutano nella pianificazione.
  • Sono facili da leggere.
  • Aiutano a risolvere problemi.

Non credo debba aggiungere altro ;)

prototipo o storyboard applicazione

2# Prototipo o storyboard. Impara a creare un’applicazione funzionante utilizzando un foglio ed una matita

Disegno? Ti dico subito che non è necessario saper utilizzare Photoshop o altri strumenti e applicazioni di grafica. Quindi se sei un grafico o meno non fa differenza.

Creano prima la casa e poi fanno gli schizzi? O prima creano uno schizzo e poi costruiscono?

Indubbiamente quando devono realizzare una casa o un palazzo, che sia il Burj Al Arab o la casa del tuo vicino, qualsiasi ingegnere o operaio non potrebbe lavorare senza l’aiuto di un progetto e di un disegno che li aiuti nell’innalzare correttamente l’opera.
Ora non posso che domandarmi, perché non utilizzare la stessa tecnica per la creazione di applicazioni?

Avere uno schizzo che ti illustra la grafica dell’app finale ti fa risparmiare più del 65% del tempo in fase di sviluppo.

Cos’è lo storyboard

La tecnica, oltre ad avere radici antichissime: basta pensare ai disegni di Leonardo da Vinci ma anche ai periodi antecedenti, è stata perfezionata con l’avvento dell’animazione cinematografica.

Nel 1930 all’interno dei Walt Disney Studio nasce l’idea dello storyboard. Lo storyboard nasce da un’esigenza che in quegli anni diventava sempre più incombente sulle spalle dei disegnatori: creare cartoni animati nel modo più veloce possibile. 

Webb Smith venne l’idea di disegnare su un foglio la prima scena del film e di disegnare le successive in altrettanti fogliLe scene dovevano essere disegnate in sequenza. In questo modo il primo foglio rappresentava la prima scena del film e l’ultimo quella finale. Tra il quadro iniziale ed il finale ci stavano tutte le scene intermedie del cartone animato.

esempio storyboard disney

Lo storyboard permette di guardare un film ancora prima che venga accesa la macchina da ripresa. In questo modo se dovessero esserci incongruenze nella storia o parti in più o meno, vengono immediatamente rimpiazzate da nuove scene.

Il guadagno oltre in termini di tempo è in termini di denaro. Girare un film di getto, senza seguire un piano ben preciso, oltre ad essere frustante aumenta i costi di qualsiasi produzione. Immagina di aver girato una scena di inseguimento con una macchina e poi alla fine del film ti accorgi che sarebbe stato meglio mettere le moto. Un conto è dover rigirare la stessa scena perché è andata male la recitazione, un conto è dover ricreare una nuova scena.

Cos’è lo storyboard di un’applicazione?

Lo storyboard di un’applicazione è un disegno, o all’inglese sketch, che mostra le interfacce finali delle applicazioni. Inoltre, qualora l’applicazione dovesse essere formata da più interfacce, permette di visionare i collegamenti e il comportamento dell’applicazione ad un determinato evento.

Cos’è un’interfaccia?

Per interfaccia si intende la§ grafica di un’applicazione. Interfacciare è il processo che permette di mettere in relazione il codice dell’applicazione con l’utente che l’utilizza.

Sotto verrà spiegato come realizzarle e cosa inserirgli dentro.

storyboard applicazione

Fonte: google immagini.

Come per un film, lo storyboard di un’applicazione ti da la possibilità di risparmiare tantissimo tempo quando poi andrai a sviluppare il progetto finale.

Lo storyboard è semplicemente uno schizzo dell’opera finale e non l’opera finale. Molti fanno l’errore di creare storyboard quanto più belli possibili quando, invece, dovrebbero essere solo degli spunti da cui partire (se no il guadagno in tempo sarebbe annullato).

Come creare lo storyboard della tua applicazione

Ci sono 2 categorie di sviluppatori:

  1. Quelli che più o meno hanno già le idee chiare.
  2. Quelli che iniziano a scrivere codice sperando di creare qualcosa.

Fortunatamente il compito di questa lezione era quello di farti rientrare, più o meno, nella prima categoria. Infatti iniziare il progetto, con la creazione della mind map, ti permette di arrivare alla fase storyboard con un quadro generale dei contenuti che la tua applicazione dovrebbe contenere.

Il punto cardine è concentrarsi sui contenuti.

Come per la mappa mentale, lo storyboard, ha bisogno di un foglio ed una matita. L’ottimale sarebbe utilizzare un foglio da disegno (come gli F4) per poter creare più disegni in modo da dare maggiore continuità allo storyboard.

Si parte dal disegnare il contorno del display di un iPhone. Puoi approssimarlo ad un rettangolo con il lato minore in orizzontale.

Se non sei un piccolo Giotto, come me, puoi aiutarti con squadra e righello:

Storyboard Applicazione 1

Il rettangolo va riempito con gli elementi grafici che descriveranno la prima interfaccia della tua applicazione. 

Per elementi grafici si intendono:

  • Bottoni.
  • Tabelle.
  • Immagini.
  • Testi.
  • Campi di testo.
  • ecc.

In questo step è di vitale importanza camminare passo passo con gli appunti della mappa mentale.

Il ramo della mind map, che descrive l’interfaccia della schermata principale, ha 3 sotto rami che ti ricordano cosa deve contenere l’interfaccia principale della tua prima applicazione iOS:

  • Deve mostrare il numero di appuntamenti rimasti.
  • Un bottone che ti faccia spostare ad una lista d’appuntamenti.
  • Dei campi che ti permettano di aggiungere un nuovo appuntamento.

So cosa deve avere l’interfaccia, ma come li posiziono? Dove metto ogni elemento?

La prima cosa, l’unica e quella che non devi dimenticare mai è: non andare oltre con i pensieri, non ti domandare ma questa cosa come la faccio funzionare con il codice?
Adesso non ci pensare! Non è il momento adatto. Dentro lo storyboard metti tutto quello che ti viene in mente.

In questo passaggio cadono tutti i nuovi sviluppatori. Sai perché? Perché molti confondono grafica con interfaccia. Cioè si impuntano nel dover creare, già sullo storyboard, le sembianze finali dell’applicazione (piena di disegni colori ecc.). Se parti con questo presupposto impiegherai mesi prima di passare alle fasi di sviluppo.

L’interfaccia su storyboard ti deve dare l’idea di come saranno dislocati gli elementi principali e non come saranno graficamente. Il principio è lo stesso adottato nei film, devono essere schizzi che ti aiuteranno nelle fasi successive.

Non mi crederai, ma sai qual’è il primo passo da fare?

Fare dei tentativi!

É impossibile disegnare un’applicazione al primo tentativo, è come voler correre senza aver prima imparato a camminare. Solo con l’esperienza velocizzerai questo passaggio e siccome, presumo, tu sia un novizio è necessario andare con calma. Parti dal dislocare un elemento alla volta. Ad esempio, partiamo dal mostrare il numero di appuntamenti.

Mettiti sempre dal lato dell’utilizzatore. In un’applicazione di appuntamenti, dove ti aspetteresti di vedere il numero di appuntamenti mancanti?

Sicuramente al centro o nella parte alta dell’interfaccia.

Una volta che sai dove posizionare un elemento arriva il momento di disegnarlo. Adesso dovresti scegliere una forma che ti permette di comunicare all’utente, nel modo migliore, il numero di appuntamenti rimasti. Scriverai:

  • “Ti rimangono ancora 10 appuntamenti”.
  • “Ancora 10 appuntamenti”.
  • “10 appuntamenti”.

Non abusare mai del testo. Viviamo in un mondo sempre in corsa. Chi utilizza un’applicazione, soprattutto per gli appuntamenti, non credo abbia il tempo di leggere molte parole perché è già impegnato in altre centomila attività.

Ergo in quasi tutte le applicazioni, a meno che non siano per bambini o casi particolari, dai per scontato che l’utente sappia qual’è lo scopo della tua applicazione (anche perché poi esistono metodi di tutoring virtuale – le grafiche animate che ti spiegano cosa fa l’applicazione).

Quindi io sicuramente, nella parte alta dell’interfaccia, scriverei: “10 Appuntamenti”. Magari potrei fare che il “10” lo metto in alto e “appuntamenti” sotto, come una poesia.

Storyboard Applicazione 2

Non ti piace in questa maniera? Prima di cancellare e rifare tutto da capo, aspetta di completare almeno lo sketch della prima interfaccia.

Una volta che l’utente vede il numero di appuntamenti si aspetterebbe, magari, di poter andare ad analizzare nel dettaglio ogni singola informazione dell’appuntamento. Questo punto l’abbiamo delegato alla seconda interfaccia che contiene la tabella con ogni singolo appuntamento. Però dalla prima interfaccia alla seconda serve qualcosa che possa permettere all’utente di poter andare oltre.

Ad esempio molte applicazioni, tramite la pressione di un bottone, permettono di cambiare interfaccia e contenuti. Potremmo adottare questa strategia anche nella nostra applicazione.

Sotto la scritta “10 appuntamenti” potremmo inserire un bottone con scritto “Vedi la Lista”.

A questo punto, dato che è stato inserito il bottone per la visualizzazione della tabella, che si trova in un’altra interfaccia, è necessario creare un altro riquadro. Disegnalo a fianco a quello già presente e, per ricordarti che viene aperto quando viene premuto il bottone, fai una freccia dal bottone verso la nuova interfaccia:

Storyboard Applicazione 3 1

Tutto il processo di prototipazione gira attorno a questi semplici passaggi. Adesso non ti resta altro che completare i vari disegni in base alle tue esigenze, fantasie e idee. Non c’è una linea guida da seguire, guarda le altre applicazioni o prova a seguire le tue ispirazioni.

Quel che conta è avere sempre una bozza del disegno finale dell’applicazione.

Considerazioni e tiriamo le fila

Perché ti ho triturato le scatole con la storia dello storyboard?

Se credi sia un processo inutile e poco produttivo, ti sbagli alla grande. Avere uno storyboard è talmente importante che la stessa Apple, nella sua applicazione di sviluppo: Xcode, ha introdotto un tool per il disegno dello storyboard della tua applicazione.

Quindi sapere già da ora che avere un’idea ed uno storyboard, prima dell’avvio del tool di sviluppo, è un passo fondamentale per non trovarsi impreparati quando inizierai a sporcarti le mani.

In realtà sono molti i processi che dall’idea portano al prototipo di un’applicazione. Definirli tutti adesso non avrebbe senso perché sarebbero solo informazioni in più e non applicabili nel breve periodo. Per adesso, quelli che sono di vitale importanza sono la mappa delle idee e un primo abbozzo di storyboard.

Tiriamo le fila

  • Prima di ogni progetto è necessario definire l’idea che dovrebbe star dietro.
  • Le applicazioni nascono per risolvere dei problemi, quindi chiediti se la tua idea lo fa oppure no.
  • Puoi avere un’idea che ne perfeziona un’altra o idee innovative. Entrambe vanno comunque bene.
  • Chiediti a chi è destinato il tuo progetto. Ad una nicchia di mercato o a tantissimi utenti?
  • Definisci i punti di forza, o le funzionalità, della tua applicazione.
  • Non perdere di vista ogni punto del tuo progetto e crea una mappa delle idee.
  • Nella mappa delle idee scrivi le parole chiave del progetto partendo dal centro e personalizzando ogni punto creando nuovi rami.
  • Creata la mappa, passa a disegnare uno sketch dell’applicazione finale.
  • Lo storyboard mostra le varie interfacce dell’applicazione.
  • Uno storyboard non rappresenta la grafica finale dell’applicazione. É solo un sistema veloce che ti permette di visionare nel complesso l’applicazione finale.

Buona Programmazione!

Torna a: Corso creare applicazioni per iOS con il linguaggio Swift > Le Basi dello Sviluppo Applicazioni
  • Salvatore Rubera

    Ottima spiegazione, Mind Map mi sarà utile :)))

  • torel101

    Ottimo, sono cose che molti danno per scontato, invece è molto utile. Esiste qualche app dove posso creare degli sketch al computer?

    • Ne esistono parecchie. Quella che imparerete ad utilizzare in questo corso si chiama Sketch ed è un’applicazione per la realizzazione di interfacce.

  • Daniele

    Ciao Peppe, scusa la domanda….
    andando avanti nella creazione di un app come si possono salvare diverse versioni in modo tale che applicando delle modifiche magari errate si possa tornare ad una versione precedente? es: LamiaApp versione 1.0, 1.1,1.2,1.3, ecc.ecc.

Start typing and press Enter to search

Corso gratuito linguaggio di programmazione Swiftif else in Swift