Cos'è il wireframing?

Se hai mai provato a progettare un sito web o un'app senza un wireframe, saprai perché il processo di wireframing è importante. In che modo il tuo team può visualizzare ciò che sta cercando di realizzare senza il wireframe? Come si sequenziano i flussi utente o come si determina quale contenuto verrà visualizzato su determinati schermi?

"È frustrante quando le persone commentano i visual mentre ciò di cui hai realmente bisogno è un feedback di alto livello, come ad esempio "È questa la cosa più importante?"", dice Tom Lowry, Direttore della Advocacy in Figma. Un eccellente design di prodotto e sito inizia con il design dello smart wireframe, continua a leggere per eccellere in ogni fase del wireframing con i suggerimenti pro di Figma e gli strumenti per wireframing.

Cos'è un wireframe?

I wireframe sono progetti base che aiutano i team ad allinearsi sui requisiti, mantenendo le conversazioni sull'UX design mirate e costruttive. Pensa al tuo wireframe come allo scheletro della tua app, sito web o altro prodotto finale. Il wireframe mostra al team di design e agli stakeholder i tratti essenziali delle pagine web, dei componenti e delle funzionalità, inclusi:

• Layout delle schermate
• Barre di navigazione
• Componenti di UX e UI design
• Elementi interattivi

Nelle fasi iniziali del design, i wireframe a bassa fedeltà si basano su testo "lorem ipsum" e semplici riquadri come segnaposto per immagini e video. Questo aiuta il team di design, i copywriter e gli altri membri del team a concentrarsi sulla funzionalità di base per allinearsi sulla giusta direzione.

Partire con il design di un wireframe semplice ed essenziale dà anche agli UI/UX designer la possibilità di eseguire iterazioni. Possono raccogliere feedback iniziali dai test utente sugli elementi UX/UI fondamentali, senza distrarre gli utenti con dettagli di design visivo. I team di design provano diversi concetti, flussi utente e modelli mentre lavorano per la migliore esperienza utente.

3 tipi di design del wireframe

Le possibilità di UX design possono sembrare infinite, ma la maggior parte dei design di wireframe rientra in tre livelli base di fedeltà. Potresti imbatterti in tutti e tre i tipi di design di wireframe durante il percorso di lavorazione verso il tuo prodotto finale.

1. Wireframe a bassa fedeltà sono wireframe di base focalizzati su layout, navigazione e architettura delle informazioni. Mostrano come apparirà l'interfaccia, illustrando i flussi utente con elementi chiave dell'UI design. Bozzetti fisici su lavagna possono andare bene nelle prime fasi del wireframing, anche se non sono sempre facili da condividere, salvare o rielaborare. Con lo strumento di wireframing online di Figma, puoi creare, condividere e iterare rapidamente sui wireframe a bassa fedeltà.
2. I wireframe di media fedeltà aiutano i designer a iterare e a delineare il design finale. I team di design possono aggiungere annotazioni e contenuti mentre provano diversi approcci ai flussi utente e agli elementi di UI design, mappando la funzionalità principale e le interazioni chiave. Ciò consente ai team di stabilire il framework di design del wireframe finale prima di aggiungere i componenti di design visivo.
3. I wireframe ad alta fedeltà hanno l'aspetto di un primo mockup del prodotto, con elementi di design interattivi e visivi, ma senza la funzionalità dei prototipi a bassa fedeltà. A questo punto del processo di design, si potrebbe voler aggiungere elementi del brand come font, colori e loghi. In questo modo, è possibile catturare l'aspetto del prodotto finale per i test utente.

Quando saltare le fasi dei wireframe

Molti team di design ipotizzano di dover iniziare con un wireframe a bassa fedeltà e proseguire da lì. Ciò ha senso quando si esplorano nuovi concetti di prodotto, così è possibile allinearsi sui componenti chiave, iterare, quindi aggiungere dettagli di design visivo successivamente. Ma secondo Tom, c'è un caso in cui passare direttamente al design di wireframe ad alta fedeltà.

