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 server-side) 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ò ricorrere a pagine ridimensionabili automaticamente.

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

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 per

monitorare la sicurezza del sito.