Web prototyping: una road-map per lo sviluppo di siti di qualità
Roberto Polillo - Università di Milano Bicocca
polillo@disco.unimib.it
Il tema 
Una sintesi del mio libro Plasmare il web – una road map per siti di qualità, sul processo di progettazione e sviluppo di siti web per prototipi successivi
Progettazione e sviluppo per prototipi successivi
Figura del ciclo di progettazione con le fasi: requisiti, progettazione, prototipazione, test
segue
PRO:
Il prodotto si vede, anche se in modo parziale, fin dall’inizio e viene perfezionato in modo incrementale
le scelte effettuate possono essere sperimentate subito e si possono scartare quelle sbagliate
è il modello concettualmente corretto per la realizzazione di sistemi complessi
CONTRO:
difficoltà di stima dei costi a preventivo
si rischia di far divergere il processo, per troppe richieste di modifiche
la fluidità delle specifiche rende più difficile la comunicazione fra le persone coinvolte
segue
Non basta condividere la filosofia, bisogna specificare quali prototipi, quando e perché, per evitare che il progetto sfugga di mano
Bisogna partire da un modello del processo specifico per la classe di sistemi in esame
Nel caso dei siti web
Culture di progettazione differenti 
Non esiste ancora una disciplina condivisa di web engineering
Ma si può definire una road map personalizzabile, lungo la quale collocare i diversi prototipi 
Le 7 fasi della road-map per i siti web sono:
1 Definizione dei requisiti
2 Avviamento del progetto
3 Web design
4 Visual design
5 Sviluppo
6 Redazione dei contenuti
7 Pubblicazione
Poi Gestione del sito
segue
Le fasi di lavoro sono iterative e di solito parzialmente sovrapposte nel tempo
Ogni fase produce un output ben definito:
1 Documento dei requisiti
2 Piano di qualità
3 Prototipo di navigazione
4 Prototipo di comunicazione
5 Prototipo funzionale
6 Prototipo editoriale
7 Sito finale
Fase 1: Definizione dei requisiti 
La attività sono: 
Stesura del documento dei requisiti
Raccolta dei requisiti
Revisione e approvazione
Gli output sono: 
Documento dei requisiti basato su un modello di qualità per i siti web
Il modello di qualità - caratteristiche
Architettura 
Comunicazione 
Funzionalità 
Contenuto 
Gestione 
Accessibilità 
Usabilità 
Le sottocaratteristiche
Tabella con le 22 sottocaratteristiche
Esempio
Grafici a stella con i voti attribuiti a caratteristiche e sottocaratteristiche, permettono di valutare e confrontare la qualità dei siti 
Indice del documento dei requisiti
Sommario
Parte prima: Generalità
	1 Il committente
	2 Situazione attuale
	3 Obiettivi generali del nuovo sito
	4 Utenti
	5 Scenari d’uso
	6 Posizionamento competitivo
Parte seconda: Requisiti del sito
	7 Requisiti di architettura
	8 Requisiti di comunicazione
	9 Requisiti funzionali
	10 Requisiti di contenuto
	11 Requisiti di gestione
	12 Requisiti di accessibilità
	13 Requisiti di usabilità
Parte terza: Requisiti di gestione progetto
Fase 2: Avviamento del progetto
Le attività sono:
Eventuali offerta e contratto
Pianificazione
Organizzazione del gruppo di progetto
Gli output:
Piano di qualità
Fase 3: Web design
Le attività sono:
Progettazione dell’architettura dell’informazione
Costruzione del prototipo di navigazione
Verifica e convalida
Gli output sono:
Mappa del sito
Gabbia logica delle pagine
Prototipo di navigazione
Esempio di mappa del sito
Figura
Esempio di gabbia logica
Figura
Prototipo di navigazione
Prototipo wireframe navigabile usa e getta
Solo gabbie logiche in bianco e nero: no grafica, no contenuti
Menu e titoli definitivi (labelling)
Ingombri definitivi in relazione alla risoluzione video prioritaria
No PowerPoint, sì HTML 
Esempio di prototipo di navigazione
Un semplice esempio navigabile
Verifiche e convalide
Verifiche: check list per adeguatezza della gabbia logica e delle strutture di navigazione anche in relazione ai vari formati video
Convalide: test con utenti di usabilità e accessibilità della struttura di navigazione, in particolare navigabilità e labeling
Fase 4: Visual design
Le attività sono:
Progettazione dei layout grafici
Costruzione dei template HTML
Costruzione del prototipo di comunicazione
Verifica e convalida
Gli output sono:
Layout grafici
Guida di stile
Template HTML
Prototipo di comunicazione
Esempio di layout grafici
Figura
Esempio di guida di stile
Figura
Prototipo di comunicazione
Prototipo navigabile con layout grafici definitivi, ma senza contenuti
Usa e getta o incrementale, dipende dalla tecnologia usata
Verifiche: check-list per qualità tecnica della grafica, indipendenza dai browser, accessibilità
Convalide: test con utenti per usabilità e accessibilità della struttura di comunicazione, in particolare “navigabilità”, labeling e gradimento
A che punto siamo
Figura
Dobbiamo ora definire i dialoghi e le form relative
Figura
Fase 5: Sviluppo del sito
Le attività sono:
Progettazione del software
Costruzione del prototipo funzionale
Verifica e convalida
Gli output sono:
Diagrammi di navigazione e form per le funzioni
Diagrammi entità-relazioni 
Prototipo funzionale
Esempio di diagramma di navigazione
Figura
Esempio di form
Figura
Prototipo funzionale
Prototipo navigabile con layout grafici definitivi e dialoghi interattivi funzionanti
È il sito completo, ma ancora vuoto di contenuti informativi
Verifiche: test funzionali con base dati di prova
Convalide: test con gli utenti per usabilità e accessibilità delle funzioni
Fase 6: Redazione dei contenuti
Le attività sono:
Preparazione del piano editoriale
Preparazione della guida editoriale
Raccolta dei contenuti
Costruzione del prototipo editoriale
Verifica e convalida
Gli output sono:
Guida editoriale
Prototipo redazionale
Prototipo redazionale
È il sito finale, completo di contenuti
È ancora nell’ambiente di sviluppo o di staging
Verifiche: check-list sulla qualità tecnica dei contenuti, cioè copy-editing, controllo link spezzati, verifica motore di ricerca interno, eccetera
Convalide: test di usabilità e di accessibilità di scenario con gli utenti
Fase 7: Pubblicazione
Le attività sono:
Istallazione del prototipo redazionale sul sistema di produzione
Collaudo finale, in particolare test di carico e di accettazione
Pubblicazione in rete
Rodaggio e trasferimento della responsabilità di gestione al gruppo di esercizio
Output:
Sistema on-line gestito
Conclusioni
Road-map personalizzabile per un processo di sviluppo di siti web di piccole o medie dimensioni basato su:  
sviluppo per prototipi successivi in 7 fasi logiche
un modello di qualità per i siti web
Enfasi sui requisiti, basati sul modello di qualità
Semplificazione dei semilavorati prodotti
Ogni prototipo ha specifici obiettivi ed è sottoposto a specifiche attività di verifica e convalida
Consolidamento progressivo, forte riduzione dei rischi di ricicli
Molto utile anche nella didattica (oltre 100 progetti diversi)  
Per ulteriori dettagli
R.Polillo, Il check-up dei siti web, ed. Apogeo, 2004
R.Polillo, Plasmare il web, ed.Apogeo, 2006
Abbondante materiale di supporto per entrambi i libri (slide, template, esempi) reperibile su www.rpolillo.it