“Se disponi di un sistema di progettazione consolidato e il design che stai esplorando è simile ad altri già esistenti, probabilmente le conversazioni non saranno eccessivamente ostacolate dai dettagli del design visivo”, spiega Tom. “In questi casi, esplorare un'idea di design in modo più realistico può rivelarsi una soluzione altrettanto veloce ed efficace”.

7 best practice per il design del wireframe

Un wireframe efficace può essere semplicemente un bozzetto su un tovagliolo o un complesso mockup statico del prodotto. Applicando queste best practice al design del wireframe, puoi allinearti con il tuo team più rapidamente e proseguire con il miglior approccio.

1. Identifica i tuoi obiettivi di design.

Prima di iniziare ad abbozzare o sperimentare i modelli di wireframe, stabilisci i tuoi obiettivi di design. Considera le esigenze degli utenti e quali azioni vuoi che intraprendano per raggiungerle. Potrebbe trattarsi di aiutare un utente a risolvere un problema acquistando un prodotto utile o iscrivendosi a una newsletter didattica. Allinea il tuo team di design su questo obiettivo, in modo che i tuoi design di wireframe procedano in questa direzione.

2. Scegli la dimensione giusta per il tuo wireframe.

I tuoi wireframe dovrebbero corrispondere alla dimensione dello schermo che verrà utilizzato dal tuo pubblico di destinazione. Ovviamente, un sito web o un'applicazione avranno un aspetto diverso su un laptop rispetto a un dispositivo mobile. Tenendo questo a mente, ecco le dimensioni standard dei wireframe in base al tipo di schermo:

• Dispositivo mobile: 393 pixel di larghezza per 852 pixel di altezza
• Tablet da 11”: 834 pixel di larghezza per 1194 pixel di altezza
• Desktop: 1440 pixel di larghezza per 1024 pixel di altezza

3. Mantieni il design del tuo wireframe semplice.

Inizia il wireframe usando colori in scala di grigi, limitando i font e sostituendo le immagini con dei riquadri. Assicurati che il tuo progetto soddisfi i requisiti degli utenti a livello di base. Se ti concentri su dettagli come errori di ortografia o schemi di colore, potrebbe sfuggirti un errore nell'esperienza utente. Per le prime fasi di un design semplice sono sufficienti schede o anteprime troncate. Ma per interfacce ricche di contenuti, Tom consiglia di usare contenuti reali invece del testo segnaposto "lorem ipsum". "Quando inizi ad applicare l'architettura delle informazioni su un'interfaccia utente, non è molto utile scrivere 1-2-3-4 per elencare le voci di menu," spiega. "Quindi suggerisco di usare contenuti reali".

4. Mantieni coerenza nel design.

I wireframe non dovrebbero distrarre o confondere. I componenti simili dovrebbero avere lo stesso aspetto in tutti i wireframe, in modo che siano facili da comprendere, iterare e codificare. Se c'è una leggera differenza tra due componenti correlati, i design diversi possono creare incertezza per gli sviluppatori tra pagine e iterazioni.

5. Semplifica la navigazione.

I tuoi flussi utente dovrebbero essere fluidi e intuitivi. Quando applichi l'architettura delle informazioni al tuo wireframe, considera dove potrebbe essere necessario supportarla con suggerimenti di navigazione e orientamento. Devi migliorare navigazione e architettura delle informazioni se i tuoi utenti sono costretti a consultare una sitemap.

6. Non affezionarti troppo al tuo wireframe.

Anche un wireframe ad alta fedeltà resta comunque una bozza che richiede modifiche prima di diventare il prodotto finale. Dopo che il tuo team ha finalizzato il design del wireframe, arriva il momento di collaborare con gli sviluppatori e altri membri del team per aggiungere funzionalità.

7. Sfrutta gli strumenti del wireframing.

I team di design hanno bisogno di wireframe da poter condividere, salvare e trasformare in mockup online. Il kit per wireframe di Figma include strumenti di design da trascinare e rilasciare che permettono facilmente a principianti e professionisti del design di creare wireframe personalizzati ad alta fedeltà.

Checklist del design del wireframe

