Ui e Ux Design di una app

Terminata la fase di progettazione tecnica di una app, per svilupparla e testarla occorre preoccuparsi della sua interfaccia e dell’usabilità, accertandosi che la app sia gradevole e intuitiva per l’utenza prima di rilasciarla. Soprattutto quando si parla di app non bisogna mai trascurare il design, poiché da esso dipende spesso la decisione di scaricarla o meno da parte dell’utenza.

User Interface e Graphic User Interface a volte si trovano a indicare la stessa cosa, ma in realtà la GUI si riferisce prettamente all’aspetto grafico dell’interfaccia utente, che non riguarda solo i colori e i caratteri utilizzati ma anche l’aspetto di inserimento delle funzioni dell’app mobile.

È molto importante che uno UI designer che progetta una app tenga conto, dovendo l’app essere utilizzata su un dispositivo mobile, di cose come la risoluzione dello smartphone o del tablet e anche delle sue dimensioni. Ad esempio un layout pensato per l’interfaccia di un iPhone non può andare bene per il display di un Ipad, per cui per una questione d’ uso, gli sviluppatori devono provvedere a creare più versioni di una stessa app.

Inoltre i dispositivi mobili odierni cambiano visualizzazione a seconda di come orientiamo il nostro dispositivo, perciò, i progettisti considerano, nello sviluppo delle varie versioni, anche i layout verticali e orizzontali.

Tablet e smartphone servendosi di schermate touch, rendono gli aspetti grafici molto importanti e influenzano la stessa usabilità dell’app.

La parte visiva di una app si chiama layout e dal layout dipende come troviamo inseriti i contenuti. Per la creazione di un layout ci sono diversi kit, denominati generalmente UI o GUI kit, e comprendono, oltre al layout template, widget ecc. La maggior parte sono disponibili gratuitamente su Google e Apple. Su Google si trovano in una pagina dedicata che si chiama Material Design, su iOS sulla pagina Developer.

Nel tempo i progettisti hanno messo a disposizione anche i propri kit, considerando i sistemi operativi, per cui si possono reperire UI kit, per esempio, anche su sketchappsources.com se si ha bisogno di strumenti per un dispositivo Android.

I caratteri e i colori delle app

L’ user interface design, come già detto, comprendo la scelta dei caratteri di testo utilizzati e dalla cui scelta si comincia a determinare l’esperienza utente.

Per scegliere il font di un testo l’ux designer spesso fa riferimento ai caratteri più utilizzati dai sistemi operativi per le app già esistenti. Per esempio, dall’aggiornamento di iOS il font delle app Apple è diventato “San Francisco” e nei sistemi Android troviamo spesso “Roboto”, che secondo il punto di vista dei progettisti, anche per ragioni di spazio, sono i caratteri che consentono la migliore esperienza utente.

Poi questi font a differenza di altri sono già disponibili in fase progettuale e non devono essere aggiunti al sistema. E’ chiaro che nella scelta del carattere, quando si parla di user experience design, un web developer debba tenere conto anche, e soprattutto, dei contenuti che pubblicherà sull’app e degli obiettivi finali, per cui l’originalità è un elemento fondamentale per la concorrenza, non solo quando si parla di app, ma anche per lo sviluppo di un sito web.

Dopo aver scelto il carattere, bisogno accertarsi che il colore del font, abbia una buona visualizzazione sui dispositivi e questo significa considerare aspetti come l’esposizione alla luce naturale o artificiale, la formattazione del testo, in altre parole accertarsi che i contenuti siano disposti in maniera uniforme. 

Usabilità di una app

La ui user interface determina dunque l’esperienza d’uso di una app e i progettisti che lavorano su entrambi i fronti, ovviamente, si preoccupano del target a cui si rivolge il loro lavoro. Le esperienze d’uso possono essere diverse a seconda dell’utenza, per cui l’usabilità di una app o di un sito web viene valutata su dati personali.

Grazie a Google Analytics, comunque, i developer possono verificare l’usabilità del loro prodotto e i feedback degli utenti.

Un’esperienza d’uso ottimale può essere fornita partendo dalla scelta di un layout semplice e accattivante, diverso a seconda dei dispositivi su cui viene visualizzato. In quest’ottica anche la disposizione del menù diventa fondamentale perché dalla facilità con cui si trova e può essere usato la navigazione diventa subito piacevole.

Generalmente nelle app si trovano menù a tendina perché occupano meno spazio e sono più intuitivi.

Gli strumenti di design per i progettisti di app

Per provare i vari layout ci sono programmi appositi che contemplano modelli (mockup) a seconda degli schermi disponibili.

L’uso dei tool per testare un’app è facile e non richiede competenze di programmazione. I test avvengono di solito attraverso la funzione drag and drop, ossia attraverso il collegamento di diversi schermi per verificare le interazioni. La prototipazione, fatta in questo modo, consente ai progettisti di vedere in maniera reale l’usabilità delle loro app.

Fra i vari tool per i prototipi di app, i web designer utilizzano molto Marvel, che funziona sia su Android che su iOS. Con Marvel oltre ai test si può creare anche modelli e usufruire del supporto di programmi di grafica come Photoshop, condividendo il proprio lavoro con gli altri progettisti.

Marvel è disponibile gratuitamente per un numero limitato di progetti o a pagamento.

Poi c’è Fluid UI che fornisce tutta una serie di layout che possono essere integrati successivamente al prototipo già elaborato. Come Marvel la sua versione gratuita ha un limite di progetti, per cui chi vuole sfruttare al massimo questi tool ricorre alle versioni a pagamento. 

Se vuoi ampliare le tue conoscenze in fatto di UI e UX design, sia per app che per siti web, MAC Formazione mette a disposizione il corso professionale di ui/ux design che fa per te!