Il design di un’app: creare una propria app nativa – parte 3

Nei primi due articoli della serie sulla creazione di una propria app nativa si è parlato della pro­get­ta­zio­ne e della rea­liz­za­zio­ne tecnica di un’app nativa per i di­spo­si­ti­vi mobili. Ora ci con­cen­tre­re­mo sul design da dare all’ap­pli­ca­zio­ne e forniremo dei consigli utili ai quali attenersi per la pre­sen­ta­zio­ne dei contenuti dell’app. Non è es­sen­zial­men­te rilevante che si utilizzi un’app iOS o Android perché le linee guida da seguire rimangono le stesse. Quando ideate il design della vostra app, non solo dovreste con­fe­rir­le il giusto aspetto, ma dovreste fare at­ten­zio­ne anche all’usabilità e quindi alla sua facilità d’uso. In questo vi aiutano alcuni strumenti per il design delle app.

Non appena sapete con certezza come rea­liz­za­re tec­ni­ca­men­te la vostra idea di app, vi ri­tro­ve­re­te a dover fare i conti con la creazione dell’in­ter­fac­cia grafica (in inglese Graphical User Interface, ab­bre­via­ta in GUI). L’in­ter­fac­cia grafica è il cuore pulsante del design dell’app, grazie alla quale si presenta l’aspetto com­ples­si­vo dell’ap­pli­ca­zio­ne. Di con­se­guen­za non bi­so­gne­reb­be tra­la­scia­re il suo design, che fa comunque parte dello sviluppo dell’app e per molti svi­lup­pa­to­ri ha lo stesso valore del suo contenuto. Infatti se un’app risveglia l’interesse degli utenti grazie a funzioni uniche e viene scaricata molte volte, un design poco curato può com­pro­met­te­re l’utilizzo dell’ap­pli­ca­zio­ne e far al­lon­ta­na­re gli utenti.

Il design dell’app può essere visto come concetto alla base delle diverse sezioni della rea­liz­za­zio­ne della GUI. In questo caso il design di un’ap­pli­ca­zio­ne comprende molto di più che semplici caratteri e colori, infatti rientra nel design di un’app l’in­ter­fac­cia grafica completa com­pren­si­va di funzioni ed elementi di controllo. È quindi im­por­tan­te un uso ben ponderato di tutti i com­po­nen­ti grafici dell’app e a de­ter­mi­nar­ne l’usabilità sono so­prat­tut­to la posizione, la di­men­sio­ne e la strut­tu­ra­zio­ne dei contenuti dell’ap­pli­ca­zio­ne.

I di­spo­si­ti­vi mobili pos­sie­do­no due ca­rat­te­ri­sti­che che in­fluen­za­no mag­gior­men­te il design della GUI: da una parte a seconda del di­spo­si­ti­vo varia molto la di­men­sio­ne e la ri­so­lu­zio­ne dello schermo sul quale viene ri­pro­dot­ta l’in­ter­fac­cia grafica; dall’altra il touch screen richiede alle app dei precisi requisiti per la creazione dell’in­ter­fac­cia grafica. Anche se questi requisiti per uti­liz­za­re l’app suonano banali, emergono in ogni ambito del design dell’app. Vi spie­ghia­mo come tenerne conto nell’ideazione dell’in­ter­fac­cia e vi pre­sen­tia­mo i classici principi di base per l’or­ga­niz­za­zio­ne del layout e per l’usabilità della vostra app.

Con il termine “layout” si indica la struttura visiva dell‘in­ter­fac­cia dell’app e la di­spo­si­zio­ne dei contenuti dell’ap­pli­ca­zio­ne. Per stabilire il layout di un’app nativa potete ricorrere a diversi pacchetti (chiamati spesso GUI kit o UI kit), che com­pren­do­no elementi già pronti per l’in­ter­fac­cia e modelli per il loro po­si­zio­na­men­to e per la loro strut­tu­ra­zio­ne. Spesso sono comprese anche icone, template, widget, colori, ecc., a volte di­spo­ni­bi­li anche gra­tui­ta­men­te sul web.

Google mette a di­spo­si­zio­ne gra­tui­ta­men­te sulla pagina Material design diversi com­po­nen­ti di una GUI di un’app (come template e icone). Allo stesso modo Apple, anche se si tratta di una col­le­zio­ne meno completa, offre alcuni com­po­nen­ti per il layout iOS gra­tui­ta­men­te tramite la sua pagina Developer.

