Se lavori alla progettazione di siti web, prima o poi ti sarà capitato di creare dei wireframe. E ci credo. I wireframe sono uno dei principali strumenti di comunicazione del progetto. Se fatti come si deve, permettono di ragionare a livello di struttura senza perdersi nei dettagli estetici. Si possono sottoporre a test di usabilità. Danno un’idea molto concreta delle scelte progettuali.

Tuttavia hanno anche degli svantaggi, come tutti i deliverable. In un certo senso, i wireframe appartengono al mondo di prima, quello del web 1.0. Fino a qualche anno fa per accedere al web esistevano solo i dispositivi desktop o laptop. Si progettava il wireframe di una pagina, e quello rimaneva. Gli schermi su cui quella pagina sarebbe stata visualizzata avevano più o meno le stesse proporzioni.

L’avvento dei dispositivi mobile ha però cambiato le carte in tavola. Si può accedere al web da tanti dispositivi diversi. Desktop, laptop, telefono, tablet, smart TV. I contenuti possono essere visualizzati su schermi di proporzioni e misure differenti. Ognuno di questi schermi cambia il modo in cui i contenuti sono visualizzati, fosse solo per la differenza di dimensione. Come fare in modo che quello che abbiamo progettato continui a svolgere a raggiungere gli obiettivi per cui è stato progettato?

Gli svantaggi dei wireframe

La risposta è la progettazione responsive. E qui i wireframe qui non aiutano. Sono pensati per un contenuto statico, definito una volta per tutte. Non hanno la flessibilità necessaria per tenere conto del fatto che il contenuto dovrà riadattarsi a tanti schermi diversi. I wireframe mettono in evidenza la posizione di un contenuto all’interno di una pagina, non la sua importanza relativa, cioè la sua priorità.

La posizione, certo è importante. Ma quello che veramente conta è la priorità di un elemento di contenuto rispetto a un altro. La priorità dipende da quanto quel contenuto soddisfi i bisogni delle persone e gli obiettivi di business.

 

Con i wireframe, insomma, il contenuto di una pagina passa in secondo piano e rischia di essere sottovalutato in favore di scelte estetiche e relative al layout che poi, se visualizzate su altri schermi, non funzionano.

L’approccio responsive richiede invece di pensare prima al contenuto. Il contenuto di una pagina deve essere visualizzato correttamente su ogni dispositivo. Del resto, è quello che le persone vengono a utilizzare.

Infine gli svantaggi dei wireframe per la progettazione sono anche altri

• il fatto che siano un deliverable principalmente visuale rischia di limitare la creatività dei designer
• sono statici, pertanto è difficile rappresentare il comportamento del contenuto delle pagine
• danno un’idea di completezza del design anche quando il design è allo stadio iniziale
• non danno indicazioni agli sviluppatori su come tradurre in codice determinate funzionalità rappresentate sulla pagina

Le priority guide, un’alternativa ai wireframe

Una possibile soluzione agli svantaggi dei wireframe possono essere le priority guide. Una priority guide è un elenco dei contenuti di una pagina ordinato, per priorità, dall’alto verso il basso. In alto stanno gli elementi di contenuto più importanti, in basso quelli meno importanti. 

Come si stabilisce l’ordine delle priorità? L’ordine è stabilito in base a quello che emerge dalla ricerca con gli utenti e dalla ricerca con gli stakeholders.

Altra caratteristica che rende le priority guide adatte alla progettazione responsive è il fatto che gli elementi di contenuto sono visualizzati graficamente già in formato mobile. In questo modo il contenuto che esse rappresentano è naturalmente adatto a essere rappresentato su mobile.

Le priority guide sono state introdotte dal content strategist Drew Clemens (Sparkbox) in un articolo pubblicato su Smashing Magazine. L’idea è nata proprio per ovviare agli svantaggi dei wireframe per il design responsive.

Nelle priority guide ci si concentra solo sul contenuto, sulla sua struttura e su come questo viene incontro ai bisogni delle persone. Niente considerazioni su layout, su stili di carattere, su dimensioni delle immagini. Il rumore è ridotto al minimo. Quello che conta è solo il cosa deve comparire e il perché. Sul come ci si pensa in una fase successiva, anche perché il come dipende dalla tecnologia. 

Da questo punto di vista, le priority guide si prestano bene a un approccio strutturato alla progettazione del contenuto, un approccio cioè nel quale si organizza il contenuto in modo indipendente dalla sua manifestazione grafica, in modo da renderlo fruibile su tutti i device.

Oltre a questi vantaggi, ce ne sono anche altri:

• i visual designer sono liberi di interpretare il contenuto in base alle indicazioni di priorità fornite nella priority guide e in base alle tecnologie su cui il contenuto dovrà comparire
• si possono dare agli sviluppatori indicazioni sulla logica che sta dietro a una determinata impostazione del contenuto

Priority guides o wireframe?

Ma una volta che usiamo le priority guide che ne facciamo dei wireframe? Li buttiamo? La risposta, ovviamente, secondo me è no, anche se alcuni sostengono che le priority guide possano essere un’alternativa ai wireframe. Io non sono così convinto. 

Come tutti i deliverable di progetto, wireframe e priority guide sono modelli. Come tali colgono solo alcuni aspetti del reale e ne nascondono altri. Quindi se ti stai chiedendo cosa usare la risposta è dipendeda cosa devi fare.

La cosa da fare è provare diverse combinazioni di deliverable, a seconda del risultato che vuoi ottenere.

Dal mio punto di vista il wireframe è ancora utile per visualizzare un’idea, per metterla a tavola, per testarla. Le priority guide sono molto utili per documentare la struttura logica di una pagina e per dare priorità e gerarchia ai contenuti senza invadere il campo del visual design.

Adesso non ti resta che provarle su un progetto. Alla fine dell’articolo ho raccolto i link che ho inserito all’interno dell’articolo. Fammi sapere cosa ne pensi.

Per approfondire

Sul web si trovano diverse risorse per approfondire le priority guide e iniziare a usarle. Se ne conosci altre o se hai esperienza con le priority guide, scrivimi una mail.

• Design Process In The Responsive Age (Smashing Magazine). L’articolo che ha introdotto il concetto di priority guide
• Content Priority Guide (Sparkbox). Un articolo di Emily Gray sul blog di Sparkbox
• Priority Guides: A Content-First Alternative to Wireframes (A List Apart). Istruzioni dettagliate per partire con le priority guide
• Priority Guide with Intent: Alignment through Content Early (Workday Design - Medium). Un utilissimo articolo con informazioni dettagliate su come utilizzare le priority guide.

Queste invece sono due risorse che danno un po’ di contesto su dove potrebbero inserirsi le priority guide nel workflow:

• Prioritizing content (Slideshare). Le slide di un talk di EURO IA 2020 in cui il designer Peter Koen fa una panoramica dei documenti progettuali in ottica content first
• Object-Oriented UX (A List Apart). La designer Sophia Prater ha proposto un framework a oggetti per i progetti di UX Design (io lo definirei più di content design). Consiste nel modellare gli oggetti prima pensando alle loro proprietà nel mondo reale e a come vivono nei modelli mentali delle persone e pensare alla loro implementazione in seguito
• Structured Content Design Workflow 2022 (Andy Fitzgerald Consulting). In questo articolo puoi vedere un esempio di come le priority guide possano inserirsi in un processo di progettazione che parte dai contenuti