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 progettazione e della realizzazione tecnica di un’app nativa per i dispositivi mobili. Ora ci concentreremo sul design da dare all’applicazione e forniremo dei consigli utili ai quali attenersi per la presentazione dei contenuti dell’app.

Non è essenzialmente 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 conferirle il giusto aspetto, ma dovreste fare attenzione 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 realizzare tecnicamente la vostra idea di app, vi ritroverete a dover fare i conti con la creazione dell’interfaccia grafica (in inglese Graphical User Interface, abbreviata in GUI). L’interfaccia grafica è il cuore pulsante del design dell’app, grazie alla quale si presenta l’aspetto complessivo dell’applicazione. Di conseguenza non bisognerebbe tralasciare il suo design, che fa comunque parte dello sviluppo dell’app e per molti sviluppatori 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ò compromettere l’utilizzo dell’applicazione e far allontanare gli utenti.

Il design dell’app può essere visto come concetto alla base delle diverse sezioni della realizzazione della GUI. In questo caso il design di un’applicazione comprende molto di più che semplici caratteri e colori, infatti rientra nel design di un’app l’interfaccia grafica completa comprensiva di funzioni ed elementi di controllo. È quindi importante un uso ben ponderato di tutti i componenti grafici dell’app e a determinarne l’usabilità sono soprattutto la posizione, la dimensione e la strutturazione dei contenuti dell’applicazione.

I dispositivi mobili possiedono due caratteristiche che influenzano maggiormente il design della GUI: da una parte a seconda del dispositivo varia molto la dimensione e la risoluzione dello schermo sul quale viene riprodotta l’interfaccia grafica; dall’altra il touch screen richiede alle app dei precisi requisiti per la creazione dell’interfaccia grafica. Anche se questi requisiti per utilizzare l’app suonano banali, emergono in ogni ambito del design dell’app. Vi spieghiamo come tenerne conto nell’ideazione dell’interfaccia e vi presentiamo i classici principi di base per l’organizzazione del layout e per l’usabilità della vostra app.

Con il termine “layout” si indica la struttura visiva dell‘interfaccia dell’app e la disposizione dei contenuti dell’applicazione. Per stabilire il layout di un’app nativa potete ricorrere a diversi pacchetti (chiamati spesso GUI kit o UI kit), che comprendono elementi già pronti per l’interfaccia e modelli per il loro posizionamento e per la loro strutturazione. Spesso sono comprese anche icone, template, widget, colori, ecc., a volte disponibili anche gratuitamente sul web.

Google mette a disposizione gratuitamente sulla pagina Material design diversi componenti di una GUI di un’app (come template e icone). Allo stesso modo Apple, anche se si tratta di una collezione meno completa, offre alcuni componenti per il layout iOS gratuitamente tramite la sua pagina Developer.

Inoltre alcuni sviluppatori mettono a disposizione della community i propri GUI kit (ad esempio su designcode.io per iOS) o su sketchappsources.com per Android. L’uso dei pacchetti standard ha il vantaggio che si possono creare con poco sforzo design appropriati, che l’utente già conosce e sa come utilizzare, mentre gli svantaggi stanno nelle limitazioni imposte alla propria creatività, in una struttura sostituibile e nella dipendenza ad una piattaforma 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 supportare diverse dimensioni e risoluzioni del display.

Tutte le applicazioni comprendono testi. Anche se nel layout predominano immagini e simboli, alcuni segmenti dell’app richiedono per forza una realizzazione testuale, come le condizioni di utilizzo e le informazioni sull’azienda. Ma soprattutto per gli elementi che determinano in modo decisivo l’aspetto di un’interfaccia grafica (menu, articoli, ecc.) risulta molto importante l’uso di un carattere appropriato. La disposizione dei testi è una componente elementare del layout dell’app.

Per scegliere il carattere di un’applicazione si può ricorrere facilmente a quelli propri della piattaforma 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 applicazioni iOS. Invece, il carattere standard del sistema Android è sin dalla versione 4.0 “Roboto”. Molti sviluppatori di app si basano per il tipo di carattere, a ragione, sui font standardizzati delle app Android e iOS: il design del carattere è ottimale per essere adattato al sistema operativo e strutturato per risparmiare spazio. Inoltre i caratteri del sistema si possono utilizzare sin da subito, mentre gli altri font devono essere prima configurati.

Però può anche essere conveniente l’implementazione di un altro carattere, specialmente se si prevede che l’app contenga molti testi e si vorrebbe farla risaltare sulla concorrenza. Potete anche scaricare diversi font gratuitamente da Internet. La scelta del carattere giusto per la vostra applicazione è spesso correlata con il tema e i contenuti dell’app. Se l’idea è di natura più artistica o ludica, si può prediligere un font che sembri elegante o eccentrico. Però attenzione: soprattutto se la vostra app contiene molti testi, dovreste assicurarvi che il carattere mantenga una buona leggibilità.  Non per niente molti caratteri dei font standard come “Open Sans” o “Lato” sono strutturati piuttosto sottili e senza grazie, così da adattarsi a diverse sezioni.