Inoltre alcuni svi­lup­pa­to­ri mettono a di­spo­si­zio­ne della community i propri GUI kit (ad esempio su de­si­gn­co­de.io per iOS) o su sket­chapp­sour­ces.com per Android. L’uso dei pacchetti standard ha il vantaggio che si possono creare con poco sforzo design ap­pro­pria­ti, che l’utente già conosce e sa come uti­liz­za­re, mentre gli svantaggi stanno nelle li­mi­ta­zio­ni imposte alla propria crea­ti­vi­tà, in una struttura so­sti­tui­bi­le e nella di­pen­den­za ad una piat­ta­for­ma delle app, che possono essere create con questi modelli.

Pacchetti simili e GUI kit per il design di app per Android e iOS rendono ben chiaro che si sono affermati certi standard per il layout di un’app nativa. Tra questi rientrano l’uso di caratteri, lo schema dei colori così come diverse linee guida del design e varianti di layout per le app, che riescono a sup­por­ta­re diverse di­men­sio­ni e ri­so­lu­zio­ni del display.

Tutte le ap­pli­ca­zio­ni com­pren­do­no testi. Anche se nel layout pre­do­mi­na­no immagini e simboli, alcuni segmenti dell’app ri­chie­do­no per forza una rea­liz­za­zio­ne testuale, come le con­di­zio­ni di utilizzo e le in­for­ma­zio­ni sull’azienda. Ma so­prat­tut­to per gli elementi che de­ter­mi­na­no in modo decisivo l’aspetto di un’in­ter­fac­cia grafica (menu, articoli, ecc.) risulta molto im­por­tan­te l’uso di un carattere ap­pro­pria­to. La di­spo­si­zio­ne dei testi è una com­po­nen­te ele­men­ta­re del layout dell’app.

Per scegliere il carattere di un’ap­pli­ca­zio­ne si può ricorrere fa­cil­men­te a quelli propri della piat­ta­for­ma in uso per le app. Su iOS si utilizza sin da iOS 9 il carattere “San Francisco”, mentre prima “Helvetica” e “Helvetica Neue” erano i font del sistema per le ap­pli­ca­zio­ni iOS. Invece, il carattere standard del sistema Android è sin dalla versione 4.0 “Roboto”. Molti svi­lup­pa­to­ri di app si basano per il tipo di carattere, a ragione, sui font stan­dar­diz­za­ti delle app Android e iOS: il design del carattere è ottimale per essere adattato al sistema operativo e strut­tu­ra­to per ri­spar­mia­re spazio. Inoltre i caratteri del sistema si possono uti­liz­za­re sin da subito, mentre gli altri font devono essere prima con­fi­gu­ra­ti.

Però può anche essere con­ve­nien­te l’im­ple­men­ta­zio­ne di un altro carattere, spe­cial­men­te se si prevede che l’app contenga molti testi e si vorrebbe farla risaltare sulla con­cor­ren­za. Potete anche scaricare diversi font gra­tui­ta­men­te da Internet. La scelta del carattere giusto per la vostra ap­pli­ca­zio­ne è spesso correlata con il tema e i contenuti dell’app. Se l’idea è di natura più artistica o ludica, si può pre­di­li­ge­re un font che sembri elegante o ec­cen­tri­co. Però at­ten­zio­ne: so­prat­tut­to se la vostra app contiene molti testi, dovreste as­si­cu­rar­vi che il carattere mantenga una buona leg­gi­bi­li­tà.  Non per niente molti caratteri dei font standard come “Open Sans” o “Lato” sono strut­tu­ra­ti piuttosto sottili e senza grazie, così da adattarsi a diverse sezioni.

Nello schema dei colori del layout dovreste as­so­lu­ta­men­te prestare at­ten­zio­ne che la vostra app disponga di un buon contrasto. Visto che le app vengono spesso uti­liz­za­te mentre si è in giro e in con­di­zio­ni difficili come in presenza di una forte espo­si­zio­ne alla luce, un contrasto ben pensato facilita la leg­gi­bi­li­tà dei contenuti. Quali colori uti­liz­za­te dipende dal tema e dal target dell’ap­pli­ca­zio­ne. Se l’ap­pli­ca­zio­ne è collegata ad un’azienda, ad un progetto o simili, che pos­sie­do­no già un proprio schema di colori, si dovrebbe in questo senso orien­tar­si sulla base della Corporate Identity. Oltre alla struttura dei colori ri­cor­ren­te, anche l’utilizzo di un logo e un corporate font ben definito servono ad indicare l’affinità delle diverse offerte e a conferire una precisa identità. Ge­ne­ral­men­te nel design dell’in­ter­fac­cia grafica dovreste as­si­cu­rar­vi che tutti gli elementi siano for­mat­ta­ti uni­for­me­men­te. Trovate altri consigli sulla grafica dell’in­ter­fac­cia utente nel nostro articolo sul Corporate Design e gli effetti dei colori nel web design. I sug­ge­ri­men­ti dati nell’articolo si possono applicare anche al design dell’app.

