Progettazione di un sito web

1. Progettazione di un sito web Roberto Pirrone Corso di Fondamenti di Informatica COM1-COM5 e S.E.C.I. a.a. 2004/2005

2. 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

3. 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.

4. 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 server-side) quali autenticazioni, transazioni, ricerche su dati, carrello elettronico, etc.

5. 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.

6. 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

7. 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

8. 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.

9. 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

10. 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)

11. 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).

12. 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.)

13. 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.

14. 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.

15. 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.

16. Fase 1: Esempio di diagramma di Gantt

17. 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.

18. 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.

19. 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.

20. 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 consegna 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>.

21. 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.

22. Fase2: Esempio di mappa

23. 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.

24. Fase 2: Esempio di wireframe

25. Modello navigazionale motori di ricerca

26. Modello navigazionale a categorie/canali

27. Modello navigazionale lineare

28. Modello navigazionale ad opzioni

29. 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.

30. 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).

31. 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ò ricorrere a pagine ridimensionabili automaticamente.

32. 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.

33. 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).

34. 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.

35. 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.

36. 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

37. 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 s equalche 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à.

38. 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.

39. 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.

40. 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.

41. 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 lanci, 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.

42. Fase 5: Lancio e manutenzione: Consegna • Guida si 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.

43. 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.

44. 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 presso i motori di ricerca • 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.

45. 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

46. 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 per monitorare la sicurezza del sito.