Guida completa alla creazione di wireframe di app mobili

Tempo stimato: 1-2 ore. Raccomando di fare questo esercizio con i principali stakeholder.

Partiamo dalla premessa che sei stato incaricato di creare un’applicazione mobile. La prima cosa che dovreste chiedere è: “Quale problema sto risolvendo e per chi lo sto risolvendo?”. Le risposte a questa domanda composta porranno le basi per il vostro design perché forniranno intuizioni che potrebbero guidare le caratteristiche e le funzioni dei vostri progetti. Queste risposte vi aiuteranno anche a decidere quale sarà il MVP (minimum viable product) per il vostro progetto.

Per esempio, potreste avere molte caratteristiche sulla roadmap del prodotto, ma avete bisogno di concentrarvi solo sulle caratteristiche essenziali per lanciare con successo la prima versione dell’app. Puoi iniziare chiedendoti “Quali caratteristiche e funzioni dobbiamo creare in modo che il nostro target demografico possa completare il suo obiettivo/compito?”

Per rispondere a questa domanda, puoi creare un flusso utente basato sul “percorso felice” del tuo utente primario (puoi concentrarti su tutti gli edge case più tardi). Raccomando una lavagna bianca dove prima si scrivono tutti i passi chiave dell’utente. Una volta che avete scritto questi passi chiave, potete iniziare a creare degli schizzi di alto livello di questi passi. Questo vi aiuta a determinare di quali affordance ha bisogno l’utente ad ogni passo e tiene a bada lo scope creep.

Nota: Provate a fermarvi dallo schizzare senza prima scrivere il flusso dell’utente. La nostra mente può diventare molto creativa e fuori strada se ci buttiamo subito nello sketch.

Ecco come può apparire questo esercizio dopo che avete scritto il vostro flusso utente e creato degli schizzi grezzi sotto di esso. Ricordate, non deve essere bello, ma dovrebbe trasmettere le vostre idee abbastanza da permettervi di passare al passo successivo, i wireframe digitali.

Esempio 1

Esempio 2

Esempio 3

Step two: Wireframes digitali a bassa fedeltà

Tempo stimato: 2-3 giorni, a seconda della portata del MVP.

Una volta che avete capito i vostri wireflows del MVP, il passo successivo è quello di creare wireframes leggermente più dettagliati. Potresti creare un prototipo cartaceo o passare direttamente ai wireframe digitali (se la velocità è essenziale, di solito passo ai wireframe digitali).

Nota: Se stai lavorando con un marchio affermato, potrebbe essere possibile utilizzare i componenti di un sistema di design esistente e potresti passare direttamente all’alta fedeltà, fase 3, di seguito.

Si consiglia di creare artboards per le schermate chiave che hai scoperto nel tuo esercizio di sketching. Il numero di schermate di cui hai bisogno aumenterà man mano che ti sposti attraverso il processo di wireframing dello sketching, dei wireframe a bassa fedeltà e dei wireframe ad alta fedeltà.

Per i wireframe digitali a bassa fedeltà, usa lo strumento di design di tua scelta per creare forme semplici e usa font di base per creare i tuoi wireframe. Ci sono anche molti kit UI là fuori che possono accelerare questo processo e creare design a bassa fedeltà che sono un po’ più attraenti visivamente. Raccomando anche di usare una dimensione mediana dell’artboard che possa funzionare attraverso la maggior parte delle dimensioni dello schermo del telefono. Se hai i dati del tuo target demografico e quale dimensione del telefono è prevalentemente usata da loro, allora vai con quella dimensione dello schermo.

Io uso una dimensione di 875 x 667px di artboard quando uso Adobe XD (o qualsiasi strumento di progettazione, dato che la maggior parte ha dimensioni preimpostate incorporate) perché è la “via di mezzo” delle dimensioni dello schermo (specialmente per iPhone). Trovo che questa dimensione funzioni bene per iPhone 8 e iPhone X, e trovo che questo funzioni bene anche per Android.

Ecco un esempio di schermi a bassa fedeltà in azione:

Una volta che hai creato le tue schermate a bassa fedeltà, testato i tuoi progetti con gli utenti, e ricevuto l’approvazione dalle parti interessate, sei ora pronto a creare le schermate ad alta fedeltà.

Tre passi: wireframe digitali ad alta fedeltà

Tempo stimato: 1+ settimane. Questo dipenderà dal fatto che abbiate un sistema di design in atto o se lo state creando da zero man mano. Questo passo richiede anche più tempo perché ci saranno probabilmente più schermate aggiunte rispetto alla fase di bassa fedeltà.

Questo passo è dove i vostri disegni prendono vita! È anche la fase in cui i tuoi disegni cominciano veramente ad assomigliare a un’applicazione mobile funzionante che puoi prototipare, testare, iterare, ottenere l’approvazione e poi, in definitiva, passare al team di sviluppo.

Considerazioni:

• Se il prodotto su cui stai lavorando ha già un marchio stabilito, molto probabilmente prenderai colori, icone e font dalle linee guida del marchio.
• Se il prodotto su cui state lavorando non ha un look and feel del marchio completamente stabilito, potete trovare e usare un kit UI per accelerare il vostro processo di design.

La prossima considerazione è con quali schermate iniziate? Puoi iniziare con:

• Schermate chiave per ogni sezione della tua navigazione principale, o;
• Flussi utente chiave per l’utente, o;
• Prioritizzare le schermate che disegni in base all’ordine del programma di sviluppo (questo è tipicamente dove inizio io, così posso lavorare in un metodo agile, assicurandomi di avere schermate pronte per il passaggio di consegne quando il team di sviluppo ne ha bisogno).

In questo esempio, mostrerò il processo di utilizzo di un kit UI stabilito in Adobe XD. E inizierò con il login/iscrizione dell’utente e la creazione del profilo, perché i team di sviluppo con cui ho lavorato di solito iniziano con la gestione degli utenti nel loro processo di sviluppo dell’app.

Il kit UI che ho scelto ha già una palette di colori stabilita, stili di carattere ed elementi UI comuni (aka componenti) che possono essere copiati e incollati in tutti i wireframe.

Nota: All’inizio, consiglio di trasformare qualsiasi elemento che si prevede di riutilizzare in componenti (o simboli). In questo modo, se avete bisogno di cambiare la freccia indietro da una freccia ” ← ” a una carota “<“, potete cambiarla tramite il componente master e farla aggiornare in tutti i wireframes invece di dover copiare e incollare la modifica su ogni schermata che deve essere aggiornata.

Esempio di colori, stili di carattere e componenti:

Per iniziare il processo, inizierei a costruire le schermate di accesso, iscrizione e profilo utente:

Poi, inizierei a costruire elementi di navigazione globale:

Dopo questo, inizierei a creare fili ad alta fedeltà per tutti i flussi di utenti per l’app, iniziando con flussi prioritari basati sulla consegna allo sviluppo (o per qualsiasi elemento che ha ancora bisogno di test sugli utenti).

Consiglio di creare file di design separati per ciascuno dei flussi utente chiave in modo da poter facilmente prototipare e condividere con lo sviluppo quando si lavora in un metodo agile (cioè un file per l’iscrizione dell’utente e la creazione dell’account, un file per la messaggistica, un file per l’esperienza di ricerca, etc.).

Quando i design vengono approvati e consegnati allo sviluppo, consiglio di creare un file master con tutte le schermate e i componenti master. Quando si lavora in team, tipicamente raccomando che una persona sia responsabile del file principale in modo da ridurre la confusione. In questo modo ogni membro del team sa che sta attingendo dal file master approvato quando lavora alla creazione di nuove funzionalità e flussi per l’applicazione.

Per esempio, ecco una vista a volo d’uccello di un file master per uno dei miei progetti. Notate che ho raggruppato e ordinato le schermate per flusso utente e priorità di sviluppo. Continuerò ad aggiungere a questo master file man mano che costruisco la prossima sequenza di flussi utente.

Alcuni principi guida per creare app mobili migliori