Il display dell’app dell’utente determina infine sempre quanto spazio è già presente nel singolo caso per la vi­sua­liz­za­zio­ne dei contenuti. Già sugli smart­pho­ne si possono in­di­vi­dua­re dif­fe­ren­ze so­stan­zia­li nelle di­men­sio­ni e nella ri­so­lu­zio­ne degli schermi, e ancora più chiaro diventa lo spettro dei formati del display, se si considera la varietà dei tablet. Quindi il design in un’app iOS e Android si adatta sempre au­to­ma­ti­ca­men­te alle di­men­sio­ni dello schermo, venendo scalati gli elementi dell’ap­pli­ca­zio­ne in base all’in­ter­fac­cia utente: il layout rimane però invariato, cosa che porta ad una vi­sua­liz­za­zio­ne poco con­ve­nien­te dei contenuti dell’ap­pli­ca­zio­ne.

Ad esempio un layout che è stato adattato in modo ottimale al piccolo display di un iPhone, dif­fi­cil­men­te risulterà adatto per lo schermo più grande di un iPad, infatti senza un adat­ta­men­to al formato comune del tablet può succedere che i pulsanti sull’iPad siano spro­por­zio­na­ti e vengano vi­sua­liz­za­ti più grandi. Perciò è meglio creare una variante del layout specifica per il tablet. Questo layout per il tablet dispone so­li­ta­men­te di pulsanti più piccoli pro­por­zio­na­ti e utilizza lo spazio ricavato per la vi­sua­liz­za­zio­ne di altri contenuti.

In un design pro­fes­sio­na­le è quasi ob­bli­ga­to­rio creare più versioni del layout, per precise ri­so­lu­zio­ni e di­men­sio­ni del display: molte app di­spon­go­no di tre o più varianti, almeno nel caso in cui siano molto diffuse o puntino a rag­giun­ge­re una maggiore notorietà. Ma lo sviluppo di diverse versioni di app si converte anche in un maggior impegno.

Inoltre non sono da di­men­ti­ca­re le due pos­si­bi­li­tà di orien­ta­men­to di uno smart­pho­ne o di un tablet: se si passa dal formato verticale a quello oriz­zon­ta­le, si dovrebbe adattare la vi­sua­liz­za­zio­ne dei contenuti delle app di con­se­guen­za. Anche per questo è ne­ces­sa­rio un altro layout. Se e quanti diversi layout bisogna rea­liz­za­re per un’ap­pli­ca­zio­ne, dipende prin­ci­pal­men­te dal proprio progetto. Quando create un’app, pensate sempre che l’usabilità ne risentirà se si sceglie una for­mat­ta­zio­ne del layout non proprio adatta.

Tra i pre­re­qui­si­ti di un’alta usabilità dell’app rientra sempre un design intuitivo. Così si intende so­prat­tut­to un uso facile e auto espli­ca­ti­vo che si orienta a schemi affermati e strutture tipiche della na­vi­ga­zio­ne dell’app. La decisione se l’uso di un’ap­pli­ca­zio­ne è user-friendly o meno spetta sempre agli utenti dell’app. Perciò è ancora più im­por­tan­te che, al momento di stabilire il design dell’app, co­no­scia­te le pre­fe­ren­ze di utilizzo e le aspet­ta­ti­ve del vostro target, in modo da potervi orientare alle loro esigenze. Non si tratta di indicare ai vostri utenti le com­pe­ten­ze delle quali disponete in fatto di design, ma dovreste piuttosto con­cen­trar­vi nell’offrire ai de­sti­na­ta­ri dell’app la migliore espe­rien­za d’uso possibile.

L’usabilità viene spesso raggiunta at­tra­ver­so un layout chiaro, ordinato e semplice. Spe­cial­men­te negli schermi piccoli degli smart­pho­ne non avete a di­spo­si­zio­ne molto spazio.  Perciò ponderate at­ten­ta­men­te la quantità dei contenuti della vostra app da sistemare sullo schermo. L’ap­pli­ca­zio­ne non deve sembrare troppo carica: riducete i contenuti dell’app e le funzioni all’es­sen­zia­le: ciò vi consente di creare tutto in maniera suf­fi­cien­te­men­te grande e lasciare anche delle superfici libere, cosa che farà sembrare gli schermi più armonici.