Il processo di wireframing ti aiuta a pianificare, costruire e collaborare durante i cicli di design e sviluppo, ma come si fa a sapere quando il lavoro è finito? Quando potrai spuntare tutti questi elementi di azione dalla tua lista di cose da fare per il wireframing, il tuo wireframe sarà pronto per i mockup e i prototipi ad alta fedeltà.

Dopo aver completato il tuo wireframe, riconsidera il tuo piano operativo iniziale. Ora che hai delineato il tuo prodotto finale, potresti essere in grado di ottimizzare ulteriormente quanto avevi previsto. Anche se si tratta solo di uno schizzo con dei segnaposto, il tuo wireframe dovrebbe mostrare:

• Quali schermate sono essenziali per soddisfare le esigenze degli utenti
• Flusso utente attraverso funnel di conversione
• Considerazioni sull'usabilità, inclusa la navigazione e l'organizzazione
• Obiettivi principali e flussi utente per ogni schermo
• Elementi chiave di design UI, oltre a contenuti e funzionalità interattive su ogni schermo
• In che modo i componenti di design si connettono per formare i modelli di schermata

Quando il tuo team inizia il processo di design, potresti non sapere esattamente come dovrebbe funzionare o apparire il tuo prodotto finale. I principianti potrebbero essere tentati di saltare il wireframing e affidarsi a modelli esistenti per i design, ma ciò può generare un'esperienza utente banale e poco utile. I wireframe concentrano l'attenzione creativa sui bisogni degli utenti e aiutano i team ad allinearsi durante tutto il processo di design e sviluppo. “Il wireframe offre un'anteprima del progetto, prima di investire molto tempo a rifinirne gli aspetti”, dice Tom. “Ogni volta che si riescono ad allineare più persone in un'organizzazione sin dalle prime fasi, si risparmia tempo dopo".

Il prodotto finale potrebbe apparire molto diverso dal wireframe iniziale, ma questa è una cosa positiva! Il wireframing permette di sperimentare, fare modifiche, provare nuovi concetti e correre rischi. Dopo aver definito la struttura di base, si possono facilmente sperimentare flussi di lavoro ed elementi di design che sarebbero difficili da modificare successivamente nel processo di design. Il design finale avrà un aspetto migliore grazie al processo iterativo di wireframing.

I wireframe mettono l'usabilità al primo posto, concentrando l'attenzione creativa su elementi essenziali per l'esperienza utente, come:

• Flussi utente e scenari
• Correzioni di UX design per potenziali punti critici
• Funzionalità di navigazione e orientamento
• Gerarchia delle informazioni integrata nei modelli di schermo

Come capire quando il wireframe è perfetto

In mancanza di dati quantitativi, è difficile valutare il successo di un wireframe, ma Tom spiega che esistono diverse metriche qualitative da applicare. Consiglia di eseguire test utente moderati per vedere se gli utenti possono completare l'esperienza utente senza istruzioni, invece di rimanere bloccati o non sapere come procedere".

Un altro fattore che indica un wireframe ben riuscito è l'allineamento con gli stakeholder. "Se stai uscendo da una sessione creativa con la sensazione di aver ottenuto il tipo di feedback che volevi, e che puoi procedere con sicurezza ai passaggi successivi, allora direi che il tuo wireframe è stato davvero un successo," dice Tom.

Ma se gli stakeholder si concentrano su dettagli minori o considerazioni estetiche invece delle necessità utente fondamentali, dice, "potrebbe essere indice che è necessario ridurre la fedeltà del wireframe. Rimuovi un po' di finiture dagli artefatti che stai condividendo, finché non ottieni il feedback di cui hai bisogno”.

Creare e personalizzare i design di wireframe con Figma

I team hanno bisogno dei wireframe per connettersi e fare brainstorming sui UX/UI design e il kit per wireframe di Figma è un buon punto di partenza. Puoi convalidare idee e accelerare i flussi di lavoro di design sulla piattaforma collaborativa di design di Figma e avviare progetti di web design con il kit per wireframe di siti web gratuito di Figma.

Per maggiori approfondimenti e ispirazione, Tom consiglia di connettersi con la community di Figma. “La nostra community condivide una miriade di idee di wireframe e modelli UI,” dice.