Progettazione di un sito web
Progetto di un sito web
 La progettazione di un sito web è un’attività molto
complessa perché può essere senza dubbio
annoverata tra le progettazioni software.
 Essa, a differenza della progettazione di altre
tipologie di software, comporta la sinergia tra
professionalità eterogenee:




Esperti di comunicazione
Esperti di marketing
Esperti di grafica
Esperti informatici
Progetto di un sito web
 Storicamente i primi siti web erano delle
realizzazioni puramente informatiche e soffrivano
della mancanza delle altre professionalità:
 Non c’era una modellazione dell’audience del sito
 Non c’era strategia comunicativa (siti vetrina, “basta essere
su internet per raggiungere una moltitudine di utenti …”)
 La grafica era spartana e tecnologicamente scadente
 In molti casi, quindi, un sito web non viene
progettato dal nulla, ma deve, piuttosto, essere
ridisegnato rispetto ad una versione precedente.
Progetto di un sito web
 Un moderno sito web ha una strutura
complessa nella quale si possono individuare
una parte di front-end ed una di back-end.


Front-end: struttura del sito, layout delle pagine, codice
HTML, script “leggeri” (client-side per elaborazioni
secondarie), grafica ed elaborazione multimediale.
Back-end: procedure informatiche (normalmente serverside) quali autenticazioni, transazioni, ricerche su dati,
carrello elettronico, etc.
Progetto di un sito web
 La
descrizione
precedente
fa
emergere,
essenzialmente, tre aree di progettazione di un
sito web:
 Progetto concettuale e logico
 Progetto grafico
 Progetto informatico di front-end e di back-end
 Tali attività di progetto non sono da vedersi in
maniera sequenziale, bensì sono intrecciate l’una
all’altra.
Progetto concettuale e logico
 Le attività principali di questa attività sono:





Reperimento del materiale testuale e pittorico
Organizzazione logica del contenuto in unità informative
auto-consistenti (nodi)
Eventuale espansione dei nodi complessi in agglomerati di
nodi più semplici
Creazione della struttura logica di navigazione
Creazione della struttura logica e del layout (non grafico)
delle singole pagine
Progetto del layout grafico
 Il progetto grafico di un sito web si articola nella
scelta dei seguenti elementi che, nel loro insieme,
costituiscono uno stile:





Palette dei colori di sfondo del testo e dei link
Font dei caratteri
Tipologia delle icone
Layout e colori dei pulsanti
Gestione delle immagini
Progetto informatico
 Questa parte della progettazione riguarda lo sviluppo delle
applicazioni coinvolte nel front-end e nel back-end del sito.
 Essa presuppone, comunque, una fase di individuazione
precisa delle interazioni (task) che andranno svolte
attraverso tali applicazioni e, quindi, dei percorsi che
devono essere seguiti, tra una pagina e l’altra, per
completare un certo task.
 Esiste dunque un legame forte con la parte di progetto
logico del sito che deve, in questo caso, servire da
specifica iniziale per il progetto informatico.
Core Process
 Il Core Process è attualmente una delle metodologie più
seguite per il progetto o per la riprogettazione di un sito
web.
 Esso è frutto di un’elaborazione collettiva di alcuni tra i più
importanti designer americani ed è presentato come un
workflow in cinque fasi, direttamente orientato al compito
della riprogettazione.
Kelly Goto, Emily Cotler, “Web ReDesign”, Apogeo, 2002, http://www.web-redesign.com
Jeffrey Veen, “Web Design: Arte e Scienza”, Apogeo 2001, http://veen.com/artsci/
Jeffery Zeldman, “Progettare il web del Futuro” New Riders 2003, http://www.zeldman.com
Core Process
 Definire il progetto
 Esplorazione (audit, identificazione utenza e requisiti di programmazione,
analisi competitors)
 Pianificazione (di budget, tempistica, modelli di lavoro collaborativo,
testing e documentazione)
 Chiarificazione (definizione degli obiettivi)
 Sviluppare la struttura del sito
 Contenuti (organizzazione generale, strutturazione e tecniche di
distribuzione)
 Sito (mappa, definizione convenzioni)
 Pagina (struttura, navigazione, convenzioni sui nomi, task interattivi)
 Visual design e testing
 Creazione (prima analisi concettuale del design visuale e proposte di
layout)
 Convalida (realizzazione del prototipo e convalida)
 Applicazione (template grafici, guida di stile)
