Cosa sono i wireframe?

Quando si tratta di wireframing, prima si comincia, meglio è. (Ovviamente, entro limiti ragionevoli.) Progetti diversi richiedono flussi di lavoro diversi. Tuttavia, come regola generale, si dovrebbe creare il primo wireframe sia nella fase di avvio che in quella di pianificazione del ciclo di vita del progetto.

Se inizi a realizzare i wireframe durante la fase di avvio, dovresti cominciare con wireframe a bassa fedeltà. La fase di avvio è un momento di sperimentazione: hai avuto un'idea per un sito web o un'app, ma non sai esattamente che aspetto avrà. I wireframe a bassa fedeltà sono facili e veloci da creare, il che li rende lo strumento perfetto per il brainstorming. Butta giù le tue idee, inviale ad altre parti interessate per ricevere feedback e poi torna alla tavola da disegno.

Man mano che il tuo progetto entra nella fase di pianificazione, dovresti iniziare a generare wireframe a media e alta fedeltà. La fase di pianificazione coincide con il momento in cui i progetti diventano concreti e si avrà bisogno di wireframe solidi prima di poter passare alla fase successiva: l'esecuzione.

I tuoi wireframe devono svilupparsi in complessità e perfezionarsi man mano che il progetto avanza attraverso queste prime due fasi. Nel momento in cui consegnerai i progetti al team di sviluppo per la programmazione (la fase di esecuzione), dovresti aver completato il processo di wireframing.

Elementi di un wireframe

I wireframe hanno un aspetto semplice in superficie: a livello estetico non c'è molto da fare. In parte, questo è il motivo per cui sono così efficaci. Quando si sviluppano siti web e app, si ha la tentazione di precipitarsi nel mondo dei caratteri e dei colori prima di aver pianificato adeguatamente l'esperienza dell'utente. Nella fase in cui si realizzano i wireframe, si mettono da parte queste distrazioni e ci si concentra, invece, su tre aspetti fondamentali del prodotto: la progettazione delle informazioni, della navigazione e dell'interfaccia.

Progettazione delle informazioni

Quando gli utenti interagiscono con la tua app o il tuo sito web, acquisiscono costantemente informazioni: che tipo di sito web stanno visitando? Come possono interagire con esso? Qual è lo "scopo" del sito? Il processo è automatico e in gran parte subliminale. In qualità di progettista, faciliti questa interazione: sei tu a scegliere come presentare le informazioni su una pagina.

Quindi, come si presenta in pratica?

Se il tuo sito web fornisce, ad esempio, un servizio di messaggistica, la maggior parte degli utenti che lo visitano rientrerà in una di queste due categorie: utenti già registrati e nuovi visitatori. Gli utenti già registrati vorranno, quasi sicuramente, eseguire l'accesso, mentre i nuovi visitatori potrebbero voler creare un account o semplicemente saperne di più sul tuo servizio. Nella tua homepage devi tenere conto di ogni tipo di visitatore e informarlo in maniera appropriata affinché possa raggiungere i suoi rispettivi obiettivi. Forse queste informazioni vengono comunicate tramite pulsanti: "accedi", "registrati" o "ulteriori informazioni". La progettazione delle informazioni consiste nel decidere quali informazioni includere e dove posizionarle.

Progettazione della navigazione

Ognuno di noi ha trascorso decisamente troppo tempo a cercare il menu "Impostazioni" in un'applicazione o in un'altra. E tutti abbiamo avuto l'impressione che un sito web ci stesse portando in un circolo vizioso: nel momento in cui si ha l'impressione che la pagina "Informazioni sull'account" sia a portata di clic, si finisce di nuovo sulla homepage o, peggio, su una pagina di errore 404. Il punto è che, in quanto utenti, riscontriamo sempre un'esperienza di navigazione scadente.

Come suggerisce il nome, la progettazione della navigazione determina le modalità di spostamento degli utenti all'interno dell'app o del sito Web. Da una qualsiasi schermata, l'utente può navigare verso una serie di altre schermate. Tuttavia, gli utenti non lo sapranno a meno che tu non glielo dica: menu a discesa, collegamenti cliccabili e barre di scorrimento sono tutti esempi di elementi visivi che aiutano l'utente a navigare nel prodotto.

Progettazione dell'interfaccia

La progettazione dell'interfaccia raggruppa tutti gli elementi: informazioni, navigazione e tutto il resto nel tuo wireframe. Sia la progettazione della navigazione che la progettazione delle informazioni hanno componenti sullo schermo: pulsanti, menu, ecc. La progettazione dell'interfaccia si riferisce al modo in cui tali elementi vengono incorporati nell'interfaccia utente nel suo complesso, che include altri elementi, quali caselle di testo, immagini di intestazione e barre laterali.

