QR code per la pagina originale

Achitettura delle pagine web: wireframes o PDD?

Sulla rete si discute sulle tecniche di progettazione delle pagine web. Due le metodologie a confronto: Wireframes e Page Description Diagrams

,

Aprile caldo sul fronte del dibattito sul web design. Si discute su Asterisk: uno dei più autorevoli blog a livello mondiale sull’argomento. La discussione, scatenata da un post di D. Keith Robinson, autore del blog, riguardo la progettazione delle pagine web, vede a confronto due scuole di pensiero: quella dei wireframes e quella dei diagrammi di descrizione delle pagine.

Entrambe le tecniche servono per descrivere le funzionalità di alcune parti chiave di un sito web, siano esse pagine statiche o modelli per pagine dinamiche. Siamo nella fase della progettazione di un sito in cui si identifica cosa apparirà sulla pagina, ma non il come. Gli schemi prodotti in genere vengono proposti al cliente con una iterazione che porta alla definizione delle caratteristiche delle pagine.

Disegnare wireframes in genere è la scelta più usata, consiste nel disegnare la pagina illustrando graficamente gli elementi che la costituiscono. Ne risulta una descrizione a blocchi più o meno dettagliata che assomiglia alla bozza di un layout.

Figura 1. Esempio di Wireframe

Esempio di Wireframe

La tecnica dei diagrammi di descrizione delle pagine o PDD (Page Description Diagrams) nasce alla fine degli anni ’90 da un’idea di Dan Brown (omonimo del famoso scrittore). Si presenta come un semplice schema che in genere sta tutto su un foglio diviso in 3 o 4 colonne. Ad ogni colonna si assegna un numero progressivo che indica una priorità (es. 1,2,3,4).

Sotto ogni colonna si scrivono i requisiti in ordine di importanza. A lato di questo schema, c’è una colonna per le annotazioni che possono descrivere lo scopo del documento, gli obiettivi e tutte quelle indicazioni che possono essere utili allo stadio successivo del progetto ovvero la realizzazione del layout. Non è escluso che si possano dare delle indicazioni su alcuni elementi, anche disegnandoli, ma più per mostrarne il funzionamento che per definirne una eventuale veste grafica.

Figura 2. Esempio di Page Description Diagram

Esempio di Page Description Diagram

I diagrammi nascono soprattutto per distribuire meglio il lavoro in team restituendo il giusto equilibrio tra l’azione del web-designer e dell’information-architect. I sostenitori dei PDD affermano infatti che una descrizione grafica può essere forviante per il cliente, il quale si concentra più sugli aspetti figurativi che sui contenuti. Il problema, dicono, nascerebbe quando viene sviluppata la proposta della reale veste grafica ed il layout risulta diverso, magari per esigenze stilistiche, dal grafico del wireframe.

In questo caso il cliente, che aveva accettato il wireframe, potrebbe ritenersi escluso dalla decisione e il web designer essere costretto a ridisegnare tutto. Oppure il web designer potrebbe sentirsi scavalcato nella sua azione creativa scontrandosi con i vincoli imposti dal modello grafico.

D’altro canto i sostenitori dei wireframes pensano che una descrizione con i PDD risulti astratta e non sia di reale supporto alla comprensione del progetto da parte del cliente. Invece sono convinti che una buona prototipazione cartacea sia molto d’impatto e possa addirittura esaltare le caratteristiche funzionali della pagina o delle transizioni tra pagine.

L’architettura dell’informazione è un campo ancora molto giovane ma già offre valide strategie. Confrontarsi con questo tema è di sicuro interesse per chiunque sviluppi siti o soluzioni per il web. Una buona fonte di approfondimento in italiano la si può trovare su information architecture.it.