Sei uno sviluppatore e stai lavorando per fare una app per mobile? In questo momento stai realizzando l’interfaccia utente della tua applicazione? Ecco una serie di consigli che potrebbero farti comodo! Quello che differenzia due o più app che mirano allo stesso target di utenza è l’User Experience (UX), ovvero l’insieme delle sensazioni provate durante la fruizione di un’applicazione. Per garantire una buona UX bisogna partire dalla realizzazione dell’interfaccia utente, nota anche come User Interface (UI).

L’interfaccia utente è il mezzo attraverso il quale gli utenti interagiscono e comunicano con l’applicazione. È composta da una serie di elementi testuali e grafici, che permettono la navigazione tra le sezioni dell’app. Quindi non si tratta di un semplice layout, ma è pensata anche in funzione dei feedback delle azioni intraprese dall’utente.

Leggi anche User Experience, come migliorarla grazie alle heat maps

Molti sviluppatori alle prime armi si trovano spesso di fronte a difficoltà legate al design di un’interfaccia utente che sia accattivante, semplice da usare e funzionale. A tale fine ti proponiamo alcuni suggerimenti per aiutarti nel tuo lavoro!

I (nostri) 10 consigli per fare una app mobile a prova di mercato

Nella fase preliminare dello sviluppo di un’applicazione, è molto importante analizzare le UI di quelli che sono i competitor già presenti sul mercato (ovviamente se ci sono!), elencando i tratti distintivi della tua applicazione che possono generare un vantaggio competitivo. Questo passaggio è cruciale perché il rischio di finire nel limbo delle applicazioni-surrogato è molto alto. Questa analisi permette di ottenere maggiore consapevolezza di quello che gli utenti si aspettano in termini di user experience. Non è quindi consigliabile partire da zero, senza aver analizzato i format (o modelli) dominanti nel mondo delle app mobile.

1. Scegli quante sezioni avrà l’app

Quando ti appresti a fare una app, una volta definite tutte le funzionalità contenute nell’applicazione stessa, è opportuno progettare il numero di sezioni che sarà necessario creare, contando il numero di passaggi o azioni che ogni singola intenzione dell’utente richiede per essere portata a termine. È consigliabile ad esempio cercare di rendere raggiungibile il core service dell’applicazione fin dalla prima schermata. Anche quando l’app ha molte funzionalità, bisogna dare maggiore e immediato risalto alle funzioni principali, mentre le opzioni più avanzate possono essere rese raggiungibili con un maggior numero di passaggi.

Leggi anche Sviluppi le app? Sappi gestire il post-vendita, ti differenzierà dai dilettanti

2. Scegli il tipo di layout che più si addice alla tua app

Esistono 3 principali tipologie di layout:

• Linear Layout. Formato da elementi disposti in un unico senso, quindi verticalmente (orientamento verticale) o orizzontalmente (orientamento orizzontale);
• Table Layout. Gli elementi vengono racchiusi all’interno di righe e colonne di una tabella;
• Relative Layout. La distribuzione degli elementi è molto meno rigida, così come la navigazione, e il layout è dinamico, in grado di modificarsi in base alle dimensioni dello schermo.

In linea generale, i tre tipi di layout non precludono alcuna funzionalità, ma la scelta di uno piuttosto che l’altro può migliorare l’user experience di alcune applicazioni. In questo senso, per fare una app, è particolarmente consigliabile il relative layout, perché permette un adattamento piuttosto armonico su schermi anche molto diversi tra loro e gli elementi sembrano meno costretti entro schemi prefissati.

Leggi anche Come creare un sito mobile-friendly con queste 4 regole grafiche

3. Vuoi fare una app funzionale? Non ragionare sempre a menu e sotto menu

Come già precedentemente accennato, è importante riuscire a rendere accessibile la funzione principale per cui è stata creata l’applicazione fin dalla prima schermata. A tale scopo puoi richiamare il menu tramite un apposito pulsante in un secondo momento, senza necessariamente occupare un’intera schermata. Ovviamente, questo così come altri consigli, dipende dalla natura della tua applicazione. Un’applicazione di fitness richiede che l’utente scelga dal menu tra una certa varietà di allenamenti, sfide e tutorial in base alla propria esigenza, mentre in un’applicazione di previsioni meteo è opportuno che vengano mostrate fin da subito le previsioni a breve termine del luogo in cui si trova l’utente e che la ricerca di altre località si possa fare con un apposito comando.

4. Sfrutta l’action bar per fare una app!