Ora che sai come iniziare a fare il wireframe delle tue esperienze digitali, è il momento di migliorare il tuo approccio al design. Se state creando un’esperienza per dispositivi mobili, su sistemi operativi come iOS e Android, ci sono alcune considerazioni chiave da tenere a mente. Ecco alcuni consigli generali (e qualche opinione personale) sulla progettazione di app mobili e su come spendere meno tempo a progettare per ogni tipo di dispositivo sul mercato. Se stai cercando ulteriore ispirazione, puoi anche controllare questi esempi di wireframe per siti web e applicazioni mobili.

Ho una forte convinzione che un design dovrebbe essere il più onnipresente possibile. Quindi, quando possibile, incoraggio un design agnostico del sistema operativo. Ecco perché:

• Se un utente passa da un telefono Android a un iPhone, non dovrebbe imparare due modi diversi di usare un’applicazione che sta risolvendo lo stesso bisogno. La soluzione dovrebbe essere ancora la stessa. Ora, so che ci possono essere differenze di gesti e affordance specifiche del dispositivo, ma credo che un’app dovrebbe offrire la stessa UI e lo stesso flusso di utenti indipendentemente dal suo sistema operativo. E le funzioni importanti non dovrebbero essere nascoste troppo in profondità nei menu contestuali; questa è solo una cattiva UX.
• È costoso progettare, sviluppare e mantenere due (o più) esperienze completamente diverse (specialmente quando l’esperienza potrebbe essere la stessa indipendentemente dalla piattaforma).
• Nel progettare e mantenere le diverse esperienze, le esperienze possono iniziare a diventare molto diverse. Questo può danneggiare il marchio e rendere più difficile il monitoraggio e l’implementazione di feedback e funzionalità.

Come si fa quindi a creare design ubiqui e ad essere agnostici ai dispositivi? Ecco come faccio io:

1. Trattare i miei design per dispositivi mobili come se stessi progettando per il web mobile. I miei design sono reattivi perché ci sono infinite dimensioni di schermo e densità di pixel (queste cambiano tanto velocemente quanto le aziende possono ingegnerizzarle). Come designer, non abbiamo il tempo di progettare per ogni densità di pixel e non credo che i miei clienti vogliano pagare per quel tempo, comunque. Quindi, uso una larghezza dell’artboard di 375, che funziona per la maggior parte dei modelli moderni di iPhone e Android.
2. Mi occupo della strana forma dello schermo dell’iPhone X e dell’iPhone 11 dicendo al team di sviluppo di estendere semplicemente il colore di sfondo dell’intestazione in alto.
3. Ho la fortuna di avere diversi tipi di telefono alla mia portata, così posso poi testare i miei progetti tramite l’app mobile XD usando una USB. Questo è utile perché posso testare le dimensioni dei caratteri, i punti di contatto dell’UI e la visibilità del contenuto dello schermo quando la tastiera è alzata. Posso anche testare la linea “fold” ed essere sicuro che i contenuti importanti, come le CTA e i contenuti importanti, rimangano visibili e non spariscano dal fondo dello schermo.
4. Cerco di usare solo gesti che siano universali, ad esempio toccare, scorrere, premere e tenere premuto. Penso che dovremmo essere in grado di concentrarci sulla migliore esperienza utente indipendentemente dal sistema operativo.
5. Utilizzo SVGs per tutte le icone e i loghi in modo che abbiano un ottimo aspetto su qualsiasi risoluzione dello schermo.
6. Utilizzo strutture di navigazione e menu che siano universali e non troppo specifiche del sistema operativo.

L’unica volta che devo progettare wireframes che sono specifici del dispositivo è quando sto prototipando e chiamando una funzione nativa del dispositivo, come la fotocamera. Anche questo può variare da telefono a telefono e da sistema operativo.

La maggior parte dei miei clienti inizia con iOS. Testiamo e convalidiamo il design e, una volta che è sulla strada giusta, sviluppiamo per Android. E sapete una cosa? Cerchiamo di non cambiare affatto l’UI o i flussi degli utenti. Invece, ci concentriamo sul branding, l’aspetto, le caratteristiche e le funzioni, e i flussi degli utenti. Tutto torna alla cosa più importante: l’esperienza utente di base.