PINGDOM_CANARY_STRING
Lucidspark LogoCosa sono i wireframe?
    Iscriviti gratis
Diagram

Cosa sono i wireframe?

Quali sono le vostre esigenze di lavagna?

Voglio fare la mia lavagna in Lucidspark.

Contenuto

14 minuti di lettura

Vuoi creare una lavagna tutta tua? Prova con Lucidspark. È veloce, facile e completamente gratuito.

Iscriviti gratis

Che cos'è un wireframe?

Immagina di aver ricevuto l'incarico di costruire una casa. Qual è la prima cosa che farai? Avrai bisogno di creare una planimetria, qualcosa per stabilire la struttura prima che inizi la costruzione effettiva. Meglio rifare un progetto ora che ristrutturare l'intera casa in un secondo momento. 

Tuttavia, non sei qui per imparare a costruire. Stai creando un'app o forse un sito web. Il processo non è del tutto diverso: non si dovrebbe iniziare a costruire un'applicazione o un sito web senza aver prima creato dei diagrammi wireframe.

Come una planimetria, un wireframe è un disegno essenziale incentrato sulla struttura e il layout. Pensa a un wireframe come allo "scheletro" del tuo sito web o della tua app.

Il wireframing si concentra sull'organizzazione e la struttura, per collocare ogni elemento al posto giusto: ai dettagli di stile penserai in seguito. Un wireframe è costituito da forme essenziali che rappresentano gli elementi visivi di una pagina, come barre di ricerca, immagini di intestazione e altri contenitori.

Il wireframing può sembrare difficile, ma non si tratta di un'attività riservata ai professionisti dell'UX. Non richiede software specializzati o una vasta esperienza. Molti wireframe iniziano come schizzi su un taccuino o persino su un tovagliolo, qualunque cosa sia a portata di mano quando arriva l'ispirazione. Per ottenere il massimo dai tuoi wireframe, tuttavia, non lasciarli come schizzi. Man mano che la tua idea iniziale si sviluppa, ridisegna i tuoi diagrammi utilizzando una piattaforma di wireframing digitale: ciò ti consente di aggiungere dettagli e simulare l'esperienza dell'utente. I wireframe più funzionali mostrano il layout di pagina, il flusso degli utenti, l'architettura delle informazioni e i comportamenti previsti degli utenti.

Il wireframing ha due vantaggi principali: fornisce a tutte le parti interessate una visione chiara del design del prodotto e mantiene la progettazione focalizzata sull'utente.

Tipi di wireframe

I wireframe sono in genere suddivisi in tre categorie: bassa fedeltà, media fedeltà e alta fedeltà. La fedeltà di un wireframe si riferisce alla quantità di dettagli che contiene. I wireframe a bassa fedeltà sono contorni approssimativi incentrati principalmente sul layout, mentre i wireframe ad alta fedeltà includono testo di riempimento e imitano alcune funzionalità utente. 
Esaminiamo queste distinzioni in modo più dettagliato ed esploriamo i casi d'uso per ogni livello di wireframe.

Wireframe a bassa fedeltà

wireframe a bassa fedeltà

La creazione di un wireframe a bassa fedeltà è solitamente uno dei primi passaggi nel processo di progettazione. Considera questi diagrammi come bozze grezze, un modo per visualizzare rapidamente il layout di base della tua app o del tuo sito web. Se stai creando un wireframe a bassa fedeltà, resta sul semplice: includi solo testi essenziali e forme di base. Tralascia immagini, testi di riempimento e icone: questi possono essere rappresentati semplicemente da una casella o "X".

Ricorda: veloce non significa sciatto. Chi vorrebbe mai passare un tovagliolo sporco al proprio manager? L'utilizzo di una piattaforma digitale di wireframing manterrà i tuoi wireframe ordinati e professionali, facilitando al tempo stesso la collaborazione. Non c'è bisogno di fotocopie o foto della lavagna, è sufficiente cliccare su "condividi".

Wireframe a media fedeltà

wireframe a media fedeltà

Dopo aver buttato giù le tue idee usando wireframe a bassa fedeltà, è il momento di perfezionarle un po'. Quando crei un wireframe a media fedeltà, dovresti concentrarti su dimensioni e proporzioni: quanto è grande ciascun elemento rispetto alla finestra o allo schermo nel suo insieme? E rispetto agli altri elementi? Lo stile è ancora ridotto al minimo. Se necessario, è possibile includere icone generiche e testi importanti.

I wireframe a bassa fedeltà aiutano a garantire il consenso degli stakeholder, ma la loro funzionalità finisce qui. Un wireframe a media fedeltà sviluppa quegli schizzi iniziali in una forma più pulita e dettagliata. Di solito vengono creati nelle prime fasi del processo di progettazione.

