Wireframe: guida pratica

I wireframe sono uno strumento per pensare, utile anzitutto al team di progetto, prima ancora che deliverable per il cliente: solo in questa prospettiva si può affrontare senza scadere nel banale il problema del metodo o del software per realizzarli.

I wireframe sono uno degli argomenti dell’architettura dell’informazione su cui credo sia stato scritto e detto di più. E personalmente ho sempre guardato con un certo sospetto ai dibattiti incentrarti sui software o le tecniche migliori per crearli. Ora, per la prima volta, vorrei fornire qualche spunto derivante dalla mia concreta esperienza sul campo.

Diversi wireframe per le diverse fasi del progetto

La prima lezione che ho appreso è che è bene effettuare più tipi di wireframe in funzione delle diverse fasi del progetto. Spesso quindi la scelta fra sketch (schizzi grezzi), wireframe a bassa e alta fedeltà, e page description diagram è un falso problema. Il più delle volte servono tutti!

Proprio perché ciascuna soluzione ha diverse funzioni, pregi e difetti, ultimamente mi comporto così:

  1. cerco di produrre sketch già nelle prime fasi del progetto; in quanto schizzi nessuno si affeziona, si possono buttare e rifare con facilità
  2. solo quando l’architettura informativa di base è stata definita, passo a wireframe a bassa fedeltà, accompagnati o meno da page description diagram
  3. in seguito, preferisco produrre prototipi navigabili più che singoli wireframe ad alta fedeltà; questi sono utili per test di vario tipo, e consentono al graphic designer di essere più libero nella costruzione dell’interfaccia.

Oltre che alle diverse fasi del progetto, i diversi tipi di wireframe sono anche funzionali al tipo di destinatario: su questo rimando all’ultimo par. Da deliverable a strumento per pensare.

Sketch su tablet
Sketch realizzato su tablet con l’app Bamboo Paper: l’obiettivo è mostrare il riposizionamento di pochi oggetti chiave.
Pervasive Information Architecture template
Wireframe a bassa fedeltà per il libro ‘Pervasive Information Architecture’: template di pagina.

Da deliverable a strumento per pensare

I wireframe sono anzitutto strumenti per pensare e progettare, prima ancora che deliverable: servono anzitutto a chi li fa. I destinatari principali sono il team di progetto. Questa è la lezione più importante che ho imparato e da cui derivano tutte le altre. Se si condivide infatti questo assunto è ovvio allora che tutti i dibattiti sulla forma o sul software sono secondari.

Sketch per cross-channel design
Sketch hand-made sui fogli di un’agenda: confronto fra website e spazio fisico di un supermercato (omnichannel design).
Wireframe per cross-channel design
Wireframe risultante dall’elaborazione dello schizzo precedente: i colori indicano la logica degli elementi.

Per approfondire

Presentazioni

Volpon, A. (2012). Carta, penna e calamaio. I bozzetti in aiuto alla comunicazione di progetto. Better Software.

Libri

Brown, T. (2010). Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition). New Riders.

Caddick, R. & Cable, S. (2011). Communicating the User Experience: A Practical Guide for Creating Useful UX Documentation. Wiley.

Warfel, T. Z. (2009). Prototyping: A Practitioner’s Guide. Rosenfeld Media.