Originariamente, il termine "wireframe" si riferiva a una rappresentazione visiva di oggetti tridimensionali, come quelli utilizzati nella progettazione e nello sviluppo di prodotti. Ora viene utilizzato anche per descrivere la modellazione 3D nell'animazione al computer e nella progettazione e nello sviluppo di pagine web 2D e app mobile.
Continua a leggere per saperne di più sul valore dei wireframe per siti web, su come UX e UI entrano in gioco nella progettazione iniziale di siti e app e su come i software di wireframing rendano il tutto più semplice, veloce ed efficiente.
Cosa sono i wireframe?
Nel web design, un wireframe o diagramma wireframe è una rappresentazione visiva in scala di grigi della struttura e della funzionalità di una singola pagina web o dello schermo di un'app mobile. I wireframe vengono utilizzati nelle prime fasi del processo di sviluppo per stabilire la struttura di base di una pagina prima dell'aggiunta del visual design e dei contenuti. Possono essere creati su carta, utilizzando applicazioni software o inseriti direttamente in HTML/CSS. Poiché i wireframe sono intenzionalmente privi di dettagli visivi, vengono utilizzati al meglio come strumento di pianificazione che chiarisce il layout, la gerarchia e il comportamento prima di investire in elementi visivi o codice definitivi.
Utilizza un wireframe UX per rispondere a queste domande:
-
Cosa verrà visualizzato nell'interfaccia utente?
-
Dove verranno posizionati gli elementi sulla pagina?
-
In che modo gli utenti interagiranno con gli elementi della pagina?
-
Come funzionerà la pagina web o l'applicazione?
Wireframe, mockup e prototipi a confronto
I team spesso usano questi termini in modo intercambiabile, ma servono a scopi diversi a diversi livelli di fedeltà. I diagrammi wireframe si differenziano dai mockup e dai prototipi perché sono intesi come una rappresentazione a bassa fedeltà incentrata sul layout e sulla funzionalità. Pensa a un wireframe como a un progetto che mostra le funzionalità proposte e il funzionamento previsto di un prodotto. Mantenerlo semplice rende più facile rivedere e perfezionare il piano in corso d'opera.
La maggior parte degli esempi di diagrammi wireframe include linee e caselle semplici con pochi colori e solo i dettagli più basilari. Queste forme semplici rappresentano elementi UX come menu, pulsanti, contenuti e funzioni di navigazione. Ad esempio, un semplice rettangolo con le parole "Logo/Home Page" può rappresentare il punto in cui verrà posizionato il logo dell'azienda e indicare che il logo rimanderà alla home page del sito web.
Al contrario, un mockup è più simile a un modello non funzionante. Offre un'idea più completa di come apparirà il prodotto finale con elementi grafici, colori, branding e font, ma non ha alcuna funzione dell'interfaccia utente abilitata.
Un prototipo è più vicino a una versione completamente funzionante del prodotto finale. Può essere utilizzato per dimostrare caratteristiche e funzionalità, oltre che per testare la UX e il controllo qualità.
Il valore dei wireframe per lo sviluppo di siti web e app
In pratica, i team tendono a riscontrare il valore dei wireframe in diversi modi ricorrenti.
Mantenere i team concentrati e in linea con gli obiettivi
I wireframe allineano tutti i partecipanti allo sviluppo di un sito web sulla stessa lunghezza d'onda. Ciò significa che non solo i progetti sono calibrati più attentamente e la creazione dei contenuti è più semplice, ma anche che il team di sviluppo comprende più a fondo ciò che sta creando. Inoltre, evita ai team di dover ricorrere a espedienti, correggere o ricostruire completamente il lavoro in una fase avanzata del processo, fenomeno altrimenti noto come "scope creep".
Quando tutti gli stakeholder hanno approvato il contenuto e le funzionalità delineati nel wireframe, il team può procedere con fiducia. Con l'avanzare del progetto, il wireframe può essere utilizzato come riferimento per aiutare i vari team a mantenere la rotta.
Offrire un'esperienza di brand positiva
I wireframe riducono inoltre i rischi per il brand e la reputazione, aiutando i team a individuare esperienze confuse o frustranti prima che raggiungano gli utenti. Quando la UX e la UI di un sito web o di un'applicazione sono progettate bene, nessuno se ne accorge davvero: il prodotto funziona e tutti sono felici. Ma quando il design è scadente, gli impatti negativi possono causar danni duraturi al brand e alla reputazione. La creazione di wireframe per app e siti web è un passo importante verso la realizzazione di un design UX eccezionale.
Garantire che il sito o l'app siano creati in base agli obiettivi
Vedere chiaramente le funzionalità con una minima influenza creativa consente agli stakeholder di concentrarsi su altri aspetti del progetto. Il wireframing definisce le aspettative su come verranno implementate le funzionalità, mostrando come funzioneranno, dove saranno posizionate e quali vantaggi offriranno. Una funzionalità potrebbe essere eliminata se non si adatta agli obiettivi del sito.
Focus sull'usabilità
Il wireframing fornisce uno sguardo oggettivo sui nomi dei link, i percorsi di conversione, la facilità d'uso, la navigazione e il posizionamento delle funzionalità. I wireframe ti aiutano a identificare i difetti nell'architettura del sito o nelle funzionalità e ti consentono di visualizzare il flusso dal punto di vista dell'utente. Concentrarsi sull'usabilità fin dall'inizio è particolarmente importante perché è molto più economico e semplice risolvere i problemi nella fase di progettazione rispetto a quando si è già iniziato a scrivere il codice.
Comprendere la capacità di crescita dei contenuti
Se sai che il tuo sito crescerà nel prossimo futuro, il tuo sito web deve essere in grado di accogliere tale crescita con un impatto minimo sull'architettura, sull'usabilità e sul design del sito stesso. Il wireframing può rivelare queste importanti opportunità di crescita dei contenuti e come integrarle.
Integrare i feedback e incoraggiare la collaborazione fin da subito
Per avviare un nuovo progetto o il restyling di un prodotto, è importante ottenere contributi e feedback tempestivi per evitare di sprecare troppo tempo e denaro sviluppando nella direzione sbagliata. Un wireframe è un ottimo modo per trasmettere rapidamente le idee e ottenere feedback immediati per aiutarti a progettare un prodotto migliore.
Lavorando con i clienti e altri stakeholder del prodotto, puoi collaborare e raggiungere un consenso su come dovrebbe apparire l'interfaccia, come dovrebbe funzionare e quali elementi dovrebbero essere inclusi.
La condivisione dei diagrammi wireframe con il cliente, i designer, il team di sviluppo e chiunque altro sia coinvolto nello sviluppo del prodotto incoraggia un dialogo aperto per il feedback e la collaborazione, garantendo che tutti siano allineati fin dalle prime fasi del progetto.
Migliorare lo sviluppo Agile
I wireframe funzionano bene negli ambienti Agile. Puoi collaborare con i product manager e gli sviluppatori per identificare quali sezioni del design debbano essere sviluppate in ogni iterazione. Sviluppando il prodotto in blocchi iterativi, è più facile ottenere feedback e perfezionare il processo di progettazione e sviluppo in base alle esigenze. È sempre meglio ricevere feedback tempestivi prima che venga dedicato troppo tempo allo sviluppo.
Risparmiare tempo e denaro
Un wireframe ben progettato può far risparmiare tempo e denaro perché il team di sviluppo ha una migliore comprensione del prodotto generale che andrà a creare, evitando di dover correggere i problemi in seguito. Il team non dovrà ricorrere a espedienti dell'ultimo minuto per far funzionare correttamente le funzioni.
Altri team che utilizzano i diagrammi wireframe
Poiché i wireframe favoriscono l'allineamento tra i vari ruoli, sono particolarmente utili come riferimento condiviso per il team di prodotto più ampio, non solo per i designer.
Clienti e stakeholder
I wireframe offrono ai tuoi clienti (o anche agli stakeholder interni all'azienda, come il team di marketing) una comprensione generale e di facile lettura di ciò che si sta sviluppando. I revisori possono valutare rapidamente se il design soddisfa le loro aspettative, determinare se manca qualcosa, esplorare le azioni disponibili e vedere come sono assemblati gli elementi dell'interfaccia.
Mostrare i wireframe ai clienti può far emergere potenziali problemi o elementi mancanti che in precedenza erano stati trascurati o non presi in considerazione. È molto più semplice e meno costoso risolvere i problemi durante la creazione dei wireframe piuttosto che cercare di risolverli dopo la scrittura del codice.
Project manager
I project manager utilizzano i wireframe per garantire che tutti gli stakeholder siano sulla stessa lunghezza d'onda. La condivisione del wireframe con tutti rende più facile vedere la direzione del progetto, identificare i problemi che potrebbero insorgere, suggerire miglioramenti e concordare ciò che verrà creato.
I project manager possono utilizzare i wireframe como una lista di controllo per monitorare i progressi e garantire che tutto sia implementato come concordato.
Sviluppatori
Gli sviluppatori utilizzano i wireframe per comprendere i requisiti tecnici e identificare i punti in cui potrebbe essere necessario implementare funzionalità specifiche. Più wireframe utilizzati per la creazione di uno storyboard aiutano gli sviluppatori a determinare in che modo le interazioni dell'utente dovrebbero o possono funzionare insieme. Lo storyboard con i wireframe offre agli sviluppatori un'idea di come dovrebbero fluire i dati e li aiuta a identificare potenziali colli di bottiglia.
Design UX, UI e wireframe
Il design della user experience (UX) è un metodo per aumentare la fidelizzazione e la soddisfazione dei clienti migliorando l'usabilità e il gradimento nell'interazione tra il cliente e il sito, l'app o il prodotto. Il design dell'interfaccia utente (UI) è più vicino al graphic design, sebbene le responsabilità siano alquanto più complesse. In generale, design della user experience precede quello dell'interfaccia utente. UX e UI tendono a sovrapporsi, e dovrebbero farlo, nel processo di progettazione dei wireframe. Le aree di interesse includono:
Architettura dell'informazione e wireframe
Parte del processo complessivo nello sviluppo di siti web e nel wireframing, l'architettura dell'informazione consiste nel posizionare e dare priorità alle informazioni in modo che siano comprensibili per i futuri utenti di un sito o di un'app mobile. Secondo Information Architecture for the World Wide Web, vi sono quattro elementi fondamentali:
-
Schemi e strutture di organizzazione: categorizzazione e strutturazione delle informazioni
-
Sistemi di etichettatura: rappresentazione delle informazioni
-
Sistemi di navigazione: spostamento tra le informazioni
-
Sistemi di ricerca: ricerca e individuazione delle informazioni
Una buona architettura dell'informazione inizia con un'analisi aziendale approfondita per sviluppare una strategia di contenuto che offra un quadro generale di struttura, contenuto e design basato sugli obiettivi aziendali. Per confermare che l'analisi e la strategia siano corrette, i wireframe e i prototipi cartacei rappresentano un primo passo importante. Testare prototipi e wireframe è il modo migliore per ottenere feedback dagli utenti nelle prime fasi del processo di progettazione, contribuendo a evitare costosi restyling una volta che il sito è online. I test di prototipi e wireframe ti aiutano anche a valutare vari design in termini di prestazioni e preferenze dell'utente per creare il miglior prodotto complessivo.
Nella fase di wireframing, l'information design consiste anche nell'anticipare ciò che i diversi tipi di utenti devono vedere per primo e quali azioni probabilmente intraprenderanno. Ad esempio, se il tuo sito web fornisce un servizio di messaggistica, la maggior parte degli utenti che visitano il sito rientrerà in una di due categorie: utenti di ritorno e nuovi visitatori. Gli utenti di ritorno vorranno probabilmente accedere, mentre i nuovi visitatori potrebbero voler creare un account o semplicemente saperne di più sul tuo servizio. Sulla tua homepage, devi tenere conto di ogni tipo di visitatore e fornire loro informazioni sufficienti per raggiungere i rispettivi obiettivi. Forse queste informazioni vengono comunicate tramite pulsanti: accedi, registrati o maggiori info. L'information design si occupa di decidere cosa includere e dove posizionarlo.
Design della navigazione e wireframe
Il sistema di navigazione include una serie di elementi sullo schermo che consentono all'utente di spostarsi da una pagina all'altra. Il design della navigazione dovrebbe rendere chiaro il rapporto tra i link, in modo che gli utenti comprendano intuitivamente le proprie opzioni di navigazione. In genere, i siti web offrono più sistemi di navigazione, come una navigazione globale, locale, supplementare, contestuale e di cortesia.
Come suggerisce il nome, il design della navigazione determina i modi in cui gli utenti si muovono all'interno dell'app o del sito web. Da qualsiasi schermata, un utente può navigare verso una serie di altre schermate. Tuttavia, non lo saprà a meno che tu non glielo dica: i menu a discesa, i link cliccabili e le barre di scorrimento sono tutti esempi di elementi visivi che aiutano gli utenti a navigare nel tuo prodotto.
Design dell'interfaccia utente e wireframe
Il design della UI comporta la scelta e la disposizione degli elementi dell'interfaccia che aiutano gli utenti a interagire con le funzionalità del sistema in modo da massimizzare efficiency e facilità d'uso. Gli elementi comuni della UI includono pulsanti, campi di inserimento testo, caselle di controllo, menu e pulsanti di opzione.
L'interface design unisce tutto: informazioni, navigazione e tutto il resto nel tuo wireframe. Sia il design della navigazione che l'information design presentano componenti sullo schermo come pulsanti e menu. L'interface design si riferisce al modo in cui gli elementi vengono incorporati nell'interfaccia utente nel suo complesso, inclusi caselle di testo, immagini di intestazione e barre laterali.
Tipi di wireframe
Esistono quattro diversi tipi di wireframe:
-
Wireframe di base. Noti anche come rendering a bassa fedeltà, sono schemi di pagina molto semplici, solitamente in bianco e nero.
-
Wireframe annotati. Aggiungono un'ampia gamma di dettagli a un wireframe di base. Le annotazioni sono brevi note, in genere sul lato o in fondo a un wireframe, che descrivono ogni elemento presente, solitamente separate per aree di contenuto e funzionalità, e mostrano (brevemente) il motivo e lo scopo di ogni elemento.
-
Wireframe del flusso utente. Quando l'annotazione non è sufficiente a mostrare come un utente del sito o dell'app si muoverà logicamente tra i contenuti da una pagina all'altra, potrebbero essere necessarie ulteriori informazioni. Questi wireframe del flusso utente possono essere viste statiche di un wireframe completamente interattivo, ma potrebbero includere una presentazione o una raccolta di wireframe in serie per mostrare un flusso utente principale o un insieme di flussi utente.
-
Wireframe interattivi ad alta definizione. Consentono di sperimentare le interazioni (ad esempio, tocchi, clic e scorrimenti) all'interno di singoli wireframe o tra di essi. L'aggiunta di interazioni prima di passare ai mockup completi o alla prototipazione live fa risparmiare ore di lavoro a designer e sviluppatori. Questa variante di wireframe può essere realizzata solo in software di presentazione e progettazione grafica o in software di wireframing e prototipazione.
Come progettare e creare un wireframe semplice
Ora che abbiamo esaminato i componenti fondamentali dei wireframe, scopriamo come mettere tutto insieme per progettare e creare un wireframe semplice.
E ricorda: quando si tratta di wireframing, prima inizi, meglio è.
-
Pensa all'obiettivo finale del sito web e progetta tenendo a mente tale obiettivo. Pensa a come l'utente interagirà con l'interfaccia.
-
Inizia con una rappresentazione semplice e a bassa fedeltà della pagina web suddivisa in tre parti: l'intestazione (la prima cosa che gli utenti vedranno in alto nella pagina), il corpo della pagina web e il piè di pagina, che di solito contiene informazioni meno importanti.
-
Successivamente, pensa alla navigazione. Aggiungi pulsanti e link affinché gli utenti possano visitare le sezioni principali del tuo sito, comprese le aree di contenuto, la ricerca e l'accesso utente.
-
Annota il tuo wireframe per maggiore chiarezza.
Una volta raggiunta questa fase, puoi condividere il wireframe con gli stakeholder prima di passare al punto successivo. Puoi disegnare a mano il wireframe iniziale su carta o su una lavagna, mas una volta arrivato alla fase finale, utilizzerai probabilmente un software per sviluppare ulteriormente il wireframe.
Se stai progettando qualcosa che vada oltre una singola landing page, è utile anche pianificare il set di schermate necessarie prima di iniziare a disegnare i singoli layout. Sia che tu stia creando un wireframe per un'app o per un sito web, c'è una cosa di cui puoi essere certo: dovrai creare più di un wireframe. Il wireframing si basa interamente sul flusso utente. In che modo l'utente si muove all'interno della tua app? C'è un punto specifico in cui desideri che arrivi?
Progetti diversi richiedono flussi di lavoro differenti, ma come regola generale, dovresti redigere il tuo primo wireframe nella fase di avvio o di pianificazione del ciclo di vita del progetto. Prima di iniziare a creare i diagrammi, mappa i possibili percorsi che un utente può intraprendere, elencando ogni nuova schermata che potrebbe incontrare. Per ogni schermata aggiuntiva, avrai bisogno di un wireframe in più. Inoltre, i wireframe tendono a evolversi in termini di fedeltà man mano che un progetto passa dalla fase di esplorazione iniziale alla pianificazione concreta.
Questo lavoro preliminare può sembrare eccessivo, ma ne vale la pena. Passare direttamente al processo di wireframing senza un'idea chiara del flusso utente porta a diagrammi confusi e disordinati.
Un flusso di lavoro più dettagliato, passo dopo passo
Se desideri un processo più granulare rispetto ai quattro passaggi descritti sopra, il seguente flusso di lavoro può aiutarti a passare da un layout approssimativo a wireframe condivisibili e ad alta fedeltà.
1. Inizia ad aggiungere forme di base
Dopo un'attenta pianificazione, dovresti essere pronto per abbozzare il tuo wireframe. Inizia selezionando un “frame” (cornice) per il tuo diagramma. Se stai creando il wireframe di un'app, seleziona una forma simile allo schermo di un dispositivo mobile. Per il wireframe di un sito web, scegli una forma che ricordi la finestra di un browser. La maggior parte delle piattaforme di wireframing digitale dispone di entrambi i frame di base nella propria libreria di forme.
Successivamente, aggiungi gli elementi più grandi del wireframe. Dovrebbe trattarsi di forme di base e contenitori, che rappresentano elementi come una barra di intestazione, una colonna laterale o una casella di testo. Non è necessario includere testo o immagini in questa fase: basta stabilire il layout generale. Ripeti questo processo per ogni wireframe che devi creare.
2. Aggiungi pulsanti e link
Una volta stabilito il layout del wireframe, è il momento di aggiungere alcune funzionalità. In qualsiasi schermata del tuo prodotto, ci saranno probabilmente diversi pulsanti che indirizzeranno l'utente a una nuova schermata. Se non li hai già aggiunti come forme nel passaggio precedente, seleziona una forma di base per rappresentare ciascun pulsante e inseriscili ora. Puoi anche aggiungere il testo che apparirà sul pulsante (ad esempio, “home”). Se la tua piattaforma di wireframing include funzionalità di collegamento, collega ciascun pulsante al wireframe a cui dovrebbe reindirizzare l'utente.
3. Raccogli feedback e apporta modifiche
Ora è il momento di condividere il tuo wireframe con gli altri stakeholder per ricevere feedback, revisioni e approvazione.
4. Aggiungi dettagli
A questo punto, il tuo diagramma è probabilmente un wireframe a media fedeltà. Con il design di base approvato, puoi iniziare a perfezionare i dettagli. Aggiungi immagini e testo. Usa il colore per differenziare i vari elementi sulla pagina, ma attieniti alla scala di grigi. Assicurati che tutto sia delle dimensioni corrette, fino all'ultimo pixel.
5. Condividi il tuo wireframe
Ora dovresti avere un wireframe funzionale ad alta definizione. Condividilo con gli stakeholder del progetto e i team interessati.
Modelli ed esempi di wireframe
I modelli di wireframe possono aiutarti a progettare più velocemente una nuova pagina web o applicazione. La maggior parte delle applicazioni software per la progettazione di siti e app fornisce un'ampia varietà di modelli.
Indipendentemente dal settore in cui operi o dalla piattaforma per cui stai progettando, i wireframe possono aiutarti a progettare e realizzare la user experience perfetta. Dai un'occhiata a questi esempi di wireframe, inclusi alcuni combinati con flussi utente o di lavoro.