L’Action Bar è una fascia rettangolare che si trova nella parte alta dell’interfaccia utente e contiene alcune funzioni ad accesso rapido. All’interno dell’Action Bar si inseriscono opzioni di interazione e navigazione cui l’utente potrebbe voler accedere in qualsiasi schermata dell’applicazione. I contenuti di questa barra sono solitamente l’icona e/o il nome dell’applicazione (che qui hanno il mero compito di titolo), due azioni come “ricerca” e “accedi”, e l’Action Overflow, che permette di accedere rapidamente ad altre elementi non presenti sull’Action Bar.

5. Scegli con cura il linguaggio di design, per fare una app al meglio

Esistono diversi linguaggi di design, ovvero metodi per concepire parole, immagini e segni secondo una filosofia precisa alla base. Un linguaggio che si è affermato negli ultimi anni grazie alla sua capacità innovativa è Material Design, creato da Google e pensato per conciliare i principi classici del buon design, basato sui materiali fisici, con le nuove innovazioni tecnologiche. Questo linguaggio si propone di superare il tradizionale Flat Design, il Metro Design di Microsoft e lo Scheumorfismo tipico dei primi iPhone. Il Brand Manual di Material Design è una puntuale e completa sintesi dei risultati di ricerche scientifiche sulla percezione dei colori, sull’uso degli elementi dinamici per mantenere alta la soglia dell’attenzione degli utenti e sull’applicazione dei principi tipografici per mostrare le gerarchie tra elementi (come l’uso dei grassetti, dei contrasti di colore e delle ombre). L’effetto finale dell’applicazione del Material Design è un’interfaccia che richiama alle proprietà della carta e dell’uso naturale delle luci e delle ombre. Per vedere concretamente l’applicazione di questo linguaggio di design, ti basta aprire qualsiasi app del pacchetto G Suite di Google!

6. Utilizza griglie e linee chiave per definire il layout

Il layout, per mantenere una coerenza visiva in tutte le sezioni dell’app, deve basarsi su griglie e linee chiave. Le griglie permettono un distanziamento preciso e costante tra gli elementi e tra questi e i bordi dello schermo. Le linee chiave permettono una distinzione tra gruppi diversi di elementi e strumenti.

7. Per fare una app progetta bene la navigazione

La fase successiva è la progettazione della navigazione. Per navigazione si intende l’insieme degli spostamenti che fa l’utente tra le schermate dell’app per completare una determinata azione. La navigazione segue tre direzioni:

1. Laterale, quando si scorrono elementi dello stesso livello gerarchico (ad esempio gli elementi di un menu);
2. Verticale, quando si accede agli elementi di un gruppo più grande (ad esempio quando si apre una cartella contenente dei file);
3. Inversa, quando si torna indietro rispetto alla navigazione cronologicamente effettuata.

8. Il tema di riferimento

Quando si passa al vero e proprio processo di design dell’interfaccia utente, bisogna scegliere un tema di riferimento. Il tema, che sia prodotto da terzi o da voi stessi, prevede l’utilizzo della stessa gamma di colori, le stesse font e il medesimo rapporto di grandezza tra gli elementi di ciascuna sezione. Si tratta insomma dell’applicazione dello stesso stile ad ogni schermata. Senza un tema sarebbe difficile rendere coerente, dal punto di vista visivo, l’esperienza dell’utente durante l’utilizzo dell’app e ogni sezione sembrerebbe estranea alle altre.

9. Usa i colori del tuo brand (o quelli del tuo cliente)

Per rendere riconoscibile il brand è molto utile utilizzare un tema con dei colori che rimandino a quelli del brand.  Qualora il brand non avesse un logo con dai colori particolarmente armonici o comunque inadatti ad un’applicazione mobile, è consigliabile mettere il logo nella parte inferiore delle schermate, oppure anche solo nella schermata principale. L’importante è che l’utente riconosca il brand senza però essere troppo invadenti!

10. Ricorda che i colori hanno un significato

Esistono alcuni colori che hanno un significato universalmente comprensibile. Uno di questi è il rosso, che permette di evidenziare facilmente i messaggi di errore, così come il verde viene utilizzato per indicare il corretto funzionamento di una funzione. Il richiamo di un determinato colore per indicare una funzione o un feedback è molto importante perché l’utente è abituato ad associare un colore ad un evento positivo o negativo. Un altro esempio molto intuitivo è quello del colore giallo o arancione, che indicano solitamente un processo incompiuto.

Leggi anche Come fare un logo senza sbagliare

Ognuno di questi consigli è stato pensato per una generica applicazione e possono non essere universalmente validi. Perciò le interfacce utente di alcune particolari applicazioni richiedono uno sforzo ulteriore per funzionare al meglio!

 Guest post e disegni in esclusiva per AddLance a cura di Fjorentino Buni