Alcune piattaforme digitali per la creazione di wireframe consentono di aggiungere funzionalità utente ai diagrammi. Un wireframe a media fedeltà dovrebbe comunicare all'osservatore un senso del flusso dell'utente. Se un pulsante modifica il layout della pagina o conduce a una nuova pagina, collegalo a un wireframe che rappresenta la nuova schermata.

Wireframe ad alta fedeltà

Con i wireframe ad alta fedeltà, la parola d'ordine è precisione. Ciascun elemento del diagramma dovrebbe essere esattamente al posto giusto, a una precisione di pixel. Nei limiti del possibile, è necessario includere le immagini e il testo che comporranno il prodotto finale. I menu e altri elementi cliccabili della pagina devono essere operativi e includere lo stesso livello di dettaglio.

A causa dell'elevato livello di dettagli in un wireframe ad alta fedeltà, questi diagrammi sono solitamente creati da progettisti UX. Mentre gli altri due tipi di wireframe aiutano solitamente i soggetti che non si occupano di progettazione a comunicare le loro idee ai progettisti, i wireframe ad alta fedeltà vanno nella direzione opposta, poiché questi vengono utilizzati dai progettisti per consentire ad altre parti interessate di valutare il progetto finale.

I wireframe, in modo particolare quelli ad alta fedeltà, sono spesso scambiati per diagrammi mockup. Se non conosci bene le differenze tra questi due tipi di diagrammi, la sezione seguente analizza le rispettive caratteristiche ed utilizzi.

Wireframe vs mockup

Mentre i wireframe sono essenzialmente planimetrie per app e siti web, un mockup è un modello 3D a colori costruito in scala. Proprio come non sarebbe mai possibile confondere una planimetria per una casa finita, non c'è modo di scambiare un wireframe, nemmeno uno ad alta fedeltà, per il prodotto finito. E va bene così. I wireframe non sono pensati per creare un forte impatto visivo, ma sono utilizzati principalmente per comunicare struttura e funzionalità.

I mockup, invece, hanno lo scopo di modellare il prodotto finale nel modo più accurato possibile. Caratteri, colori, immagini: un mockup include tutti gli elementi stilistici, ma senza le funzionalità del wireframe.

Come discusso in precedenza, i wireframe sono utilizzati durante tutto il processo di progettazione e sono spesso creati da individui al di fuori del team di designer. I wireframe aiutano le parti interessate a correggere eventuali difetti di progettazione strutturale e a trovare un accordo sul funzionamento dell'app o del sito web. La maggior parte degli elementi estetici viene tralasciata.

I mockup puntano l'attenzione sull'aspetto del prodotto e, di solito, vengono creati dai designer una volta completato il processo di wireframing. Quando i mockup di un prodotto vengono approvati dalle parti interessate coinvolte, il progetto può passare alla fase di sviluppo.

Che cos'è il wireframing nell'UX?

Chiunque può creare un wireframe. Tuttavia, i wireframe sono più comunemente usati dai progettisti UX, e questa sezione spiegherà il perché.

Come suggerisce il titolo professionale, i progettisti UX (o progettisti di esperienze utente) determinano i modi in cui gli utenti interagiscono con un prodotto. Per le applicazioni e i siti web, ciò significa che i progettisti UX sono responsabili della progettazione dell'interfaccia. I wireframe consentono ai progettisti UX di simulare l'interfaccia utente e di perfezionare il progetto prima che inizi una vera e propria fase di programmazione.

Quindi, questo come si presenta in pratica? Se un team UX sta progettando un'interfaccia web, ci sono diversi comportamenti da considerare: come navigano gli utenti attraverso la pagina? Ci sono dei pop-up? Menu a discesa? E, in caso positivo, dove si trovano questi elementi?

Mediante la creazione di wireframe di un sito web, i progettisti UX sono in grado di disegnare sia il layout del sito che il flusso utente. Gli elementi all'interno di un wireframe possono essere resi cliccabili, simulando l'effettiva esperienza dell'utente. I progettisti possono poi condividere questi wireframe con altri team per ricevere un feedback. I progettisti UX utilizzano i wireframe delle app in modo simile.

La lavagna è facile e veloce con Lucidspark. Inizia subito una prova gratuita per iniziare a creare e collaborare.

Iscriviti gratis

Quando iniziare a realizzare 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


Wireframe

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


Wireframe

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


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


Wireframe

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


Wireframe

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.


Italiano
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
vita privataLegale
© 2021 Lucid Software Inc.