Home > Blog > Wireframe: guida pratica

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.

Quale software

I dibattiti sul software migliore sono fra i più accesi. Ho spesso trovato capziose questo tipo di discussioni, pur riconoscendo che anche lo strumento ha la sua importanza. E quindi, dopo avere provato vari tool, ecco le mie preferenze.

  1. Sketch, schizzi: carta, penna e colori rimangono per me ancora oggi la base di partenza; in mancanza di meglio o per non perdere il momentum, disegno un po’ dappertutto: quaderni, agende, riviste e quotidiani, biglietti… Ultimamente uso anche la tavoletta grafica o il tablet, direttamente o dopo un inizio su carta.
  2. Wireframe a bassa e alta fedeltà, prototipi navigabili: Axure RP Pro è senz’altro fra le migliori soluzioni; di questo software apprezzo soprattutto la velocità e facilità con cui permette di eseguire i wireframe e di convertirli in prototipi interattivi navigabili.
  3. Wireframe ad alta fedeltà: in alternativa ad Axure uso talvolta Omnigraffle. Pro: le numerose librerie gratuite (stencils) presenti su Graffletopia; contro: l’interfaccia (basata sulla logica dei livelli tipica di molti programmi di grafica) non consente la velocità di elaborazione garantita da Axure. Esistono librerie aggiuntive anche per Axure ma quelle gratuite sono in numero minore.

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 (cross-channel 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.