Il menu della vostra app deve essere po­si­zio­na­to in una posizione di rilievo ed essere subito ri­co­no­sci­bi­le dagli utenti. Nelle ap­pli­ca­zio­ni vengono uti­liz­za­ti, la maggior parte delle volte, menu a tendina, perché con­sen­to­no di ri­spar­mia­re spazio. L’elenco delle singoli voci del menu una volta chiuso non disturba gli utenti: la na­vi­ga­zio­ne risulta quindi chiara e mirata. Se la vostra app dispone di molte diverse features, che hanno bisogno ognuna di una propria voce del menu, nel menu prin­ci­pa­le dovreste inserire solo le funzioni più im­por­tan­ti dell’app e rendere ac­ces­si­bi­li le altre da un sotto menu.

La rap­pre­sen­ta­zio­ne dei singoli punti del menu non dice però ancora niente sulla sua struttura generale. Nella vostra app dovreste as­so­lu­ta­men­te evitare di far cliccare diverse volte prima di giungere alla pagina de­si­de­ra­ta. Così alcuni esperti sug­ge­ri­sco­no che si dovrebbe solo cliccare due volte per arrivare a tutte le sezioni di un’app. Se davvero tutti i sotto menu debbano stare così vicini, dipende si­cu­ra­men­te dal tipo di app, ma dovreste con­ti­nua­re a seguire l’in­di­ca­zio­ne di mantenere i percorsi della vostra app i più brevi possibili. Le strutture del menu troppo complesse con­fon­do­no gli utenti e ciò li porta a perdere fa­cil­men­te l’orien­ta­men­to all’interno dell’app.

Un altro fattore im­por­tan­te dell’usabilità dell’app è la rea­liz­za­zio­ne user-friendly degli elementi di na­vi­ga­zio­ne. Spe­cial­men­te le di­men­sio­ni, l’ordine e il design dei pulsanti sull’in­ter­fac­cia utente sono molto im­por­tan­ti a questo punto. Fate at­ten­zio­ne che tutti gli elementi in­te­rat­ti­vi (menu a tendina, pulsanti, link, ecc.) siano sempre ri­co­no­sci­bi­li come tali e che possano essere cliccati senza problemi. Dovreste anche pensare che pure per gli utenti con dita più grandi dovrebbe essere possibile uti­liz­za­re i pulsanti senza dif­fi­col­tà. Pulsanti troppo piccoli e po­si­zio­na­ti male portano a un’errata di­gi­ta­zio­ne e po­treb­be­ro perciò risultare fru­stran­ti per gli utenti. Inoltre si consiglia un feedback grafico per l’utilizzo degli elementi in­te­rat­ti­vi: so­prat­tut­to nel caso di azioni che ri­chie­do­no dei tempi di ca­ri­ca­men­to più lunghi, la vostra app dovrebbe indicare agli utenti tramite un simbolo o un’ani­ma­zio­ne, che il processo è mo­men­ta­nea­men­te in ese­cu­zio­ne. Ciò promuove la tra­spa­ren­za dei processi delle app, come ad esempio durante le ricerche o il ca­ri­ca­men­to degli elementi. Al contrario di una web app o di un’app ibrida, il design di un’app nativa si può adattare molto alla piat­ta­for­ma iOS o Android in uso. Per questo motivo si può dare un migliore stile alle app native, cosa che risulta par­ti­co­lar­men­te positiva nell’ambito dell’usabilità.

Se volete spe­ri­men­ta­re diversi layout, sono a vostra di­spo­si­zio­ne diversi programmi specifici; infatti per l’ela­bo­ra­zio­ne del design dell’app finale, potete ricorrere a tool di diverse aziende. Rap­pre­sen­ta un vantaggio possedere modelli di design digitali dei singoli schermi, su cui deve fun­zio­na­re l’app, che si possono creare con un programma come Photoshop o Sketch. I file di immagine si ag­giun­go­no poi in un tool di design per le app, si collegano tra di loro e si uniscono insieme ad un prototipo dell’ap­pli­ca­zio­ne (chiamato anche mockup).

