Il wireframing è uno strumento pratico che permette di validare le principali scelte progettuali riguardanti il layout e l’usabilità di un’interfaccia digitale, consentendo di ricevere feedback e correggere gli errori in corso di progettazione. I wireframe possono essere di diverse tipologie e possono essere realizzati tramite tecniche diverse in base al livello di dettaglio e realismo che si vuole ottenere.
Perchè si utilizza?
Il wireframing è uno degli strumenti maggiormente utilizzati nel web design perché consente di evolvere il progetto con flessibilità. Si tratta di uno strumento economico in relazione ai costi di correzione di un progetto già implementato. Il wireframe si utilizza per testare e validare, con gli utenti e internamente, alcune scelte fondamentali di usabilità.
Durante le fasi iniziali del progetto, la realizzazione di wireframe a bassa fedeltà ha la funzione di esplorare le diverse opportunità progettuali e comunicarne l’idea di base. Livelli di dettaglio successivi consentono di testare le scelte riguardanti la struttura dei contenuti, la navigazione, l’interfaccia utente e il look & feel.
Il vantaggio principale del wireframing consiste nell’ottenere feedback dagli utenti quanto prima, in modo da produrre prodotti migliori in modo più veloce. Inoltre è un ottimo strumento di comunicazione sia all’interno del team che con il cliente.
Come si fa?
Il wireframe può essere creato tramite diversi strumenti a seconda del livello di dettaglio che si vuole raggiungere: da uno schizzo su carta all’utilizzo di appositi software quali Axure e OmniGraffle. La sua caratteristica principale consiste nella flessibilità, infatti è possibile cambiare rapidamente gli elementi presenti per adattarli alle evoluzioni del progetto. Quando un wireframe diventa interattivo prende il nome di prototipo, in quanto non è più statico ma simula i principali meccanismi di interazione e comportamento.
Il wireframe può essere sviluppato sia dal team di progettazione che insieme al cliente. Nel caso in cui venga coinvolto il cliente si organizza solitamente un workshop o si propone una sessione di co-design.
Cosa si ottiene?
Con questo strumento si impostano le principali linee guida di layout, come ad esempio la struttura della pagina, la disposizione dei contenuti e le principali funzionalità dell’interfaccia. Trattandosi di una bozza, il wireframe rappresenta la struttura base dell’interfaccia così come il progetto di un geometra o di un architetto rappresenta la struttura base di una casa.
Il deliverable consiste in uno o più wireframe, corredati da note e commenti che ne supportano la comprensione durante le fasi successive della progettazione.
Riferimenti
- Communicating the user experience – Richard Caddick, Steve Cable (2011)
- 35 Excellent Wireframing resources
- UX Magazine – Ditch Traditional Wireframes
