{"id":5625,"date":"2019-01-15T11:17:22","date_gmt":"2019-01-15T10:17:22","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=5625"},"modified":"2021-02-17T23:33:09","modified_gmt":"2021-02-17T22:33:09","slug":"fare-una-app","status":"publish","type":"post","link":"https:\/\/seven.addlance.com\/beta\/blog\/fare-una-app\/","title":{"rendered":"Stai pensando di fare una App Mobile? Ecco come realizzare un\u2019Interfaccia Utente efficace"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignright wp-image-5626 size-medium\" title=\"fare una app\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/12\/fare-una-app-300x200.jpg\" alt=\"fare una app\" width=\"300\" height=\"200\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-300x200.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-1024x683.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-768x512.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-1536x1024.jpg 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-610x407.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-1080x720.jpg 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app.jpg 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Sei uno sviluppatore e stai lavorando per fare <a href=\"https:\/\/www.addlance.com\/s\/app-design\">una app per mobile<\/a>? In questo momento stai realizzando l&#8217;interfaccia utente della tua applicazione? Ecco una serie di consigli che potrebbero farti comodo! Quello che differenzia due o pi\u00f9 <em>app<\/em> che mirano allo stesso <em>target <\/em>di utenza \u00e8 l&#8217;<strong>User Experience<\/strong> (UX), ovvero l&#8217;insieme delle sensazioni provate durante la fruizione di un&#8217;applicazione<strong>. Per garantire una buona UX bisogna partire dalla realizzazione dell&#8217;interfaccia utente<\/strong>, nota anche come User Interface (UI).<\/p>\n<p><!--more--><\/p>\n<p>L&#8217;<strong>interfaccia utente<\/strong> \u00e8 il mezzo attraverso il quale gli utenti interagiscono e comunicano con l&#8217;applicazione.\u00a0\u00c8 composta da una serie di elementi testuali e grafici, che permettono la navigazione tra le sezioni dell&#8217;<em>app<\/em>. Quindi non si tratta di un semplice <em>layout<\/em>, ma \u00e8 pensata anche in funzione dei <em>feedback <\/em>delle azioni intraprese dall&#8217;utente.<\/p>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/user-experience\/\">User Experience, come migliorarla grazie alle heat maps<\/a><\/p>\n<p>Molti sviluppatori alle prime armi si trovano spesso di fronte a difficolt\u00e0 legate al <em>design <\/em>di un&#8217;interfaccia utente che sia <strong>accattivante<\/strong>, <strong>semplice da usare e funzionale<\/strong>. A tale fine ti proponiamo alcuni suggerimenti per aiutarti nel tuo lavoro!<\/p>\n<h2>I (nostri) 10 consigli per fare una <em>app mobile<\/em> a prova di mercato<\/h2>\n<p>Nella fase preliminare dello sviluppo di un&#8217;applicazione, \u00e8 molto importante <strong>analizzare le UI di quelli che sono i <em>competitor<\/em><\/strong> gi\u00e0 presenti sul mercato (ovviamente se ci sono!), elencando i tratti distintivi della tua applicazione che possono <strong>generare un vantaggio competitivo<\/strong>. Questo passaggio \u00e8 cruciale perch\u00e9 il rischio di finire nel limbo delle applicazioni-surrogato \u00e8 molto alto. Questa analisi permette di ottenere maggiore consapevolezza di quello che gli utenti si aspettano in termini di <em>user experience<\/em>. Non \u00e8 quindi consigliabile partire da zero, senza aver analizzato i <em>format<\/em> (o modelli) dominanti nel mondo delle <em>app mobile<\/em>.<\/p>\n<ol>\n<li>\n<h3>Scegli quante sezioni avr\u00e0 l&#8217;<em>app<\/em><\/h3>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"size-large wp-image-5665 aligncenter\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-1024x684.png\" alt=\"\" width=\"1024\" height=\"684\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-1024x684.png 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-300x200.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-768x513.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-1536x1026.png 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-610x407.png 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout-1080x721.png 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/12\/fare-una-app-Layout.png 1873w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Quando ti appresti a fare una <em>app<\/em>, una volta definite tutte le funzionalit\u00e0 contenute nell&#8217;applicazione stessa, \u00e8 opportuno progettare il numero di sezioni che sar\u00e0 necessario creare, contando il numero di passaggi o azioni che ogni singola intenzione dell&#8217;utente richiede per essere portata a termine. \u00c8 consigliabile ad esempio cercare di rendere raggiungibile il <em>core service<\/em> dell&#8217;applicazione fin dalla prima schermata. Anche quando l&#8217;<em>app<\/em> ha molte funzionalit\u00e0, bisogna <strong>dare maggiore e immediato risalto alle funzioni principali<\/strong>, mentre le opzioni pi\u00f9 avanzate possono essere rese raggiungibili con un maggior numero di passaggi.<\/p>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/sviluppo-app-professionista\/\">Sviluppi le app? Sappi gestire il post-vendita, ti differenzier\u00e0 dai dilettanti<\/a><\/p>\n<ol start=\"2\">\n<li>\n<h3>Scegli il tipo di <em>layout<\/em> che pi\u00f9 si addice alla tua <em>app<\/em><\/h3>\n<\/li>\n<\/ol>\n<p>Esistono 3 principali tipologie di <em>layout<\/em>:<\/p>\n<ul>\n<li><strong><em>Linear Layout<\/em><\/strong>. Formato da elementi disposti in un unico senso, quindi verticalmente (orientamento verticale) o orizzontalmente (orientamento orizzontale);<\/li>\n<li><strong><em>Table Layout<\/em><\/strong>. Gli elementi vengono racchiusi all&#8217;interno di righe e colonne di una tabella;<\/li>\n<li><strong><em>Relative Layout<\/em><\/strong>. La distribuzione degli elementi \u00e8 molto meno rigida, cos\u00ec come la navigazione, e il <em>layout<\/em> \u00e8 dinamico, in grado di modificarsi in base alle dimensioni dello schermo.<\/li>\n<\/ul>\n<p>In linea generale, i tre tipi di <em>layout <\/em>non precludono alcuna funzionalit\u00e0, ma la scelta di uno piuttosto che l&#8217;altro pu\u00f2 migliorare <strong><em>l&#8217;user experience<\/em><\/strong> di alcune applicazioni. In questo senso, per fare una <em>app<\/em>, \u00e8 particolarmente consigliabile il <em>relative layout<\/em>, perch\u00e9 permette un adattamento piuttosto armonico su schermi anche molto diversi tra loro e gli elementi sembrano meno costretti entro schemi prefissati.<\/p>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/creare-un-sito-web-mobile-friendly\/\" target=\"_blank\" rel=\"noopener\">Come creare un sito mobile-friendly con queste 4 regole grafiche<\/a><\/p>\n<ol start=\"3\">\n<li>\n<h3>Vuoi fare una <em>app<\/em> funzionale? Non ragionare sempre a menu e sotto menu<\/h3>\n<\/li>\n<\/ol>\n<p>Come gi\u00e0 precedentemente accennato, \u00e8 importante riuscire a rendere accessibile la funzione principale per cui \u00e8 stata creata l&#8217;applicazione fin dalla prima schermata. A tale scopo puoi richiamare il menu tramite un apposito pulsante in un secondo momento, senza necessariamente occupare un\u2019intera schermata. Ovviamente, questo cos\u00ec come altri consigli, dipende dalla natura della tua applicazione. Un&#8217;applicazione di fitness richiede che l&#8217;utente scelga dal menu tra una certa variet\u00e0 di allenamenti, sfide e <em>tutorial<\/em> in base alla propria esigenza, mentre in un&#8217;applicazione di previsioni meteo \u00e8 opportuno che vengano mostrate fin da subito le previsioni a breve termine del luogo in cui si trova l&#8217;utente e che la ricerca di altre localit\u00e0 si possa fare con un apposito comando.<\/p>\n<ol start=\"4\">\n<li>\n<h3>Sfrutta l&#8217;<em>action bar <\/em>per fare una app!<\/h3>\n<\/li>\n<\/ol>\n<p><strong><em>L&#8217;Action Bar<\/em><\/strong> \u00e8 una fascia rettangolare che si trova nella parte alta dell&#8217;interfaccia utente e contiene alcune funzioni ad accesso rapido. All&#8217;interno dell&#8217;A<em>ction Bar<\/em> si inseriscono opzioni di interazione e navigazione cui l&#8217;utente potrebbe voler accedere in qualsiasi schermata dell&#8217;applicazione. I contenuti di questa barra sono solitamente l&#8217;icona e\/o il nome dell&#8217;applicazione (che qui hanno il mero compito di titolo), due azioni come \u201cricerca\u201d e \u201caccedi\u201d, e <strong><em>l&#8217;Action Overflow<\/em><\/strong>, che permette di accedere rapidamente ad altre elementi non presenti <em>sull&#8217;Action Bar<\/em>.<\/p>\n<ol start=\"5\">\n<li>\n<h3>Scegli con cura il linguaggio di <em>design, <\/em>per fare una <em>app<\/em> al meglio<\/h3>\n<\/li>\n<\/ol>\n<div id=\"attachment_5666\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5666\" class=\"wp-image-5666 size-large\" title=\"fare una app linguaggi design \" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-1024x506.png\" alt=\"fare una app linguaggi design \" width=\"1024\" height=\"506\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-1024x506.png 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-300x148.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-768x379.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-1536x759.png 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-610x301.png 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign-1080x533.png 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/2LinguaggiDesign.png 1873w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-5666\" class=\"wp-caption-text\">Lo scheumorfismo era il linguaggio di design utilizzato nell&#8217;interfaccia utente dei primi modelli di iPhone. La filosofia alla base era quella di ricreare materiali, riflessi di luce e colori di oggetti reali in chiave vintage. Il Modern UI Design \u00e8 stato creato da Microsoft e si fonda sull&#8217;utilizzo di colori vivaci e saturi. Gli oggetti vengono rappresentati attraverso icone 2D e viene abbandonato ogni tentativo di rappresentare il mondo reale. Il Flat Design si fonda su un minimalismo a due dimensioni, composto da forme semplici e colori piatti, arricchiti da ombre che rimandano alla tridimensionalit\u00e0<\/p><\/div>\n<p>Esistono diversi <strong>linguaggi di <em>design<\/em><\/strong><em>,<\/em> ovvero metodi per concepire parole, immagini e segni secondo una filosofia precisa alla base. Un linguaggio che si \u00e8 affermato negli ultimi anni grazie alla sua capacit\u00e0 innovativa \u00e8 <strong><em>Material Design<\/em><\/strong>, creato da Google e pensato per conciliare i principi classici del buon <em>design,<\/em> basato sui materiali fisici, con le nuove innovazioni tecnologiche. Questo linguaggio si propone di superare il tradizionale <strong><em>Flat Design<\/em><\/strong>, il <strong><em>Metro Design<\/em><\/strong> di Microsoft e lo <strong>Scheumorfismo<\/strong> tipico dei primi <strong><em>iPhone.<\/em><\/strong> <em>Il Brand Manual di Material Design<\/em> \u00e8 una puntuale e completa sintesi dei risultati di ricerche scientifiche sulla percezione dei colori, sull&#8217;uso degli elementi dinamici per mantenere alta la soglia dell&#8217;attenzione degli utenti e sull&#8217;applicazione dei principi tipografici per mostrare le gerarchie tra elementi (come <strong>l&#8217;uso dei grassetti, dei contrasti di colore e delle ombre<\/strong>). L&#8217;effetto finale dell&#8217;applicazione del Material Design \u00e8 un&#8217;interfaccia che richiama alle propriet\u00e0 della carta e dell&#8217;uso naturale delle luci e delle ombre. Per vedere concretamente l&#8217;applicazione di questo linguaggio di design, ti basta aprire qualsiasi <em>app<\/em> del pacchetto <strong>G Suite<\/strong> di <strong>Google<\/strong>!<\/p>\n<ol start=\"6\">\n<li>\n<h3>Utilizza griglie e linee chiave per definire il <em>layout<\/em><\/h3>\n<\/li>\n<\/ol>\n<p>Il <strong><em>layout<\/em><\/strong><em>,<\/em> per mantenere una coerenza visiva in tutte le sezioni dell&#8217;<em>app<\/em>, 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 <strong>linee chiave<\/strong> permettono una distinzione tra gruppi diversi di elementi e strumenti.<\/p>\n<ol start=\"7\">\n<li>\n<h3>Per fare una <em>app<\/em> progetta bene la navigazione<\/h3>\n<\/li>\n<\/ol>\n<p>La fase successiva \u00e8 la progettazione della navigazione. Per <strong>navigazione<\/strong> si intende l\u2019insieme degli spostamenti che fa l&#8217;utente tra le schermate dell&#8217;<em>app<\/em> per completare una determinata azione. La navigazione segue tre direzioni:<\/p>\n<ol>\n<li><strong>Laterale<\/strong>, quando si scorrono elementi dello stesso livello gerarchico (ad esempio gli elementi di un menu);<\/li>\n<li><strong>Verticale<\/strong>, quando si accede agli elementi di un gruppo pi\u00f9 grande (ad esempio quando si apre una cartella contenente dei file);<\/li>\n<li><strong>Inversa<\/strong>, quando si torna indietro rispetto alla navigazione cronologicamente effettuata.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li><strong> Il tema di riferimento<\/strong><\/li>\n<\/ol>\n<p>Quando si passa al vero e proprio processo di <em>design <\/em>dell&#8217;interfaccia utente, bisogna scegliere un tema di riferimento. Il tema, che sia prodotto da terzi o da voi stessi, prevede <strong>l&#8217;utilizzo della stessa gamma di colori,<\/strong> le stesse <em>font<\/em> e il medesimo rapporto di grandezza tra gli elementi di ciascuna sezione. Si tratta insomma dell\u2019applicazione dello stesso stile ad ogni schermata. Senza un tema sarebbe difficile rendere coerente, dal punto di vista visivo, l&#8217;esperienza dell&#8217;utente durante l&#8217;utilizzo dell&#8217;<em>app<\/em> e <strong>ogni sezione sembrerebbe estranea alle altre<\/strong>.<\/p>\n<ol start=\"9\">\n<li>\n<h3>Usa i colori del tuo brand (o quelli del tuo cliente)<\/h3>\n<\/li>\n<\/ol>\n<div id=\"attachment_5667\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5667\" class=\"wp-image-5667 size-large\" title=\"fare una app colori del brand \" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-1024x555.png\" alt=\"fare una app colori del brand \" width=\"1024\" height=\"555\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-1024x555.png 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-300x163.png 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-768x417.png 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-1536x833.png 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-610x331.png 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand-1080x586.png 1080w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/01\/fare-una-app-ColoriBrand.png 1873w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-5667\" class=\"wp-caption-text\">Esempi di interfacce utente costruite a partire dai colori del sito di AddLance<\/p><\/div>\n<p>Per rendere riconoscibile il <em>brand<\/em> \u00e8 molto utile utilizzare <strong>un tema con dei colori che rimandino a quelli del <em>brand<\/em>.<\/strong>\u00a0 Qualora il <em>brand <\/em>non avesse un logo con dai colori particolarmente armonici o comunque inadatti ad un\u2019applicazione mobile, \u00e8 consigliabile mettere il logo nella parte inferiore delle schermate, oppure anche solo nella schermata principale. L&#8217;importante \u00e8 che l\u2019utente riconosca il <em>brand<\/em> senza per\u00f2 essere troppo invadenti!<\/p>\n<ol start=\"10\">\n<li>\n<h3>Ricorda che i colori hanno un significato<\/h3>\n<\/li>\n<\/ol>\n<p><strong>Esistono alcuni colori che hanno un significato universalmente comprensibile<\/strong>. Uno di questi \u00e8 il <strong>rosso<\/strong>, che permette di evidenziare facilmente i messaggi di errore, cos\u00ec come il <strong>verde<\/strong> viene utilizzato per indicare il corretto funzionamento di una funzione. Il richiamo di un determinato colore per indicare una funzione o un <em>feedback<\/em> \u00e8 molto importante perch\u00e9 l&#8217;utente \u00e8 abituato ad associare un colore ad un evento positivo o negativo. Un altro esempio molto intuitivo \u00e8 quello del colore <strong>giallo<\/strong> o <strong>arancione<\/strong>, che indicano solitamente un processo incompiuto.<\/p>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/come-fare-logo-personalizzato\/\">Come fare un logo senza sbagliare<\/a><\/p>\n<p>Ognuno di questi consigli \u00e8 stato pensato per una generica applicazione e possono non essere universalmente validi. Perci\u00f2 le interfacce utente di alcune particolari applicazioni richiedono uno sforzo ulteriore per funzionare al meglio!<\/p>\n<p><em>\u00a0Guest post e disegni in esclusiva per AddLance a cura di Fjorentino Buni<\/em><\/p>\n<p>&nbsp;    \t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stai per fare una app mobile? Leggi le 10 regole d&#8217;oro per realizzarla in modo competitivo e ottimale per la user experience. I clienti saranno soddisfatti<\/p>\n","protected":false},"author":5,"featured_media":5626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[17],"tags":[46,18],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/5625"}],"collection":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/comments?post=5625"}],"version-history":[{"count":1,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/5625\/revisions"}],"predecessor-version":[{"id":10840,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/5625\/revisions\/10840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/5626"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=5625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=5625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=5625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}