Nello schema dei colori del layout dovreste assolutamente prestare attenzione che la vostra app disponga di un buon contrasto. Visto che le app vengono spesso utilizzate mentre si è in giro e in condizioni difficili come in presenza di una forte esposizione alla luce, un contrasto ben pensato facilita la leggibilità dei contenuti. Quali colori utilizzate dipende dal tema e dal target dell’applicazione. Se l’applicazione è collegata ad un’azienda, ad un progetto o simili, che possiedono già un proprio schema di colori, si dovrebbe in questo senso orientarsi sulla base della Corporate Identity. Oltre alla struttura dei colori ricorrente, 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à.

Generalmente nel design dell’interfaccia grafica dovreste assicurarvi che tutti gli elementi siano formattati uniformemente. Trovate altri consigli sulla grafica dell’interfaccia utente nel nostro articolo sul Corporate Design e gli effetti dei colori nel web design. I suggerimenti 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 visualizzazione dei contenuti. Già sugli smartphone si possono individuare differenze sostanziali nelle dimensioni e nella risoluzione 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 automaticamente alle dimensioni dello schermo, venendo scalati gli elementi dell’applicazione in base all’interfaccia utente: il layout rimane però invariato, cosa che porta ad una visualizzazione poco conveniente dei contenuti dell’applicazione.

Ad esempio un layout che è stato adattato in modo ottimale al piccolo display di un iPhone, difficilmente risulterà adatto per lo schermo più grande di un iPad, infatti senza un adattamento al formato comune del tablet può succedere che i pulsanti sull’iPad siano sproporzionati e vengano visualizzati più grandi. Perciò è meglio creare una variante del layout specifica per il tablet. Questo layout per il tablet dispone solitamente di pulsanti più piccoli proporzionati e utilizza lo spazio ricavato per la visualizzazione di altri contenuti.

In un design professionale è quasi obbligatorio creare più versioni del layout, per precise risoluzioni e dimensioni del display: molte app dispongono di tre o più varianti, almeno nel caso in cui siano molto diffuse o puntino a raggiungere una maggiore notorietà. Ma lo sviluppo di diverse versioni di app si converte anche in un maggior impegno.

Inoltre non sono da dimenticare le due possibilità di orientamento di uno smartphone o di un tablet: se si passa dal formato verticale a quello orizzontale, si dovrebbe adattare la visualizzazione dei contenuti delle app di conseguenza. Anche per questo è necessario un altro layout. Se e quanti diversi layout bisogna realizzare per un’applicazione, dipende principalmente dal proprio progetto. Quando create un’app, pensate sempre che l’usabilità ne risentirà se si sceglie una formattazione del layout non proprio adatta.

Tra i prerequisiti di un’alta usabilità dell’app rientra sempre un design intuitivo. Così si intende soprattutto un uso facile e auto esplicativo che si orienta a schemi affermati e strutture tipiche della navigazione dell’app. La decisione se l’uso di un’applicazione è user-friendly o meno spetta sempre agli utenti dell’app. Perciò è ancora più importante che, al momento di stabilire il design dell’app, conosciate le preferenze di utilizzo e le aspettative del vostro target, in modo da potervi orientare alle loro esigenze. Non si tratta di indicare ai vostri utenti le competenze delle quali disponete in fatto di design, ma dovreste piuttosto concentrarvi nell’offrire ai destinatari dell’app la migliore esperienza d’uso possibile.

L’usabilità viene spesso raggiunta attraverso un layout chiaro, ordinato e semplice. Specialmente negli schermi piccoli degli smartphone non avete a disposizione molto spazio.  Perciò ponderate attentamente la quantità dei contenuti della vostra app da sistemare sullo schermo. L’applicazione non deve sembrare troppo carica: riducete i contenuti dell’app e le funzioni all’essenziale: ciò vi consente di creare tutto in maniera sufficientemente grande e lasciare anche delle superfici libere, cosa che farà sembrare gli schermi più armonici.

Il menu della vostra app deve essere posizionato in una posizione di rilievo ed essere subito riconoscibile dagli utenti. Nelle applicazioni vengono utilizzati, la maggior parte delle volte, menu a tendina, perché consentono di risparmiare spazio. L’elenco delle singoli voci del menu una volta chiuso non disturba gli utenti: la navigazione 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 principale dovreste inserire solo le funzioni più importanti dell’app e rendere accessibili le altre da un sotto menu.

La rappresentazione dei singoli punti del menu non dice però ancora niente sulla sua struttura generale. Nella vostra app dovreste assolutamente evitare di far cliccare diverse volte prima di giungere alla pagina desiderata. Così alcuni esperti suggeriscono 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 sicuramente dal tipo di app, ma dovreste continuare a seguire l’indicazione di mantenere i percorsi della vostra app i più brevi possibili. Le strutture del menu troppo complesse confondono gli utenti e ciò li porta a perdere facilmente l’orientamento all’interno dell’app.

