Come iniziare a creare un’app: wireframes e prototipi

Quali sono i primi passi alla base del design di un’app? Come si gettano le fondamenta per costruire un’app efficace e semplice da usare? Come si traducono le idee e gli obiettivi di business del cliente in elementi visivi chiari, disposti in modo strategico e intuitivo per l’utente finale?

Di seguito vedremo insieme alcune buone pratiche che, secondo la nostra esperienza, possono essere utili a superare il panico da foglio bianco e rompere il ghiaccio nella creazione da zero di un’app.

Ascolta bene, fatti le domande giuste e metti al bando il perfezionismo

La regola generale è: non preoccuparti di azzeccare tutto al primo colpo, perché è impossibile (oltre che paralizzante). Un buon processo creativo inizia sempre dal porsi le domande giuste, vale a dire:

1. Chi sono gli utenti finali?
2. Quali sono gli obiettivi di business?
3. Come posso organizzare i contenuti per supportare questi obiettivi?

Ascolta con religiosa attenzione il tuo cliente e cerca di capirne a fondo le idee e le aspettative. Solo avendole ben chiare, potrai dar loro una forma visiva.

In questa fase, inizia ad abbozzare una sitemap, ovvero un diagramma gerarchico che mostra l’organizzazione delle pagine come overview generale immediata dello user flow. Per ora non perdere troppo tempo a ipotizzare ogni possibile scenario e non perderti troppo in dettagli. Usa la sitemap come mero punto di partenza.

Prendi ispirazione da altri

Dai un’occhiata a chi si è già trovato a risolvere problemi analoghi ai tuoi e prendi spunto. Imparare dagli altri è sempre positivo e può farti risparmiare molto tempo. A tal proposito, ti consigliamo alcune piattaforme che possono essere d’aiuto in questa fase della progettazione: behance.net, Pinterest, pttrns.com (quest’ultimo non è del tutto gratuito).

Prendi carta e matita

A noi aiuta partire dal disegno a mano, perché permette alle idee di prendere forma visiva velocemente, senza preoccuparsi troppo della precisione e senza perdersi in fronzoli e dettagli che, in questa fase, farebbero solo perdere tempo.

Ora è il momento di abbozzare i wireframes, layout a bassa fedeltà di quello che sarà il prodotto finale. Si tratta di una sorta di brutta copia che serve a far capire al cliente come l’utente finale navigherà tra le pagine dell’app. I wireframes sono schermate veloci, poco costose, fatte per essere sottoposte a modifiche appena si raccolgono maggiori informazioni e feedback da parte del cliente. Di solito, per la presentazione al cliente replichiamo i bozzetti analogici su Adobe Xd o Figma. Per velocizzare il workflow, entrambe le piattaforme danno la possibilità di scaricare dei kit di componenti già pronti (tab, menu, pulsanti, filtri, campi, icone, aree di testo ecc.)

Immagina il customer journey e segmentalo in tanti piccoli steps

Entrando nel vivo della progettazione, ti suggeriamo per prima cosa di ipotizzare il customer journey, ovvero la serie di passaggi che un utente compie per raggiungere un determinato obiettivo. Sii flessibile e tieni a mente i diversi scenari che possono accadere; per esempio, se un utente sta cercando un prodotto online, che succede se non lo trova? Come puoi indirizzarlo nella ricerca rendendogli le cose più facili? Ricorda inoltre che il flow non è uguale per tutti.

Comincia a disegnare senza colori né dettagli. Prova a immaginare pochi elementi fondamentali e ridondanti che sono necessari alla navigazione (footer/header) e poi rifinisci e aggiungi elementi. Rendi prioritari i tasks importanti per l’utente e per il business del cliente (goal conversion).

Seleziona e ascolta i feedback

Rendi il processo il più collaborativo possibile. Condividi il tuo progetto con un team di persone e aggiungi annotazioni. Immagina il flow dell’utente, metti titoli descrittivi alle schermate e spiega quello che succede. Crea un chiaro funnel step by step e disegna frecce per rendere immediate le logiche alla base delle transizioni; se vuoi, aggiungi le gestures (o spiegale).

Il feedback da parte del team, positivo o negativo che sia, è fondamentale per andare avanti con il lavoro senza bloccarsi e per farlo evolvere al meglio. Non prenderla mai sul personale (non lo è) e sii sempre pronto a cambiare quelle che erano le tue ipotesi iniziali, se te ne vengono presentate di migliori.

Cerca al contempo di capire quali sono i commenti che possono portare fuori strada (sono inevitabili) e lasciali perdere. Infine ti consigliamo di prendere nota dei feedback che al momento non sono rilevanti, ma che potrebbero diventarlo in una fase più avanzata dello sviluppo.

La struttura: griglie, colonne, moduli e margini

Una casa sta in piedi se ha fondamenta solide. Lo stesso vale per un’app. La disposizione degli elementi che popolano l’interfaccia, le loro dimensioni e i rapporti tra le dimensioni e le spaziature non sono casuali. Per non dare la fastidiosa sensazione di elementi che fluttuano caotici nello spazio, è necessario impostare una griglia, ovvero struttura che aiuta a organizzare i contenuti in modo consistente. Costruire solide fondamenta richiede un certo investimento di tempo iniziale, ma ti aiuterà moltissimo nello sviluppare e ordinare gli elementi delle tue interfacce in modo coerente.

Per prima cosa è fondamentale impostare un’unità di base, cioè una misura di partenza di cui le altre misure sono multipli. 8 px, per esempio, è una misura ben scalabile (moltissime misure sono divisibili per 8 e 8 è divisibile per se stesso). Tutti gli elementi dell’interfaccia utente dovrebbero essere misurati come incremento dell’unità di base e la stessa regola dovrebbe valere per lo spazio negativo e l’interlinea. Ciò aiuta a mantenere solidità, equilibrio e consistenza visiva.

Altro elemento fondamentale per l’organizzazione dello spazio sono le colonne, ovvero i blocchi di spazio verticali che vanno da sx a dx dello schermo. Il numero varia in base al tipo di progetto (web o mobile). Per il mobile, di solito ne usiamo 12 (divisibile per 2,3,4,6, rende più facile disegnare per il responsive). Teniamo gli spazi bianchi tra colonne di 16 px (multiplo di 8 px, che abbiamo posto come unità di base). Cerchiamo di rispettare la regola dei multipli anche per i margini esterni del frame.

Disegna per l’utente

È scontato da dire, molto meno da mettere in pratica: devi rendere il prodotto facile e piacevole da usare per l’utente finale. Rendere un prodotto autoesplicativo nel suo utilizzo, cioè rendere semplice ciò che è complesso, è uno degli aspetti più difficili del lavoro. Qui entrano in ballo le competenze nella user experience e user interface, un mondo vastissimo che merita un discorso a parte. In linea generale, ti consigliamo di creare delle componenti riconoscibili e usarle in modo coerente e consistente nelle varie schermate. La ripetizione crea un senso di familiarità per l’occhio dell’utente e lo orienta più facilmente a compiere le azioni giuste.