Illustrazione di Matt Rae
Quando si inizia un progetto di progettazione di app per dispositivi mobili, è consigliabile partire con la creazione di un wireframe dell'esperienza, o di segmenti dell'esperienza, prima di procedere alla realizzazione di modelli più fedeli. Il processo di creazione di wireframe può aiutare a identificare potenziali lacune nel flusso dell'utente o a evidenziare eventuali punti di attrito prima di dedicarsi agli aspetti più dettagliati dell'interfaccia.
In questo tutorial, puoi seguire la creazione di wireframe per il flusso di registrazione a un'app per dispositivi mobili. Utilizzando forme di base e una tavolozza di colori in scala di grigi, disporrai più schermate in un flusso. Questo ti consentirà di convalidare e testare l'esperienza prima di includere dettagli quali colore, grafica e composizione tipografica finale.
Creazione di elementi di base
Un wireframe è composto da una serie di elementi semplici, in genere con colori in scala di grigi o tenui, che rimandano a forme di base come rettangoli ed ellissi. Poiché molti di questi oggetti vengono utilizzati ripetutamente, è possibile creare una libreria di base di elementi riutilizzabili.
A questo scopo, parti disegnando un rettangolo e poi applicagli lo stile che desideri in modo che rappresenti un determinato elemento, ad esempio un pulsante. A seconda del grado di fedeltà della progettazione, può essere utile aggiungere un segnaposto di testo a un pulsante. Poiché i pulsanti in un flusso di registrazione vengono utilizzati per passare alla fase successiva del processo, aggiungi una casella di testo e inseriscila in posizione centrale all'interno del pulsante utilizzando gli strumenti di allineamento.
Quindi, combina gli elementi in un gruppo e trasformali in un componente utilizzando le opzioni del menu visualizzato facendo clic con il pulsante destro. Una volta completato, l'elemento può essere trascinato fuori e utilizzato più volte. Quindi non sarà più necessario ricominciare da capo ogni volta che hai bisogno di un elemento pulsante.
Ripeti questo processo con altri elementi comuni quali barre di navigazione, segnaposto di immagine e blocchi generali. Prenditi tutto il tempo necessario per configurare gli elementi comuni. Ciò ti aiuterà a risparmiare tempo durante l'intero processo. Inoltre, al momento giusto, potrai utilizzare questi elementi per convertire la progettazione a una maggiore fedeltà.
In alternativa, puoi creare questi elementi utilizzando plug-in e kit per interfacce. I plug-in come Quick Mockup forniscono una raccolta di elementi wireframe che possono essere rapidamente convertiti in componenti o utilizzati così come sono.
Passaggi importanti nel flusso di registrazione
Per questo flusso di registrazione, il primo passo consiste nel creare tavole da disegno per ognuna delle diverse schermate o fasi del processo. Un flusso di registrazione tipico include, a titolo esemplificativo:
Home page: spesso questa pagina include un messaggio di benvenuto o il logo dell'app, oltre a opzioni per l'accesso o la registrazione al servizio.
Pagina di registrazione: può trattarsi di una singola pagina o di una serie di pagine utilizzate per raccogliere informazioni quali indirizzo e-mail, nome e altri dati necessari per la creazione dell'account.
Pagine di esito positivo e di errore: sono pagine critiche per fornire un feedback sullo stato della creazione dell'account, cioè se ha avuto esito positivo o negativo, e su come risolvere l'errore.
Questo tutorial si concentrerà sul flusso di registrazione, che consente ai nuovi clienti di registrare un account. Lo stesso processo illustrato qui può essere applicato alla creazione di una pagina di accesso per gli utenti con account esistenti. In questo caso tuttavia, invece di inserire le informazioni per creare l'account, è sufficiente inserire il nome utente e la password per completare la procedura di accesso.
Layout della home page
La home page, o schermata iniziale, richiede l'inclusione di alcuni elementi chiave. Tieni presente che la progettazione deve riflettere requisiti o obiettivi diversi in base al caso di utilizzo specifico. In genere, tutte le home page includono i seguenti elementi:
• Logo dell'app
• Messaggio di benvenuto
• Opzioni di registrazione o collegamento alla pagina di registrazione
• Opzioni di accesso o collegamento alla pagina di accesso
In questa pagina, le opzioni di accesso o di registrazione vengono generalmente messe in evidenza. In questo caso, per agevolare l'acquisizione di nuove registrazioni utente, nel flusso di lavoro verranno evidenziate le opzioni di registrazione, mantenendo le opzioni di accesso ma spostandole in basso nella pagina.
Inizia trascinando un componente blocco generale creato in precedenza ed estendendolo nella parte superiore dello schermo, poi prosegui creando un segnaposto per l'orologio, il segnale e altri dettagli a livello di sistema operativo. Quindi utilizza un rettangolo di base o un segnaposto di immagine per disegnare un segnaposto per un logo, posizionandolo al centro della schermata.
A questo punto, aggiungi un segnaposto per un messaggio di benvenuto. Il testo può essere scritto con l'apposito strumento o essere semplicemente rappresentato con semplici rettangoli arrotondati. Nelle fasi iniziali della progettazione potrebbe essere più semplice sostituire il testo con delle forme invece che preoccuparsi di scrivere qualcosa.
Nella parte inferiore della pagina saranno incluse le opzioni per la registrazione (la creazione di un account) o per l'accesso (se l'utente dispone già di un account). Se la progettazione richiede opzioni per i servizi di autenticazione di terze parti, ad esempio Registrati con Google o Accedi con Facebook, il progetto includerà più pulsanti per la registrazione, che comprendono queste opzioni specifiche.
Per questo tutorial creeremo un solo pulsante Crea un account per consentire all'utente di passare alla schermata successiva, in cui procederà all'inserimento dei dati necessari per creare un account.
Posiziona l'elemento pulsante nel terzo inferiore della pagina, centrandolo orizzontalmente sotto il messaggio di benvenuto. Sotto questo elemento, traccia una linea orizzontale della larghezza del pulsante e sotto aggiungi un altro pulsante con la dicitura Accedi. Questo pulsante è un'opzione secondaria, quindi lo stile può essere modificato per indicare questo aspetto.
Creazione del modulo di registrazione
Ora che abbiamo completato la pagina principale, puoi procedere alla creazione della vista successiva nel flusso. Gli utenti accedono a questa pagina dopo aver fatto clic sul pulsante Crea un account creato nella schermata precedente. In questa pagina gli utenti immetteranno varie informazioni, quali nome, indirizzo e-mail e password, per creare un account.
In questa vista verranno aggiunti alcuni elementi di testo per indicare di quali campi si tratta, un po' come le etichette per i pulsanti della schermata precedente. Puoi scegliere di aggiungere del testo per il titolo della pagina oppure semplicemente duplicare il segnaposto di testo e posizionarlo nella parte superiore della pagina.
Sotto il titolo saranno quindi presenti vari elementi modulo. Per semplificare, puoi utilizzare l'elemento blocco di base oppure crearne uno specifico per i campi di input, includendo un bordo. Posiziona un elemento centralmente nella pagina, quindi aggiungi in alto a sinistra un'etichetta con la dicitura Nome utilizzando lo strumento testo. Questo elemento fungerà da etichetta per il campo di input: assicurati che il testo sia sufficientemente piccolo da non sembrare un titolo.
Quindi, copia e incolla nuovamente gli elementi del campo di input per creare campi aggiuntivi per l'e-mail, la password ed eventuali altri dati da raccogliere al momento della registrazione. Il raggruppamento degli elementi semplificherà notevolmente questo processo. Nella parte inferiore aggiungi un elemento pulsante che verrà utilizzato per inviare il modulo e completare l'inserimento dei dati.
Quando si realizzano flussi di registrazione, occorre tenere presente che moduli lunghi e con molte domande possono dissuadere gli utenti dall'effettuare la registrazione e questo può ridurre il tasso di conversione. Assicurati quindi che il modulo sia chiaro e conciso. In alternativa, puoi suddividere i singoli moduli in viste separate, in modo che l'attenzione dell'utente si concentri su un singolo passaggio in ciascuna schermata. In questo caso, la vista è un singolo campo di input, con un pulsante Continua o Avanti. Prova a creare un flusso utilizzando ciascun metodo e testali tutti per capire quale è più adatto ai tuoi destinatari.
Connessione con i collegamenti prototipo
Uno dei numerosi vantaggi offerti dalla creazione di wireframe in Adobe XD è che è possibile creare prototipi in tempo reale per i flussi che realizzi, senza bisogno di esportare i progetti in un'altra applicazione.
Per impostare un collegamento prototipo, passa alla modalità Prototipo utilizzando le schede nella parte superiore dello schermo. In modalità Prototipo, basterà fare clic su una tavola da disegno o su un elemento per far comparire una freccia blu che può essere trascinata nella destinazione desiderata.
Prova a farlo con le schermate create finora. Utilizza un trigger Tocca e prova le diverse azioni. Per la fase di creazione di wireframe, puoi semplificare usando Dissolvi o un semplice Scorri. L'utilizzo di animazioni più complesse può provocare distrazioni e impedirti di raggiungere il tuo obiettivo in questa fase della progettazione.
Completamento del flusso
Ora che il flusso di registrazione è quasi terminato, devi aggiungere un'altra serie di schermate per fornire all'utente un feedback sull'esito della registrazione. I messaggi di errore e di esito positivo sono critici per offrire un'esperienza ottimale e non devono mancare nei wireframe.
Il messaggio di esito positivo può essere inserito in una pagina indipendente che si apre quando si fa clic sul pulsante Invia. Verrà visualizzata una schermata di elaborazione, seguita dal messaggio di esito positivo. Il messaggio di errore funziona in modo simile, tuttavia, dove possibile, è molto utile mostrare l'errore nel contesto. Ciò significa che se si verifica un problema con l'e-mail o la password, bisogna evidenziare quel campo di input e fornire un feedback su ciò che è possibile correggere.
Creazione della schermata di esito positivo
La schermata di esito positivo può essere creata semplicemente copiando la prima schermata e rimuovendo il pulsante di registrazione e la linea orizzontale. A questo punto, sostituiremo il segnaposto quadrato con un segno di spunta per indicare l'esito positivo. Se lo desideri, puoi anche sostituire i segnaposto di testo con un messaggio reale, ad esempio "Registrazione completata".
Creazione della schermata di errore
Per creare la schermata di errore, duplica la pagina del modulo. Poiché gli errori devono essere visualizzati nel contesto, questa pagina può essere modificata in modo da mostrare l'errore. In questo esempio l'errore è riconducibile al campo dell'e-mail. Seleziona il blocco e assegna lo stile al campo di input in modo da includere un bordo grigio scuro (che probabilmente sarà rosso nella progettazione finale). Utilizzando lo strumento testo, aggiungi sotto il campo di input una casella di testo "Errore: formato e-mail non valido" o un messaggio appropriato che rifletta l'errore che si è verificato.
È possibile modificare altri elementi della pagina, come il pulsante Invio, in modo da riflettere l'errore o impedire ulteriori progressi fino alla risoluzione dell'errore.
Puoi scegliere di collegare le schermate di errore o di esito positivo al prototipo una alla volta oppure di duplicare le altre schermate del flusso e creare due flussi separati, uno per l'errore e uno per l'esito positivo. In questo modo potrai testare entrambi i flussi di lavoro con gli utenti e ripeterli.
In alternativa, puoi utilizzare rettangoli trasparenti, ciascuno dei quali indirizza alla schermata di errore o a quella di esito positivo, come punti di destinazione sopra il pulsante Invio per aggiungere un po' di suspense durante il test.
È chiaro che si tratta di un wireframe a bassissima fedeltà, ma l'obiettivo di questa esercitazione è chiarire come i vari schermi e le varie viste si collegano tra loro per creare un percorso utente. Partendo con il raggruppamento degli elementi di base in componenti da riutilizzare, la transizione verso una maggiore fedeltà risulterà più semplice. Lo stile dei componenti può essere ridefinito per ogni fase del progetto e i componenti possono essere applicati nella progettazione, in modo che la ripetizione nel progetto sia più efficiente.
Condivisione del wireframe per ricevere feedback
Infine, utilizzando la modalità Condividi in Adobe XD, puoi condividere il flusso appena creato affinché venga testato da utenti remoti o, più in generale, per ricevere feedback sulla progettazione. Dopo aver selezionato il flusso, scegli Design Review o User Testing dal menu a discesa del tipo di collegamento. Il collegamento può quindi essere distribuito e, al termine delle ripetizioni, può essere aggiornato facilmente con un clic.
Complimenti, hai appena creato un wireframe di un flusso di registrazione in Adobe XD. Ora, applica le nozioni apprese alla parte del flusso di accesso di questa progettazione di app.