L’uso dei tool rimane molto facile e avviene tramite drag&drop in un editor WYSIWYG. Si simula l’uso dell’app tramite il col­le­ga­men­to di diverse schermi tra di loro e la gestione delle in­te­ra­zio­ni. Potete infine testare il prototipo su uno smart­pho­ne o un tablet, dove anche l’uso dell’app avviene uti­liz­zan­do le dita o compiendo altri tipici gesti per questi di­spo­si­ti­vi.

Grazie a questi tool si possono svi­lup­pa­re mockup completi per le app, pur non avendo co­no­scen­ze di pro­gram­ma­zio­ne. Con un po’ di impegno il prototipo riproduce in modo molto ve­ro­si­mi­le il fun­zio­na­men­to di una vera app. Vi pre­sen­tia­mo in breve i migliori tool più diffusi per il design.

InVision è un’ap­pli­ca­zio­ne pensata per un uso pro­fes­sio­na­le. Il tool viene anche offerto in una variante gratuita, in cui però si deve ri­nun­cia­re ad alcune funzioni. Tramite l’aggiunta e l’adat­ta­men­to di modelli di design potete creare in modo re­la­ti­va­men­te veloce e semplice un layout completo per un’app come prototipo e provarlo su un di­spo­si­ti­vo mobile. Così è anche possibile tramite diverse im­po­sta­zio­ni, pro­get­ta­re l’uso di un prototipo di un’app in modo molto simile a quello dell’app vera e propria. Una par­ti­co­la­ri­tà del tool è la rea­liz­za­zio­ne ben riuscita di funzioni per il lavoro in team. Qui non solo hanno accesso ai mockup più utenti, ma si possono inserire degli appunti di­ret­ta­men­te nel prototipo e scam­biar­si le opinioni sul design dell’app tramite la funzione di commento. Molte aziende rinomate come IBM, Twitter, Netflix o Soun­d­cloud hanno già uti­liz­za­to InVision per rea­liz­za­re dei prototipi per il design delle loro app.

Un’altra soluzione valida per entrambe le piat­ta­for­me, iOS e Android, è Marvel. Oltre a per­met­ter­vi di rea­liz­za­re i prototipi dei vostri design da testare di­ret­ta­men­te sui di­spo­si­ti­vi mobili, vi consente anche di crearli con uno strumento messo a di­spo­si­zio­ne da loro e mo­di­fi­car­li tramite Photoshop o altri programmi di grafica. Non manca poi la pos­si­bi­li­tà di poter scambiare opinioni al riguardo con colleghi, col­la­bo­ra­to­ri e clienti. È di­spo­ni­bi­le una versione gratuita che consente di rea­liz­za­re fino ad un massimo di 2 progetti, a cui però può accedere solo un utente. Per essere uti­liz­za­to da più utenti e poter creare progetti il­li­mi­ta­ti bisogna scegliere una delle altre due versioni a pagamento.

Se non avete creato un vostro modello di design, Fluid UI vi offre diverse raccolte di schermi già pre­de­fi­ni­ti, che potete integrare nei vostri prototipi.  Ma non per questo il programma deve na­scon­der­si dalla con­cor­ren­za, in quanto offre una varietà di funzioni ampia simile a quella di InVision e Marvel. La versione gratuita consente però solo di creare un prototipo di un’app con massimo 10 schermi, che spesso non bastano per un test completo dell’ap­pli­ca­zio­ne, ma comunque potete testare e uti­liz­za­re gra­tui­ta­men­te fino a quando sarà ne­ces­sa­rio le funzioni di questo tool per il design dell’app.

Al momento di rea­liz­za­re il design di un’app bisogna pensare a molti dettagli. Per con­cre­tiz­za­re l’idea del layout dell’app e pre­sen­tar­la agli altri colleghi o a possibili sponsor, è utile ricorrere ai tre tool pre­sen­ta­ti qui per il design delle app, anche se ci sono comunque molti altri programmi al­ter­na­ti­vi. Se avete trovato il design più adatto alle vostre esigenze, non dovreste di­men­ti­ca­re che va ri­pro­dot­to anche su diversi schermi grandi e con ri­so­lu­zio­ni dif­fe­ren­ti. Perciò è ob­bli­ga­to­rio creare diverse versioni di un’app, in cui adattate l’ordine dei contenuti a diversi formati del display. Una volta terminato il design e lo sviluppo di un’app, dovete compiere ancora un altro passo im­por­tan­te prima di venderla in un app store: testare l’app. Perciò il prossimo articolo della nostra serie si occupa del testing delle app.