Core Process
 Produzione e controllo qualità
 Revisione (definizione delle linee guida e della specifiche di
realizzazione, architettura dei file e delle cartelle)
 Costruzione (grafica, HTML, scripting, back-end)
 Testing (definizione dei criteri del CQ, debugging, verifica)
 Lancio e manutenzione
 Consegna (guida di stile per aggiornamento, doc. progetto,
addestramento team manutenzione)
 Lancio (campagna pubblicitaria, registrazione sui motori di
ricerca, upload)
 Manutenzione (piano di manutenzione, misurazione risultati,
verifica di sicurezza).
Fase 1: Definire il progetto: Esplorazione
 Raccolta informazioni
 Andranno utilizzati dei questionari per
conoscere le aspettative del cliente sul
sito, le sue competenze tecnologiche, la
sua capacità di mantenere il sito dopo il
rilascio.
In
questa
fase
si
raccoglieranno
informazioni,
attraverso qualsiasi fonte aziendale,
che possano essere utili allo scopo.
 Comprensione audience
 Anche in questo caso si possono
mettere a punto dei questionari per
identificare l’audience del sito, la sua
competenza tecnologica e le risorse a
sua
disposizione
(velocità
di
connessione, browser, etc.)
Fase 1: Definire il progetto: Esplorazione
 Identificazione requisiti di
programmazione e back-end
 Questionario per verificare la necessità