Come creare un wireframe

Dopo aver compreso la teoria del wireframing fornita in questa guida, è il momento di mettere in pratica tale conoscenza. Ecco alcuni passaggi per iniziare il wireframing:

1. Definisci un piano

Che tu stia creando wireframe per un'app o un sito web, una cosa è certa: dovrai creare più di un wireframe. Il wireframing si basa tutto sul flusso dell'utente. Come si muove l'utente all'interno della tua app? Vuoi condurlo in qualche sezione particolare?

Prima di iniziare a realizzare i diagrammi, traccia i possibili percorsi che un utente può intraprendere, elencando ogni nuova schermata che potrebbe incontrare. Per ogni schermata aggiuntiva, avrai bisogno di un ulteriore wireframe.

Questo lavoro preliminare può sembrare eccessivo, ma è un compito che vale la pena di svolgere. Se si passa direttamente al processo di wireframing senza una chiara idea del flusso dell'utente, si otterranno diagrammi confusi e disordinati.

2. Inizia ad aggiungere forme di base

Dopo una o due sessioni di pianificazione approfondite, dovresti essere pronto per la stesura. Inizia selezionando una "cornice" per il diagramma. Se stai creando un wireframe per un'app, seleziona una forma simile allo schermo di un dispositivo mobile. Per un wireframe di un sito web, scegli una forma che assomigli a una finestra del browser. La maggior parte delle piattaforme di wireframing digitale avrà entrambe le cornici di base disponibili nella loro libreria di forme.

Successivamente, aggiungi gli elementi più grandi del wireframe. Dovrebbero essere forme e contenitori di base, che rappresentano elementi come una barra di intestazione, una colonna laterale, una casella di testo, ecc. Non è necessario includere testo o immagini a questo punto, basta stabilire il layout generale.

Ripeti questo procedimento per ogni wireframe che devi creare.

3. Aggiungi pulsanti e collega i wireframe

Una volta stabilito il layout dei tuoi wireframe, è il momento di aggiungere alcune funzionalità. Su una qualsiasi schermata del prodotto, ci sono probabilmente diversi pulsanti che indirizzano l'utente verso una nuova schermata. Potresti averli aggiunti come forme nell'ultimo passaggio, ma, in caso contrario, seleziona una forma di base per rappresentare ciascun pulsante e aggiungili ora. È inoltre possibile aggiungere qualsiasi testo che verrà visualizzato sul pulsante (ad esempio "home").

Se la tua piattaforma di wireframing include funzionalità di collegamento, collega ciascun pulsante al wireframe verso cui dovrebbe indirizzare l'utente.

Suggerimento: seleziona un tipo carattere da utilizzare per il wireframe. Usa il grassetto e il corsivo dove è necessario, ma risparmia qualsiasi altro stile di testo per i mockup e i prototipi.

4. Raccogli feedback e modifica

Hai investito ore nei tuoi wireframe. Il layout sembra perfetto e li hai collegati insieme per simulare il flusso dell'utente. Ora è il momento di condividerli con altre parti interessate. Probabilmente ci sono aspetti dei tuoi wireframe che possono essere migliorati: per questo è importante presentarli a occhi nuovi prima di aggiungere ulteriori dettagli.

Forse la posizione di un pulsante sembra leggermente fuori campo. Oppure la barra dei menu è troppo grande e occupa una parte eccessiva della pagina. Qualunque sia il feedback dei tuoi colleghi, prendili in considerazione e valuta le loro idee: questo è un processo collaborativo.

Applica le modifiche suggerite che miglioreranno i tuoi wireframe. Ripeti il ciclo fino a quando i tuoi progetti non sono stati approvati da tutti i soggetti interessati.

5. Aggiungi dettagli

A questo punto, i tuoi diagrammi sono probabilmente wireframe a media fedeltà. Una volta che il design di base è stato approvato, puoi iniziare a perfezionare i dettagli. Aggiungi immagini e testi. Usa i colori per differenziare i vari elementi sulla pagina, ma attieniti alla scala di grigi. Assicurati che tutto sia della dimensione corretta, fino all'ultimo pixel.

6. Condividi i tuoi wireframe

Ora dovresti avere una serie di wireframe funzionali ad alta fedeltà. Condividili con le parti interessate del progetto e i team pertinenti.