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