di interazioni particolari (motori di
ricerca, procedure di registrazione,
accesso a database, etc.
 Analisi competitiva
 Visita dei siti di soggetti analoghi al
cliente al fine di evidenziare ciò che in
essi funziona o meno.
Fase 1: Definire il progetto: Chiarificazione
 Individuazione degli obiettivi strategici
 Riunione mirata a definire i punti
chiave
su
cui
basare
la
(ri)progettazione del sito.
 Briefing creativo
 Analogo al precedente, in cui si
mettono in evidenza gli obiettivi del
design
visuale
e
comunicativo.
L’individuazione dell’audience è la
chiave di volta per la determinazione di
questo tipo di strategie.
Fase 1: Definire il progetto: Pianificazione
 Definizione del budget
 Bisognerà stimare le risorse necessarie
ed il loro costo per unità di tempo in
modo da allocare i tempi necessari a
seconda del budget complessivo del
cliente. Si può ricorrere ad un
diagramma di Gantt ed a tabelle di
calcolo dei costi orari/giornalieri.
 Tempistica e scheduling
 Messa a punto di documenti per tener
traccia delle attività svolte e dei relativi
costi. Costruzione di calendari,
panoramici e di dettaglio, per stabilire
le scadenze. Il calendario panoramico è
condiviso con il cliente per verificare
gli stati di avanzamento.
Fase 1: Esempio di diagramma di Gantt
Fase 1: Definire il progetto: Pianificazione
 Selezione del team di progetto
 Andranno
attribuite
le
varie
responsabilità ai componenti del
gruppo di progetto, tenendo conto che
più funzioni possono essere svolte dalla
stessa persona, magari in tempi diversi.
 Aree e strumenti di collaborazione
 Lo sviluppo di un sito web è, in genere,
un lavoro collaborativo. Bisognerà
stabilire delle aree comuni in cui
inserire i documenti in fase di sviluppo.
Si consigliano due aree: una “di
progetto” riservata al team ed una
“pubblica” visibile al cliente. È
importante
stabilire secondo quali
formati avvengono le comunicazioni
(flussi di dati) tra i vari gruppi.
Fase 1: Definire il progetto: Pianificazione
 Strategie di user testing
 In genere esistono diverse possibilità:
compilazione di questionari, focus
group con un campione rappresentativo
dell’audience ovvero test di usabilità. Il
focus group consente di ricavare a
priori delle buone indicazioni sulla
realizzazione. Il test di usabilità ci dice
cosa funziona e cosa no: gli utenti
devono svolgere dei task di interazione
senza avere le istruzioni. Se riescono al
di sotto di un certo numero di errori,
allora tutto funziona.
 Documentazione di progetto
 Il formato di tutta la documentazione e
le convenzioni utilizzate saranno
stabiliti a priori.
Fase2: Struttura del sito: Contenuti
 Organizzazione
 Prima fase di identificazione dei contenuti del
sito e della loro organizzazione sul piano
concettuale. Questa operazione va svolta nella
prospettiva dell’utente e, in genere, è meglio
affidarla ad una risorsa dello staff del cliente.
 Analisi dell’esistente
 Ispezione dei contenuti dell’eventuale vecchio
sito per filtrare quelli che possono essere utili
alla nuova struttura del sito. In caso di un
nuovo sito questa è la fase di reperimento e
digitalizzazione dei contenuti.
Fase2: Struttura del sito: Contenuti
 Schematizzazione gerarchica
 Costituzione di un elenco ordinato e strutturato
in sezioni e sotto-sezioni dei contenuti. Non
servono direttamente tutti i materiali, ma una
loro esauriente descrizione.
 Pianificazione del content delivery
 Realizzazione di un workflow per la gestione
delle modalità di distribuzione dei contenuti di
tutti i tipi: testi, immagini, grafica, materiale
multimediale, etc. con un’assegnazione precisa
dei compiti. In questa fase si è guidati dalla
schematizzazione gerarchica e vanno anche
annotati i contenuti extra, ad es. i messaggi di
errore su un task interattivo oppure i contenuti
dei tag <TITLE> e <META>.
Fase2: Struttura del sito: Sito
 Mappatura
 Definizione di una mappa che illustri la
navigazione del sito solo da un punto di vista
logico (senza pensare ai collegamenti di
servizio quali barre di navigazione). Utilizza la
gerarchizzazione dei contenuti.
 Analisi dell’esistente
 Confronto della mappa progettata con quella
del sito attuale al fine di verificare che la nuova
struttura di navigazione soddisfi le specifiche
espresse nella fase 1.
 Convenzioni
 Verrà individuato uno schema di convenzioni
sui nomi dei file in modo che tutti i componenti
del gruppo di progetto lo seguano.
Fase2: Esempio di mappa
Fase2: Struttura del sito: Pagina
 Gabbia concettuale (wireframe)
 Si effettueranno delle schematizzazioni di layout
di tipo non grafico, in cui si potranno anche
abbozzare alcune funzionalità da inserire nella
pagina.
 Navigazione
 Individuazione delle strutture di navigazione
(barre, pulsanti, menu, link) più adatti agli
scopi del sito. L’utente deve sempre avere un
senso di familiarità con tutte le sezioni del sito
stesso. Esistono diversi modelli navigazionali.
Fase 2: Esempio di wireframe
Modello navigazionale motori di ricerca
Modello navigazionale a categorie/canali
Modello navigazionale lineare
Modello navigazionale ad opzioni
Fase2: Struttura del sito: Pagina
 Nomenclatura e titoli
 Titoli, etichette, nomi dovranno essere
mantenuti coerenti, anche dal punto di vista
linguistico, su tutto il sito. L’uso di icone tientra
in questo tipo di coerenza. Una volta scelta una
famiglia di icone per indicare delle azioni o dei
dati, la si dovrà mantenere.
 Task e percorsi interattivi
 Se sono presenti dei task interattivi, è buona
norma disegnare i wireframe di tutte le pagine
coinvolte e disporli in sequenza o affiancati in
modo da suggerire graficamente e con esattezza
il percorso da seguire durante il task.
Fase3: Visual design e Testing: Creazione
 Revisione degli obiettivi del
briefing
 Semplice riepilogo degli obiettivi
comunicativi del progetto per avere le
specifiche del design visuale.
 Brainstorming concettuale
 Preparazione di bozze di layout grafici
orientati a comunicare gli obiettivi del
sito. In questa fase si deve tener conto sia
dell’effettiva realizzabilità tecnologica di
una soluzione, sia delle differenze di
visualizzazione su diverse piattaforme,
sia della semplicità d’uso da parte
dell’utente (Smart Design).
Smart design
 Verifica continua della fattibilità tecnologica
 Uso di una palette di colori web-safe: 216 colori sui 256 di
base (gli altri sono del sistema).
 Fare prove estensive di confronto tra Mac e PC e Netscape
ed Internet Explorer sia per i colori sia per i font di caratteri.
 Mac e PC hanno gamme cromatiche differenti
 Il PC tende a mostrare font più grandi  usare “size=2”
 Determinare con attenzione la risoluzione per una visibilità
su qualunque monitor: 800X600  760x420.
 Per alte dimensioni si può
ridimensionabili automaticamente.
ricorrere
a
pagine
Fase3: Visual design e Testing: Creazione
 Proposta di layout e verifica del
feedback
 Le diverse soluzioni verranno presentate
all’utente in forma di prototipi sempre
più raffinati. Il cliente dovrà concordare
e certificare la soluzione finale.
Fase3: Visual design e Testing: Convalida
 Realizzazione del protosito
 Viene realizzato un primo prototipo
HTML che consente di visualizzare
efficacemente i percorsi di navigazione
ed interazione. Questo sarà la base della
realizzazione finale.
 Testing funzionale
 Le esigenze particolari di interazione
attraverso script, frame, pop-up, etc.
vanno testate estensivamente con vari
browser e su differenti architetture (Mac
e PC).
Fase3: Visual design e Testing: Applicazione
 Creazione dei template grafici
 Le pagine master del sito, quelle da cui le
altre mutuano il loro design visuale,
devono essere completate interamente ad
eccezione dei contenuti. Questi template
saranno utilizzati dagli sviluppatori per
completare il lavoro.
 Realizzazione di una guida di stile
per il design
 Alla fine del design visuale andrà steso
un documento contenente la codifica di
tutti gli standard grafici adottati: font,
colori, titoli, etc. In questo modo sarà
possibile integrare altri contenuti nel sito
senza alterarne l’apparenza visuale.
Guida di stile
 Dimensioni della pagina
 Specifica della risoluzione video utilizzata e se le pagine sono
fisse o ridimensionabili.
 Intestazioni
 Didascalie e commenti per le barre di navigazione: stile
attivo/inattivo, stile dei caratteri o delle immagini.
 Colori
 Specifica dei colori per sfondi, testi, link nei vari stati, voci di
navigazione, pulsanti, etc.
 Testo HTML
 Descrizione del colore, font, dimensioni, stile dei link,etc.
Guida di stile
 Attributi grafici del testo
 Definizione degli stili del testo, nel caso esso sia stato
prodotto in forma grafica.
 Trattamento di immagini/foto
 Specificare uso di filtri, ritocchi dei vertici e posizionamento
all’interno del testo HTML.
 Rifiniture
 Specificare eventuali trattamenti speciali per pulsanti, linee,
frecce o altri simboli
Fase 4: Produzione e CQ: Revisione
 Linee guida e specifiche
 Revisione e/o produzione di documenti di
specifica su tutti gli aspetti implementativi del
progetto in modo da verificare che si stiano
ancora seguendo le specifiche originali.
 Stato e condizioni di avanzamento
 Verifica di coerenza delle ore di lavoro e delle
attività svolte con il budget previsto. Ciò serve
a capire se si devono aggiungere risorse, se
qualche compito è stato sottostimato ovvero
incrementare il budget per venire incontro a
nuove richieste del cliente.
 Architettura di file e cartelle
 Determinazione di una serie di convenzioni di
nomenclatura e di struttura per i file e le
cartelle del sito al fine di garantirne la
scalabilità.
Fase 4: Produzione e CQ: Costruzione
 Ottimizzazione della grafica
 Implementazione del design grafico attraverso
l’uso di HTML e di file nei formati grafici di
internet (GIF o JPEG). Un obiettivo di questa
fase è quello di mantenere contenute le
dimensioni dei file grafici. Per esempio le
immagini più grosse vengono sezionate in
tasselli per agevolare il download.
 Template e pagine master in HTML
 Costruzione di master con tutti gli elementi
HTML ripetitivi che ricorrono nelle varie
pagine del sito. Fanno eccezione le interazioni
ed i contenuti.
Fase 4: Produzione e CQ: Costruzione
 Realizzazione degli script leggeri
 A questo punto le pagine vanno integrate con
tutte quelle forme di interazione o animazione
semplice: pop-up, rollover, menu. Di solito si
ricorre al DHTML o a Javascript.
 Riempimento delle pagine
 Vengono inseriti i contenuti che dovranno già
essere stati tutti predisposti in formato digitale.
 Sviluppo del back-end
 Come ultima fase dello sviluppo si integrano le
applicazioni di back-end che saranno state
sviluppate a parte da esperti informatici. Gli
sviluppatori HTML sapranno dove integrarli
perché ciò è stato affrontato nella fase 2, a
livello di singola pagina.
Fase 4: Produzione e CQ: Testing
 Pianificazione del CQ
 Specifica del livello di test del sito delle risorse
e del tempo da allocare, in base al piano di
budget iniziale.
 Monitoraggio della qualità
 Fase di esecuzione del test vero e proprio in
cui si andranno a verificare tutte le parti del
sito in ogni loro funzionalità. Si può avere un
“alpha-test” interno o un “beta-test” effettuato
da un gruppo esterno. Il test può andare da un
livello informale ad uno formale in cui si
effettuano anche prove di prestazione basate
sul carico di utenza e si seguono diversi
percorsi di interazione su piattaforme
differenziate.
Fase 4: Produzione e CQ: Testing
 Priorità ed esecuzione del debugging
 Si dovrà mantenere traccia di tutti i bug
rilevati e, in dipendenza dal tempo mancante al
lancio, si stilerà un ordine di priorità
nell’apportare i correttivi.
 Verifica finale
 Fase di controllo definitivo di tutto l’insieme di
progetto e realizzazione prima del lancio.
Fase 5: Lancio e manutenzione: Consegna
 Guida di stile per
produzione/aggiornamento
 La guida di stile predisposta nella fase 3 deve
essere integrata con tutto ciò che riguarda lo
stile e le convenzioni sui nomi adottate per il
codice HTML prodotto, gli script, i fogli di stile
e così via.
 Documentazione di progetto
 Si dovrà organizzare tutto il materiale relativo
alla produzione in forma distribuibile al cliente
ed al gruppo di manutenzione.
 Archiviazione
 Si dovrà procedere ad una archiviazione
sistematica di tutto il materiale elettronico e
cartaceo prodotto sia in fase di progetti sia
durante l’implementazione.
Fase 5: Lancio e manutenzione: Consegna
 Meeting retrospettivo
 Si consiglia una riunione di chiusura del
progetto per evidenziare i punti dai quali si è
imparato qualcosa che sarà utile in lavori
successivi.
 Training per il team di manutenzione
 Le guide prodotte precedentemente e la
documentazione di progetto saranno utili per
una fase di addestramento del gruppo di
manutenzione sull’uso del sito.
Fase 5: Lancio e manutenzione: Lancio
 Pianificazione dei comunicati
 È un’operazione di marketing in cui si
stabiliscono le modalità di comunicazione
all’audience che il nuovo sito sta per andare in
linea e di richiesta di feedback da parte
dell’utenza stessa.
 Registrazione
ricerca
presso
i
motori
di
 Si tratta di predisporre accuratamente i tag
<META> del sito con le informazioni
necessarie per una corretta indicizzazione da
parte dei motori di ricerca.
 Upload
 Da effettuare nelle ore di minimo traffico.
Predisporre una home page provvisoria da
mettere in linea durante il caricamento.
Indicizzazione dei tag <TITLE> e <META>
 <TITLE>
 Per la home page un titolo conciso, ma sufficientemente descrittivo del
soggetto di cui il sito tratta.
 <META NAME=“keyword” CONTENT=“…”>
 Parole chiave indicanti i principali servizi e/o prodotti offerti
 Parole chiave indicanti il settore industriale o dei servizi
 Inserire eventuali termini gergali o specifici
 <META NAME=“description” CONTENT=“…”>





Breve descrizione (20 – 30 parole) del soggetto di cui il sito tratta
Nomi del management
Collocazione geografica
Contenuti rilevanti del sito per agevolare ricerche per chiavi differenti
Frasi chiave per cercare di coprire tutte le possibilità di ricerca
 Inserire i <META> anche in pagine interne che si vuole
indicizzare direttamente
Fase 5: Lancio e manutenzione: Manutenzione
 Team di manutenzione
 Il gruppo di progetto e sviluppo dovrebbe
individuare i componenti del gruppo di
manutenzione.
 Piano di manutenzione
 La manutenzione e/o aggiornamento del sito
(soprattutto per i contenuti) va pianificata
secondo scadenze ben precise.
 Misurazione dei risultati
 Auditing dell’utenza ed analisi delle visite per
verificare il raggiungimento degli obiettivi di
progetto.
 Verifica della sicurezza
 Predisporre le attività di controllo
monitorare la sicurezza del sito.
per