La fase della progettazione precede quella dello sviluppo vero e proprio delle app mobili.
Dopo aver validato l’idea di app per verificarne l’idoneità e l’efficacia ed aver effettuato la necessaria ricerca di mercato che assicuri l’esistenza di un pubblico/target idoneo a poter diventare utente dell’app, si tratta ora di mettere a fuoco l’idea astratta per trasformarla in un progetto definito, con una sua interfaccia grafica (UI), un customer journey ideale dell’utente (UX), passando per le fase di creazione del wireframe e poi del mockup, del prototipo e del prodotto minimo di valore.
Queste fasi sono tutte essenziali e imprescindibili nel processo di progettazione di un’app in quanto consentono di fare chiarezza su tutti gli aspetti della futura applicazione, dal suo appeal grafico, all’esperienza utente, alle singole funzioni previste.
Una volta completata la fase di progettazione, il risultato finale potrà essere consegnato al team di sviluppo per la fase di sviluppo vera e propria, che consiste nella programmazione dell’app.
Indice
1. UI e UX nello sviluppo di applicazioni mobili
Avete verificato che la vostra idea di progetto è valida e avete anche controllato che esiste un mercato di riferimento che necessiterebbe della vostra futura app.
Ora è tempo di pensare alla fase di progettazione e i primi due termini che dovete considerare sono: UI (user interface) e UX (user experience).
Queste due componenti sono fondamentali perché vi consentono di traslare la vostra idea di app da un concetto astratto ad un progetto vero e proprio.
Grazie a UI e UX potete dunque cominciare a “dare corpo” alla vostra idea.
La UI definisce come un’app appare e interagisce con il fruitore, mentre UX mostra come un’app viene percepita dall’utente evidenziando il tipo di esperienza che egli vive utilizzandola.
La UI corrisponde all’interfaccia grafica e strutturale della futura app, che in informatica prende anche il nome di GUI (graphic user interface), e consiste in tutti gli elementi strutturali (schermate o artboards) e grafici (pulsanti, icone, ecc.) che permettono agli utenti di interagire con l’app attraverso il dispositivo elettronico (device mobile) che stanno usando.
L’interfaccia utente, quindi, riguarda il design dell’applicazione mobile.
Cos’è il design e come si relaziona all’interfaccia utente? La progettazione di un’applicazione mobile non riguarda solo l’uso di elementi estetici, la tipologia del tema, i font e gli schemi e i pannelli di colore, si tratta, piuttosto, di come tutti gli elementi grafici si fondono tra loro per aumentare il coinvolgimento dell’utente, la sua fidelizzazione e il miglioramento del riconoscimento del marchio o del prodotto.
Come dice la parola stessa, le interfacce sono “facce”; creano identità, suscitano emozioni. Una buona interfaccia deve offrire una bella esperienza utente e deve saper riflettere l’identità e il valore del brand ponendo grande attenzione e accurata precisione nella scelta dei caratteri tipografici, dei colori e delle immagini, definendo le griglie che contengono ogni singolo elemento.
La User Experience (UX), corrisponde al modo in cui l’utente “vive” la sua esperienza di utilizzo dell’app. Quando si tratta di progettare un’applicazione mobile e di definire il flusso di navigazione, la UX ha sempre una priorità maggiore rispetto alla UI. L’esperienza utente include ogni aspetto dell’interazione degli utenti con l’applicazione. L’idea fondamentale di una UX efficiente è quella di conquistare la fiducia degli utenti sviluppando un’applicazione comprensibile e usabile in modo da soddisfare gli utenti. Un buon designer UX deve avere una conoscenza esatta, frutto di una accurata ricerca, del pubblico di destinazione, della nicchia del settore e delle richieste degli utenti, unitamente alle alle tendenze attuali e future del mercato.
Rispetto alla UI, che si concentra più sul design e la struttura, la UX pone maggiore attenzione all’usabilità e all’interazione.
Un’interfaccia utente sorprendente e un’esperienza utente intuitiva assicurano un uso impeccabile dell’applicazione, uno dei parametri fondamentali e altamente richiesti per definire il successo di un’app mobile mobile. Se le UI e UX sono ben progettate, gli utenti vivranno un’esperienza utente di prim’ordine in termini di navigazione e “look and feel”.
2. I diagrammi di flusso dell’esperienza utente (UX Flow Chart)
Un diagramma di flusso rappresenta un flusso di lavoro o un processo e può essere definito come una rappresentazione diagrammatica di un algoritmo, un approccio passo/passo alla definizione strutturale e consequenziale di un progetto.
I diagrammi di flusso sono usati nella progettazione in quanto consentono di mettere “nero su bianco” la struttura dell’app definendo così il suo schema complessivo e i collegamenti fra le diverse sezioni.
Per cominciare a lavorare sui diagrammi, un punto di partenza classico è quello di prendere carta e matita e di cominciare a sbizzarrirsi. Tuttavia questo approccio non è certo il più funzionale, soprattutto perché ci sarebbero troppe cancellature da fare che porterebbero a continue revisioni e riscritture d’accapo. Molto meglio usare qualche programma, tanto più che ve ne sono di facili e gratuiti che si pongono come ottimi tool specifici per questo compito.
Ad esempio, una buona idea è quella di utilizzare Google Docs che è facile e intuitivo, gratuito, ed offre strumenti di collaborazione e co-working integrati, che rendono semplice il monitoraggio dei commenti. La capacità di collegarsi ai file di Google Drive (o a qualsiasi URL) dai “nodi” del diagramma di flusso facilita il monitoraggio dei progressi in tempo reale per i team remoti.
Google Drawings non è esplicitamente progettato per i diagrammi di flusso (lo svantaggio, poi, è che le frecce ai nodi non si muovono automaticamente quando i nodi vengono spostati), eppure i benefici superano gli svantaggi.
Ecco un esempio realizzato con Google Drawing in cui ogni tipo di freccia rappresenta una decisione critica che gli sviluppatori dovranno approfondire:
- Le frecce di colore blu rappresentano le normali transizioni da pagina a pagina.
- Le frecce color rosa rappresentano le transizioni Asynchronous JavaScript and XML (AJAX), che estrae il contenuto dal server
- Le frecce tratteggiate di colore marrone rappresentano invece eventi JavaScript come presentazioni di tooltip, visualizzazione di finestre lightbox, cambio di tab
3. Strumenti e software per la creazione di diagrammi di flusso
LucidChart – Strumento di collaborazione online con un account gratuito illimitato che permette la creazione di un numero illimitato di diagrammi con un limite di 60 oggetti per diagramma.
- Funzioni:
- Crea diagrammi di flusso, organigrammi, wireframe di siti web, disegni UML (Unified Modeling Language), mappe mentali, prototipi di software e tipi di diagrammi;
- Funziona in Google Chrome, Firefox, Safari, Microsoft Edge e Internet Explorer 8;
- Basato sul cloud;
- Offre la collaborazione tra i team in tempo reale;
- Permette la pubblicazione e la condivisione;
- Esportazione in PDF vettoriali, JPEG e immagini PNG;
- Importa da Visio, OmniGraffle 6 e OmniGraffle 6 Pro;
- Si integra con Google Apps, Confluence e JIRA;
- Offre sicurezza a livello aziendale e controlli amministrativi.
- Prova e prezzi: l’account gratuito permette la creazione di un numero illimitato di diagrammi con un limite di 60 oggetti per diagramma; Prova gratuita per 7 giorni.
Microsoft Visio è un’applicazione di diagrammi e grafica vettoriale che fa parte della famiglia Microsoft Office.
- Funzioni:
- Crea diagrammi di flusso, organigrammi, wireframe di siti web, disegni UML, mappe mentali, prototipi di software, e tipi di diagrammi;
- Permette la pubblicazione e la condivisione;
- Caratteristiche Sicurezza a livello aziendale e controlli degli amministratori;
- Non è un’applicazione cloud e web;
- Non permette la collaborazione tra team in tempo reale;
- Deve essere scaricato e installato;
- Funziona solo su Windows.
- Integrazione con Microsoft Excel, SQL server, SQL Azure e SharePoint.
- Prova e prezzi: prova per 30 giorni.
- Funzioni:
- Crea diagrammi di flusso, organigrammi, wireframe di siti web, disegni UML (Unified Modeling Language), mappe mentali, prototipi di software e tipi di diagrammi;
- Non è basato sul cloud o una web-app;
- Consente la pubblicazione e la condivisione;
- Esportazione in PDF vettoriali e immagini PNG;
- Caratteristiche Sicurezza a livello aziendale e controlli degli amministratori.
- Si integra con Google Apps, Confluence e JIRA.
- Prova e prezzi: Prova gratuita per 30 giorni; Licenza di aggiornamento basata su sconti di volume che è necessario aggiungere una chiave di licenza.
Creately è un’applicazione di diagrammi collaborativi che funziona offline e online.
- Funzioni:
- Crea diagrammi di flusso, organigrammi, wireframe di siti web, disegni UML (Unified Modeling Language), mappe mentali, prototipi di software e tipi di diagrammi;
- Funziona online e offline;
- Basato su cloud e desktop;
- Permette la pubblicazione e la condivisione;
- Si integra con Google Apps, Confluence e JIRA;
- Plugin: FogBugz Server, Confluence Server e JIRA;
- Caratteristiche Sicurezza a livello aziendale e controlli degli amministratori.
- Collaborazione tra team in tempo reale su desktop o online.
- Prova e prezzi: Cloud Free con 5 diagrammi pubblici e 3 collaboratori; Cloud Personal per $5 al mese con diagrammi e progetti illimitati;Cloud Team per $25 al mese con condivisione di progetti e collaboratori illimitati.
Google Slides permette di creare e condividere il tuo lavoro online accedendo ai tuoi documenti da qualsiasi luogo gratuitamente.
- Funzioni:
- Crea diagrammi di flusso, organigrammi, wireframe di siti web, disegni UML (Unified Modeling Language), mappe mentali, prototipi di software e tipi di diagrammi;
- Disponibile in web-app che funziona in Google Chrome, Firefox, Safari, Microsoft Edge e Internet Explorer 8)
- Basato sul cloud;
- Permette la collaborazione tra team in tempo reale;
- Permette la pubblicazione e la condivisione;
- Esporta in Microsoft Word, OpenDocument Format, Rich Text Format, PDF, Plain Text, Web Page e EPUB Publication.
- Funziona su tablet finché è una web app.
Altre soluzioni disponibili sul mercato
- Abstract
- Nevron Draw
- Draw.io
- MyDraw
- Pidoco
- Matita 2D
- Code2flow
- Gleek
- Yuml
- SourceSpy
4. I wireframes
In termini semplici, un wireframe di un’applicazione mobile è uno schizzo bidimensionale che serve come guida visiva per illustrare come funzionerà un’applicazione.
Un wireframe non è contempla il design completo dell’app, ma solo le schermate chiave e gli elementi dell’interfaccia; in tal modo, il proprietario dell’app e il team di sviluppo possono usare un wireframe per concordare e chiarire la direzione e la portata dell’intero progetto.
Anche se il wireframe era originariamente esclusivo del web design e del Computer-Aided Design (CAD), la pratica è poi diventata parte integrante dello sviluppo delle app.
I designer usano riquadri, linee grigie, forme e segnaposti per i wireframes per ottenere una presentazione visiva comprensibile che riesca a chiarire la struttura dell’app e la composizione delle singole schermate.
Un wireframe non è un progetto grafico ad alta fedeltà e non contiene quindi elementi di design dettagliati come loghi, specifiche dei caratteri e immagini reali. Si tratta, piuttosto, di qualcosa di simile a un piano architettonico o a un diagramma schematico. I designers di User Experience (UX) spesso lo creano come guida per gli sviluppatori al fine di iniziare l’intero processo di sviluppo. Grazie alla sua semplicità, i designer, gli sviluppatori e i team di produzione possono deliberare e modificare le idee di design in modo collaborativo senza significative implicazioni di costo.
I wireframes di un’applicazione mobile devono riflettere:
- la gerarchia dei contenuti
- la distribuzione dello spazio
- possibili azioni dell’utente dell’app
- caratteristiche dell’app
- transizioni tra le pagine dell’app
I wireframes non includono invece:
- Elementi di design
- Colori (tranne dovute eccezioni)
- Font
- Grafica e immagini stilizzate
- Loghi
In sostanza, visualizzando un wireframe, chiunque deve essere in grado di riconoscere le diverse caratteristiche che saranno integrate nell’app, unitamente allo spazio che è stato assegnato a queste caratteristiche.
La maggior parte dei wireframes fa uso solo della scala di grigi, il che significa che i designers hanno bisogno di fare molte ombreggiature: tonalità di grigio più chiare per i colori più chiari e tonalità più scure per i colori più profondi.
In alcuni wireframes ad alta fedeltà, potremmo vedere qualche colore come il rosso e il blu che sono talvolta usati per mostrare rispettivamente avvertimenti e azioni suggerite. Dal momento che si tratta di uno schizzo bidimensionale di base, un wireframe di un’applicazione mobile potrebbe non funzionare quando si raffigurano certe caratteristiche interattive dell’interfaccia utente. Elementi dell’interfaccia come i menu a tendina, la funzionalità mostra-nascondi e le azioni di hover possono essere difficili da illustrare.
4.1. Perché i wireframes di un’app mobile sono importanti?
Se eseguito correttamente, un wireframe di un’app colma il divario (apparentemente enorme) tra l’idea iniziale e il prodotto finale incentrato sull’utente. I wireframes aiutano a mettere insieme i numerosi concetti e le idee consensando il tutto il un flusso grafico intuitivo e comprensibile.
In sostanza, i wireframes aiutano a “capire meglio” la tua app e da ciò deriva la loro fondamentale importanza.
Mentre l’idea di app è ancora grezza e tutta da implementare, i wireframes ne definiscono la visione e lo scopo. Investendo nel wireframing, si arriva dunque a passare (virtualmente) attraverso i passaggi del processo di sviluppo. Ciòi aiuta a esplorare e chiarire in che modo l’app raggiunga il suo scopo e perché un utente dovrebbe volerla scaricare sul suo cellulare.
L’uso dei wireframes, inoltre, aiuta a mantenere il processo di sviluppo incentrato sull’utente. Senza una rappresentazione visiva, è difficile per i designer misurare quanto sarà efficace l’interazione dell’utente con l’interfaccia. Un wireframe definisce il contesto e l’incentivo dietro le azioni dell’utente, consentendo di modificare facilmente il design per migliorare l’esecuzione delle attività.
Un altro vantaggio, assai evidente ed apprezzabile, consiste nel risparmio di denaro sulla successiva revisione del design o del codice. A differenza degli elementi di design UI/UX di alto livello, i wireframes sono disegni basilari ed essenziali, economici e facili da fare. Che si tratti di un wireframe cartaceo o digitale, ci sono molte risorse che puoi usare per completare una schermata wireframe in poche ore o addirittura minuti.
Se ci sono delle modifiche da implementare, puoi anche farlo con poca o nessuna spesa. Diversamente, invece avresti bisogno di tempo e denaro per riprogettare o riscrivere il codice di un’app completa.
Infine, i wireframes rendono possibile analizzare e, possibilmente, migliorare l’UX prima ancora di iniziare il processo di progettazione o sviluppo. Ottimizzando il numero di schermate (artboards) necessarie per eseguire diversi compiti, si renderà anche la navigazione il più intuitiva possibile.
5. Il mockup: dalla struttura alla grafica
5.1. Cos’è un mockup?
I mockup sono un modo eccellente per condividere il design finale dell’app mobile in corso di progettazione con clienti, finanziatori o colleghi e consiste in una simulazione ad alta fedeltà di come apparirà l’applicazione mobile.
I mockup combinano la struttura e la logica di un wireframe con la grafica ad alta fedeltà e gli elementi della UI ma non includono le transizioni e le funzioni utilizzabili che vedrete in un prototipo e nel prodotto finale. Pertanto, i mockup costituiscono uno stadio intermedio nel design del progetto, offrendo molti più dettagli visivi di un wireframe, ma senza la piena funzionalità di un prototipo.
Un ottimo modo per pensare a un mockup è soffermarsi su come viene progettata un’automobile. Le fasi iniziali della progettazione di un’auto coinvolgono lo schizzo delle sue linee di base e poi lo sviluppo di un piano schematico. La fase successiva è quella di creare un modello a grandezza naturale dell’auto che assomigli esattamente al prodotto finale. Questo è il mockup.
I mockup automobilistici sono usati per testare l’aerodinamica di un veicolo in una galleria del vento e per valutare l’opinione popolare sull’aspetto dell’auto, ma mancano del motore, delle parti meccaniche e dei sistemi elettrici ed elettronici che si troveranno nel prodotto finale.
I mockup di app sono utili perché ti aiutano a fornire un design quasi definitivo dell’intera app mobile, senza dover affrontare il duro lavoro di programmazione di funzioni complesse. Grazie al loro impatto visivo, i mockup sono una risorsa eccellente da condividere con i clienti in modo che possano convalidare le decisioni di design e il loro impatto sull’esperienza dell’utente prima di iniziare a lavorare sul funzionamento effettivo del prodotto.
I mockup sono dunque assai utili per una prima serie di test dell’utente. Gli utenti non possono interagire con un mockup, se non a livello estremamente basilare, tuttavia possono fornire il loro feedback sul design in una fase relativamente iniziale dello sviluppo del prodotto.
5.2. Perché progettare un mockup?
La progettazione di un mockup consente di:
- Massimizzare il buy-in del cliente, nella fase iniziale della progettazione
- Progettare un mockup per un’app mobile rende molto più facile comunicare e condividere le tue idee di design del prodotto con il cliente in una fase ancora iniziale dello sviluppo del progetto. I benefici possono essere enormi. Presentare al cliente un mockup ad alta fedeltà e magari anche cliccabile è un modo eccellente per convincerlo che l’approccio al design è giusto per il suo prodotto. Inoltre, progettare un mockup con un design visivo completo può prevenire brutte sorprese quando si avvicina la data di lancio del prodotto, permettendo al cliente di dare il suo feedback sul design prima che venga fatto un costoso lavoro di sviluppo;
- Migliorare la collaborazione e la comunicazione con tuo team di sviluppo
- Non è solo la comunicazione con tuo cliente a beneficiare della progettazione di un mockup. Il processo di consegna del design è un momento vitale nello sviluppo del prodotto. Coincide con il momento in cui il design finale viene passato agli sviluppatori, completo degli asset e delle linee guida di cui avranno bisogno per codificarlo in un prodotto vero e proprio.
- Creare un mockup con un design visivo completo rende molto più chiaro per gli sviluppatori rendersi conto di cosa ci si aspetta da loro. Un mockup chiaro e completo, idealmente combinato con un sistema di design che includa una guida di stile, specifiche di design, modelli e componenti, aiuta gli sviluppatori aiutando a garantire che non ci sono incertezze nel prodotto.
- Implementare l’UX già in fase iniziale dello sviluppo, e migliorare l’efficienza
- Creare un mockup aiuta a individuare i problemi di usabilità prima di iniziare a codificare, il che rende il progetto complessivo più efficiente e meno costoso. Lavorare con un mockup aiuta a definire i flussi degli utenti, la gerarchia visiva, la spaziatura e la tipografia. Ciò aiuterà a stabilire un approccio “UX-first” allo sviluppo del prodotto.
5.3. Come progettare un mockup efficace
Un mockup di un’app mobile o di un sito web mette insieme elementi strutturali e visivi per presentare una visione ad alta fedeltà del prodotto finale. Gli elementi strutturali sono aspetti che definiscono come le informazioni sono organizzate, strutturate e presentate al fine di ottenere la migliore esperienza utente possibile. Ecco i tre tipi principali:
- Architettura dell’informazione
Come le informazioni nell’app o nel sito web sono organizzate, logicamente e gerarchicamente, per fornire all’utente l’esperienza più coerente. L’obiettivo dell’architettura dell’informazione è quello di evitare qualsiasi momento in cui l’utente possa essere confuso o infelicemente sorpreso dal comportamento dell’app, o dal posizionamento delle sue informazioni. - Navigazione e struttura
Come l’utente interagirà e troverà la sua strada nell’app o nel sito web. Importante, questo si riferisce a stabilire un design di navigazione – per esempio, pulsanti, briciole di pane, menu – pronto ad aggiungere interazione. - Layout
Il layout riguarda il modo in cui gli elementi di contenuto saranno posizionati nel sito web o nell’app. Gli elementi di contenuto includono: titoli, caselle di testo, immagini, video, schede informative e social media incorporati, e i loro bordi, spaziatura e posizionamento.
Gli elementi di design sono le parti dell’app che stabiliscono come esso appare e viene percepito dall’utente.
- Branding e logo
questa è una parte vitale del design; il branding e il logo agiscono come un perno che riunisce l’esperienza dell’utente e aiuta a definire molte delle regole di base che influenzano altri aspetti del design. - Colori
Costruendo il branding centrale, i colori utilizzati nell’app sono gli elementi visivi che i vostri utenti tenderanno a notare per primi. Siate consapevoli del fatto che alcuni utenti potrebbero avere problemi di vista che impediscono loro di vedere il colore allo stesso modo delle altre persone, quindi dovreste evitare di usare il colore come unico modo per comunicare qualcosa nella vostra app o sito web. - Forma e design di elementi e componenti
Si tratta di decidere esattamente come saranno i tuoi elementi di navigazione e di contenuto, anche se in realtà a livello mockup saranno pressoché statici. Questi elementi sono usati per permettere all’utente di interagire con l’app, e il loro aspetto è una parte critica del design. - Tipografia
I caratteri e le dimensioni dei caratteri che scegli per la tua app web devono essere chiaramente riflessi nel tuo mockup. L’obiettivo è quello di ottenere una leggibilità e una coerenza ottimali per titoli e intestazioni, navigazione e contenuti. - Immagini
Il mockup non sarebbe completo se non includesse le immagini che appariranno nel prodotto finale.
5.4. L’interazione nei mockup
Esiste un fervido dibattito su come gestire l’interazione nei mockup. I “puristi” insistono nell’affermare che i mockup non dovrebbero includere alcuna interazione. Tuttavia il mockup è concepito per comunicare il design di prodotto a colleghi e clienti. In definitiva, rendere il mockup cliccabile lo renderà molto più facile da usare e capire.
Rendere interattivi gli elementi di navigazione di base è facile da fare e aggiungerà una nuova dimensione al mockup, senza convertirlo in un prototipo completamente interattivo. Aggiungere questa sorta di interattività, sia pure basilare e limitata, può aiutare a spiegare il design a clienti e sviluppatori, aumentando il buy-in e semplificando il passaggio di consegne del design.
5.5. Strumenti e software per realizzare il Mockup dell’app mobile
Dalla costruzione di un sistema di design coesivo alla progettazione di flussi per la prossima innovazione del dispositivo o la prototipazione di interfacce complesse per il test dell’utente, i designer possono scegliere tra un’abbondanza di strumenti di design UX. Che si tratti di uno dei programmi più popolari come Sketch, oppure di Figma, basato sul web, del popolare Adobe XD, o del più recente InVision Studio, la familiarità con i giusti strumenti di progettazione UX accelererà il processo di progettazione del prodotto.
Fino a pochi anni fa, poche persone capivano cosa fosse una “user experience”, oggi, invece, i designer lavorano quotidianamente sulla realizzazione di mockup che costituiscono la base per i futuri prototipi.
Tra gli strumenti più noti e diffusi nel settore, due si distinguono fra tutti per la loro notorietà e ricchezza di funzioni: Adobe XD e Sketch.
5.5.1. Sketch
Sketch è un grande strumento di progettazione di app per l’editing vettoriale, la prototipazione e la collaborazione. Lo strumento offre un toolkit di design digitale per la costruzione di app che contiene una notevole quantità di simboli di design riutilizzabili e condivisibili all’interno della comunità del design.
Il software permette di lavorare con una tela di dimensioni infinite e di creare tutte le artboard (così vengono definite le singole “schermate” dell’app che si sta preparando) precedentemente stabilite nel wireframe. Per quanto riguarda lo stile, è possibile utilizzare più colori e gradienti di riempimento, bordi e immagini in scala automatica su un singolo livello per mantenere la lista dei livelli pulita e organizzata. Quando il lavoro di design è terminato Sketch consente di esportare le risorse per tutte le diverse risoluzioni dei dispositivi – organizzando le risorse in cartelle che possono essere ricreate istantaneamente in caso di modifiche successive.
Sito web: www.sketch.com
5.5.2. Adobe XD
Adobe XD aiuta a creare mockup molto realistici, in modo da poter comunicare la visione di progettazione nel migliore dei modi facilitando la comprensione del progetto al team di sviluppo. Si tratta di un potente strumento di design vettoriale, facile da usare, il quale è disponibile sia su sistemi Mac che Windows.
Il lavoro di squadra è facilitato grazie alla possibilità di condividere link a progetti e specifiche, in modo che i membri possano visualizzare e lasciare facilmente un feedback tramite commenti direttamente nel browser.
Sia che ci si trovi ancora nelle prime fasi di whiteboarding di un’idea, o che si stiano dando gli ultimi ritocchi a progetti pronti per la produzione, Adobe XD è dotato di caratteristiche che aiutano ad articolare queste idee in modo efficiente ed efficace, tra cui:
- Componenti e stati
- Si crea un componente e lo si usa ovunque senza doverlo disegnare ex novo. I componenti in Adobe XD semplificano il processo di riutilizzo di elementi comuni come pulsanti e navigazione, e li mantengono sincronizzati in tutto il progetto. Con un componente principale creato, qualsiasi modifica apportata al principale apparirà automaticamente in tutte le istanze;
- Gli Stati dei componenti ti permettono di creare variazioni su un singolo componente e di aggiungere interazioni tra questi stati che vengono applicate a tutte le istanze, tra cui interazioni di hover, click o caricamento su un pulsante, o per aggiungere effetti di commutazione per pulsanti radio e toggle.Griglia di ripetizione
- Griglie di ripetizione
- La creazione di contenuti ripetuti, come un carosello di schede, una tabella di dati o una galleria fotografica può spesso assorbire tempo nel processo di progettazione. Con l’iterazione, l’aggiornamento di quel contenuto e il mantenimento delle copie in sincronia possono bruciare tempo prezioso, meglio se speso altrove. Con il clic di un pulsante è possibile automatizzare il noioso processo di ripetizione dei contenuti. Una volta attivato, qualsiasi oggetto o gruppo di oggetti può essere ripetuto orizzontalmente e verticalmente. Il testo e le immagini possono essere sovrascritti trascinando immagini e file di testo sulla Griglia di ripetizione, facilitando la transizione dal wireframe a progetti a più alta fedeltà.
- Trasformazioni 3D
- Aggiungi facilmente la prospettiva ai tuoi progetti con 3D Transforms. Creare esperienze per la realtà aumentata e virtuale, sistemi di infotainment in auto, o semplicemente mostrare il lavoro in modi convincenti è tutto più realizzabile con i controlli spaziali intuitivi e la semplicità di 3D Transforms.
- Librerie condivisibili
- Rendere disponibili le risorse in un team o in più team non dovrebbe essere un ostacolo. Con le librerie in Adobe XD, è possibile sfruttare la potenza delle librerie di Creative Cloud con la possibilità di condividere un sistema di progettazione in tutta l’organizzazione, ricevendo aggiornamenti quando vengono apportate modifiche a colori, stili del marchio o componenti. Le librerie rendono più facile che mai rimanere allineati tra le varie discipline e garantire un’esperienza coerente per i vostri clienti.
- Plugin
- I plugin sono fantastici per estendere la potenza di Adobe XD in base alle tue esigenze. Se hai bisogno di un accesso rapido ai set di icone o alle immagini di stock, se vuoi popolare i tuoi progetti con dati e copie reali, o se vuoi assicurarti di lavorare con combinazioni di colori accessibili, Adobe ha un plugin che si adatta alle tue esigenze.
- Esportazione in HTML/CSS
Sito web: https://www.adobe.com/products/xd.html
5.5.3. Altri strumenti e software per realizzare Mockup disponibili sul mercato
- Justinmind: è uno strumento all-in-one in grado di creare wireframe e prototipi ad alta fedeltà per le app. È più esclusivo sulla progettazione di app mobili rispetto agli attuali strumenti di progettazione mainstream, grazie al buon supporto in operazioni di gesti, transizioni ed effetti interattivi. È possibile creare wireframes interattivi con l’aiuto di animazioni e interazioni senza alcun codice coinvolto. Iniziate rapidamente con una serie di modelli personalizzabili utilizzando la sua interfaccia drag-and-drop. Lo strumento offre anche il supporto per le presentazioni online, permettendo agli utenti di condividere i wireframes in remoto.
- Prezzi: A partire da $19/mese
- Sito web: www.justinmind.com
- Mockplus: con un’applicazione basata su desktop come Mockplus, puoi facilmente e rapidamente prototipare la tua app mobile. Mockplus ha reso la loro applicazione molto facile da usare in modo da non aver bisogno di dati o competenze tecniche per realizzarla. È possibile trovare modelli per Android, iPad e iPhone in ogni dimensione secondo le vostre esigenze specifiche. Mockplus ha anche più di 200 componenti e più di 3000 icone. Con un semplice drag-and-drop, è possibile costruire prototipi interattivi senza sforzo.
- Prezzi: $199 (Pro) all’anno/ $399 (illimitato) per utente per tutta la vita
- Sito web: www.mockplus.com
- Proto.io: è uno strumento di wireframing e prototipazione che si rivolge al test dell’esperienza utente. Come strumento di wireframing, non solo ti permette di creare wireframes interattivi, ma puoi anche testare come gli utenti interagiscono con i tuoi wireframes e raccogliere i primi feedback degli utenti. Si tratta di un ottimo software per il wireframing e la prototipazione mobile in quanto permette anche agli utenti di visualizzare i prototipi offline e viene fornito con un sacco di widget mobili. Proto.io è disponibile su Android, iOS, desktop o browser web. Offre anche una prova gratuita di 15 giorni senza rischi.
- Prezzi: $24 (Freelance)/ $40 (Startup)/ $80 (Agency)/ $160 (Corporate) al mese, fatturati annualmente
- Sito web: www.proto.io
- Moqups: è una piattaforma puramente web-based utilizzata per creare un wireframe per applicazioni web e mobili. Il più grande vantaggio delle piattaforme web-based è che si può lavorare ovunque. Moqups è stato reso disponibile gratuitamente alla comunità di sviluppatori di tutto il mondo. È possibile creare semplici wireframe, modelli solidi e concetti UI utilizzando questo mockup online e i suoi modelli integrati possono essere utilizzati direttamente.
- Prezzi: I piani a pagamento partono da $13 a $20 al mese con un numero definito di utenti.
- Sito web: www.moqups.com
- InVision: è un grande strumento creato da designer per i designer. Preferisci creare i tuoi wireframes su una lavagna bianca dove tutti possono contribuire e rivedere? Allora questo potrebbe essere lo strumento che fa per te. Con InVision, crei mockup interattivi e li condividi con il tuo team, che può poi lasciare commenti direttamente sullo schermo. Hai anche accesso a liste di cose da fare in tempo reale, permettendo agli altri di partecipare alla discussione.
- Prezzi: Gratuito
- Sito web: www.invisionapp.com
- Fluid UI: è un altro importante e popolare strumento di wireframing e mockup. Fluid UI utilizza le ultime tecnologie come HTML5, JavaScript e CSS. È possibile creare layout facilmente trascinando elementi da queste librerie. Fluid UI fornisce un ottimo modo per mappare visivamente i vostri progetti creando collegamenti per unire le schermate, formando un diagramma di come tutto si incastra. Fluid UI ha una caratteristica unica che permette all’utente di interagire con il design dell’UI attraverso diversi dispositivi come cellulari, tablet e desktop.
- Prezzi: $8.25 (solo) / $19.08 (pro) / $41.58 (team) al mese
- Sito web: www.fluidui.com
- Pidoco: è un software di mockup ospitato nel cloud che viene fornito con modelli personalizzati, elementi interattivi e sketch facili per un wireframing veloce ed efficiente. In termini di collaborazione, gli utenti possono condividere e modificare le schermate insieme ad altri utenti e raccogliere commenti in tempo reale. È anche possibile creare blocchi di costruzione personalizzati e riutilizzarli. E’ possibile integrare Pidoco con vari altri software come Jira, Planio e altri tramite le loro API.
- Prezzi: Gratuito con funzioni limitate/ $9.99 (Basic)/ $59 (Pro)/ $199 (illimitato) al mese
- Sito web: www.pidoco.com
- Protoshare: è uno strumento di wireframing e mockup basato sul web che puoi usare per creare wireframes interattivi per applicazioni mobili (così come siti web). Include una libreria di elementi drag-and-drop, una mappa del sito e la possibilità di utilizzare CSS personalizzati e inserire i propri elementi. Semplifica il tuo lavoro creando master e modelli da zero e riutilizzandoli su più pagine o progetti.
- Prezzi: $29 (standard) / $49 (professionale) / $59 (business) per persona al mese
- Sito web: www.protoshare.com
- Figma: è il primo strumento di progettazione all-in-one basato sul browser. I designer possono rimanere organizzati utilizzando il pannello dei livelli, che mantiene tutte le artboard e gli elementi UI memorizzati in un unico luogo. Oltre ad essere un ottimo strumento per i designer indipendenti, Figma offre una collaborazione in tempo reale per il tuo team. Figma permette vantaggiosamente a diversi utenti di lavorare su un progetto allo stesso tempo, e tutte le modifiche vengono salvate in un progetto. I compagni di squadra comunicano commentando gli elementi.
- Prezzi: Gratuito (starter)/ $12 (professionale)/ $45 (organizzazione)
- Sito web: www.figma.com
6. Il Prototipo
I wireframes sono una rappresentazione a bassa fedeltà del tuo progetto di app; sono essenziali, abbozzati, mancano di grafica e sono superficiali. Il mockup, rispetto ai wireframes costituiscono un notevole passo in avanti: contengono la grafica, visualizzano le artboards (schermate dell’app) con maggiore precisione, e possono perfino contenere interazioni banali, come pulsanti e link. Per questo il mockup costituisce una rappresentazione di media fedeltà del progetto dell’app.
Il prototipo è il passo successivo, ovvero una rappresentazione di alta fedeltà. Infatti, a differenza del mockup, il prototipo è arricchito con elementi di UX, animazioni, interazioni e qualsiasi altra cosa si desideri che gli utenti sperimentino quando interagiscono con l’app. Un prototipo, quindi, è la simulazione dell’interazione finale tra l’utente e l’interfaccia ed è, pertanto, una versione cliccabile che permette all’utente di sperimentare l’app.
I prototipi forniscono la soluzione perfetta per trasferire le idee e la visione in un prodotto che può essere visto e, soprattutto, sperimentato. Forniscono agli utenti alcuni elementi interattivi e le prime intuizioni sull’applicazione, compreso il suo obiettivo generale e la sua “vision”. Per questo, molto spesso, i prototipi sono per lo più utilizzati per interloquire con potenziali investitori, primi clienti, soci e/o co-fondatori, oppure per capire meglio il pubblico, testare le ipotesi e raccogliere feedback dagli utenti di test, che sono vitali per il successo finale del progetto.
La differenza tra un prototipo e il prodotto finale è che le funzionalità non sono ancora implementate dal team di ingegneri. Tecnicamente il frontend e il backend non sono legati insieme e il vantaggio di ciò è il costo ridotto dello sviluppo.
7. Il Prodotto Minimo di Valore (MVP)
Il prodotto minimo di valore (o MVP Minimum Viable Product) è una versione effettiva dell’app, che segue la fase di prototipazione, nella quale l’app -MVP viene sviluppata con caratteristiche sufficienti a soddisfare i primi utilizzatori. Si tratta della prima versione dell’app adatta al rilascio ai clienti.
L’MVP viene costruito con un set di caratteristiche che permettono al prodotto di essere funzionale e distribuito in produzione al fine di accelerare il time to market; il suo scopo è quello di massimizzare l’apprendimento conseguente ai primi feedback dei clienti con il minimo sforzo di implementazione e può essere usato per iniziare a raccogliere un sostanziale seed round per continuarne poi lo sviluppo.
Il processo di progettazione e implementazione del prodotto può richiedere una strategia a lungo termine, ma stabilirà una buona base per lo sviluppo futuro.
Un MVP è diverso da un prototipo in quanto consiste in una soluzione completamente funzionale che viene distribuita (o che si può distribuire) per l’uso. Mentre includerà solo le caratteristiche più importanti che sono essenziali per risolvere i punti critici primari che sono stati identificati, il MVP funziona dal lato dell’utente proprio come il prodotto finale.
Il MVP offre la possibilità di testare il prodotto oltre la propria ristretta cerchia di riferimento per il test, rivolgendosi ad un gruppo più ampio e, di conseguenza, più rappresentativo del mercato e del pubblico. In tal modo sarà possibile ricevere una quantità maggiore di feedback che consentiranno di comprendere se l’app è perfettamente funzionale o se ci sono inefficienze o implementazioni da apportare.
8. Conclusione
Da tutte le informazioni che avete raccolto in ciascuno dei passi precedenti, create una tabella di marcia che descriva ciò che avete imparato e delineate il vostro percorso passo dopo passo per progettare l’app.
Pensate a questa tabella di marcia come ad una serie di progetti per la costruzione di un edificio. Con questa roadmap come guida, il processo di sviluppo del prodotto sarà chiaro e avrete sempre un’immagine nitisa e definita dell’obiettivo finale.
Una volta ultimato il prototipo, passerete alla fase di sviluppo e con il processo di verifica e validazione del MVP potrete identificare i problemi dell’utente, la fattibilità del prodotto, l’usabilità e la domanda del mercato per l’app.