Un altro fattore importante dell’usabilità dell’app è la realizzazione user-friendly degli elementi di navigazione. Specialmente le dimensioni, l’ordine e il design dei pulsanti sull’interfaccia utente sono molto importanti a questo punto. Fate attenzione che tutti gli elementi interattivi (menu a tendina, pulsanti, link, ecc.) siano sempre riconoscibili come tali e che possano essere cliccati senza problemi. Dovreste anche pensare che pure per gli utenti con dita più grandi dovrebbe essere possibile utilizzare i pulsanti senza difficoltà. Pulsanti troppo piccoli e posizionati male portano a un’errata digitazione e potrebbero perciò risultare frustranti per gli utenti.

Inoltre si consiglia un feedback grafico per l’utilizzo degli elementi interattivi: soprattutto nel caso di azioni che richiedono dei tempi di caricamento più lunghi, la vostra app dovrebbe indicare agli utenti tramite un simbolo o un’animazione, che il processo è momentaneamente in esecuzione. Ciò promuove la trasparenza dei processi delle app, come ad esempio durante le ricerche o il caricamento degli elementi.

Al contrario di una web app o di un’app ibrida, il design di un’app nativa si può adattare molto alla piattaforma iOS o Android in uso. Per questo motivo si può dare un migliore stile alle app native, cosa che risulta particolarmente positiva nell’ambito dell’usabilità.

Se volete sperimentare diversi layout, sono a vostra disposizione diversi programmi specifici; infatti per l’elaborazione del design dell’app finale, potete ricorrere a tool di diverse aziende. Rappresenta un vantaggio possedere modelli di design digitali dei singoli schermi, su cui deve funzionare l’app, che si possono creare con un programma come Photoshop o Sketch. I file di immagine si aggiungono poi in un tool di design per le app, si collegano tra di loro e si uniscono insieme ad un prototipo dell’applicazione (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 collegamento di diverse schermi tra di loro e la gestione delle interazioni. Potete infine testare il prototipo su uno smartphone o un tablet, dove anche l’uso dell’app avviene utilizzando le dita o compiendo altri tipici gesti per questi dispositivi.

Grazie a questi tool si possono sviluppare mockup completi per le app, pur non avendo conoscenze di programmazione. Con un po’ di impegno il prototipo riproduce in modo molto verosimile il funzionamento di una vera app. Vi presentiamo in breve i migliori tool più diffusi per il design.

InVision è un’applicazione pensata per un uso professionale. Il tool viene anche offerto in una variante gratuita, in cui però si deve rinunciare ad alcune funzioni. Tramite l’aggiunta e l’adattamento di modelli di design potete creare in modo relativamente veloce e semplice un layout completo per un’app come prototipo e provarlo su un dispositivo mobile. Così è anche possibile tramite diverse impostazioni, progettare l’uso di un prototipo di un’app in modo molto simile a quello dell’app vera e propria.

Una particolarità del tool è la realizzazione ben riuscita di funzioni per il lavoro in team. Qui non solo hanno accesso ai mockup più utenti, ma si possono inserire degli appunti direttamente nel prototipo e scambiarsi le opinioni sul design dell’app tramite la funzione di commento. Molte aziende rinomate come IBM, Twitter, Netflix o Soundcloud hanno già utilizzato InVision per realizzare dei prototipi per il design delle loro app.

Un’altra soluzione valida per entrambe le piattaforme, iOS e Android, è Marvel. Oltre a permettervi di realizzare i prototipi dei vostri design da testare direttamente sui dispositivi mobili, vi consente anche di crearli con uno strumento messo a disposizione da loro e modificarli tramite Photoshop o altri programmi di grafica. Non manca poi la possibilità di poter scambiare opinioni al riguardo con colleghi, collaboratori e clienti.

È disponibile una versione gratuita che consente di realizzare fino ad un massimo di 2 progetti, a cui però può accedere solo un utente. Per essere utilizzato da più utenti e poter creare progetti illimitati 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à predefiniti, che potete integrare nei vostri prototipi.  Ma non per questo il programma deve nascondersi dalla concorrenza, 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’applicazione, ma comunque potete testare e utilizzare gratuitamente fino a quando sarà necessario le funzioni di questo tool per il design dell’app.

Al momento di realizzare il design di un’app bisogna pensare a molti dettagli. Per concretizzare l’idea del layout dell’app e presentarla agli altri colleghi o a possibili sponsor, è utile ricorrere ai tre tool presentati qui per il design delle app, anche se ci sono comunque molti altri programmi alternativi. Se avete trovato il design più adatto alle vostre esigenze, non dovreste dimenticare che va riprodotto anche su diversi schermi grandi e con risoluzioni differenti. Perciò è obbligatorio 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 importante prima di venderla in un app store: testare l’app. Perciò il prossimo articolo della nostra serie si occupa del testing delle app.