Metodologie Informatiche Applicate al Turismo

Metodologie Informatiche Applicate al Turismo

14. Progettazione di Siti Web

Paolo Milazzo

Dipartimento di Informatica, Universit`a di Pisa http://www.di.unipi.it/∼milazzo

milazzo di.unipi.it

Corso di Laurea in Scienze del Turismo A.A. 2013/2014

Progettare un sito Web

Sito Web: un insieme coordinato di pagine, relative ad uno stesso tema, che risiedono tipicamente su uno stesso server

La progettazione di un sito web `e una attivit`a complessa che coinvolge pi`u persone e professionalit`a

Quando si progetta una sito Web, soprattutto se fatto su

commissione, `e bene seguire un approccio basato su strumenti di comunicazione (diagrammi, immagini e prototipi intermedi) per maturare insieme con il committente le scelte di progetto

Fasi del processo di produzione di un sito

Progettazione

I Definizione dei requisiti

I Progettazione della struttura del sito e delle pagine (web design)

I Progettazione della grafica (visual designo progetto grafico) Realizzazione

I Sviluppo del sito

I Redazione dei contenuti Messa in opera

I Pubblicazione in rete

I Promozione

I Gestione e manutenzione

Realizzazione di prototipi

Le fasi principali del processo di produzione dovrebbero portare alla realizzazione di documenti e prototipi intermedi

I Requisiti −→ Documento di specifica

I Web design −→ Prototipo di navigazione

I Visual design −→ Prototipo di comunicazione

I Sviluppo −→ Prototipo funzionale

I Redazione dei contenuti −→ Prototipo editoriale

Questo consente di verificare la correttezza delle scelte di progettazione in corso d’opera

Criteri di qualit` a

I principali criteri di qualit`a da tenere sotto controllo durante le fasi di progettazione di un sito sono i seguenti:

I Architettura: la struttura e la navigazione del sito sono adeguate?

I Comunicazione: Il sito raggiunge i suoi obiettivi di comunicazione?

I Funzionalit`a: Le funzioni del sito sono adeguate ed affidabili?

I Contenuto: Il contenuto informativo `e corretto e adeguato agli scopi del sito?

I Gestione: L’operativit`a del sito `e ben gestita?

I Accessibilit`a: Il sito `e di facile accesso per tutti i suoi utenti?

Fase 1: Raccolta dei requisiti

Diversi tipi di siti

Nella fase di raccolta dei requisiti la prima cosa da fare `e capire che tipo di sito bisogna realizzare

I Siti di immagine (brochureware) e personali

I Siti commerciali

I Siti che offrono servizi

I Siti a carattere educativo o didattico

I Siti a carattere informativo

I Portali

I Siti di intrattenimento

I Siti di comunit`a

I Siti artistici ...

Distinzioni funzionali tra i siti

Inoltre `e bene capire subito le caratteristiche strutturali e funzionali del sito da realizzare

I Siti per Intranet, Extranet o Internet

I Siti statici o dinamici

F in particolare `e bene capire subito se servono tecnologie dinamiche server side

I Siti di sola presentazione o siti interattivi

F in particolare `e bene capire subito se servono tecnologie client side sofisticate

Progettare per l’utente

ATTENZIONE:

YOU are NOT the USER

I Quello che `e chiaro e usabile per il progettista o il committente pu`o essere oscuro e fonte di frustrazione per l’utente

USERS are NOT DESIGNERS

I Gli utenti (e i committenti) tipicamente non sanno qual’`e il modo migliore di organizzare l’informazione

Progettare per l’utente

Gli obiettivi di utilit`a e usabilit`a sono specifici per gruppi di utenti E’ bene creare profili utente

I Pensare ad utenti tipici, se possibile intervistarli Esempio: personaggi per un sito di un campus:

I Arturo, futuro studente, liceale

I Gianna, la matricola, non sa come funzionano le cose...

I Serena, la laureanda, interessata a tirocini, tesi...

I Prof. Rossi, informazioni di tipo amministrativo....

E’ bene inoltre pensare a scenari di utilizzo tipici

Valutazione dei costi benefici

La realizzazione di un sito Web, ma ancora di pi`u la sua manutenzione, ha un costo

Una volta che si ha un’idea del sito che si vuole realizzare `e bene analizzare i vantaggi in termine di immagine, ritorno economico o altro a fronte dei costi da sostenere

In questa fase `e bene definire gli obiettivi economici concretamente

I Ridurre del numero di chiamate telefoniche

I Aumentare il numero di visitatori

I Incrementare le vendite

Questo consentir`a anche di verificare a posteriori se gli obiettivi economici sono stati raggiunti

Definizione dei requisiti

Obiettivo: costruire un documento di specifica dei requisiti Un requisito `e una propriet`a richiesta o desiderabile da parte del committente

I I requisiti possono essere funzionali (es: il sito deve consentire di prenotare una camera nell’hotel) o non funzionali (es: il sito deve avere un aspetto che richiama lo stile classico dell’hotel)

La raccolta dei requisiti non `e una attivit`a di progettazione vera e propria, ma pone i vincoli sull’attivit`a di progettazione da svolgere in seguito

Tre attivit`a fondamentali:

I Esplorazione (raccolta di informazioni)

I Organizzazione (sintesi e stesura requisiti)

I Revisione e approvazione

Esplorazione

Raccolta di tutte le informazioni necessarie:

I intervista al committente

I analisi del vecchio sito (se esistente)

I interviste e questionari a possibili utenti

I osservazioni sul campo

I MOLTO IMPORTANTE: analisi dei siti concorrenti (punti di forza e debolezza, sintesi delle pratiche migliori)

Organizzazione

Stesura del documento di specifica dei requisiti Deve comprendere:

I Obiettivi del sito

I Profilo utenti e scenari di uso tipici

I Posizionamento competitivo (concorrenza)

I Requisiti particolari in termini di architettura, di comunicazione o di contenuti

I Descrizione dell’infrastruttura tecnologica necessaria (eventuali database, ecc...)

Revisione e approvazione

Il documento di specifica dei requisiti deve essere discusso e approvato dal committente

Pu`o essere comunque soggetto a revisioni future

Fase 2: Progetto dell’architettura del sito e della struttura di navigazione

(web design)

Struttura logica di navigazione

Scopo di questa fase: produrre un prototipo di navigazione (protosito) Quello che interessa in questa fase `e la struttura logica del sito, non la struttura fisica

I Struttura logica: come le pagine sono collegate tra loro

I Struttura fisica: come le pagine sono memorizzate e/o generate Esistono tanti modelli di struttura logica...

Modelli di struttura logica (1)

All-in-one: il sito consiste solamente di una home page che contiene tutto

Flat: tutte le pagine sono alla pari e sono tutte collegate tra loro. Si usa di solito per siti semplici suddivisi in sezioni (Home, Chi siamo, Contatti, ecc..)

Modelli di struttura logica (2)

Indice: simile al modello flat, ma con una pagina di indice generale

Daisy (margherita): si possono seguire dei percorsi alternativi che iniziano dalla home page del sito. Esempio: sito di web mail (si parte dalla inbox e si seguono percorsi diversi a seconda che si voglia leggere la posta, inviare un messaggio, impostare dei filtri, ecc...)

Modelli di struttura logica (3)

Gerarchia stretta: descrive un sistema in cui si ha una relazione gerarchica tra gli elementi. Esempio: Universit`a divisa in facolta, divise a loro volta in dipartimenti

Gerarchia multidimensionale: Modello in cui ci sono molti modi di visitare gli stessi contenuti. Le gerarchie si sovrappongono e i contenuti possono essere organizzati in modo diverso a seconda del punto di vista. Esempio: Sito dell’universit`a che pu`o prevedere percorsi di visita differenziati per studenti, docendi e altri

Modelli di struttura logica (4)

Search: le pagine del sito non sono collegate tra loro in modo fisso: il sito si basa su un meccanismo di ricerca che puo’ essere usato dagli utenti per raggiungere le pagine di interesse

Web Design

Prodotti di questa fase

I Mappa del sito

I Struttura delle pagine

I Diagrammi di navigazione (storyboard)

I Prototipo di navigazione

Esempio di scelte da effettuare

Organizzazione basata sui contenuti

I home → vertebrati → mammiferi → placentati → carnivori → felini → gatto domestico

Organizzazione basata sull’uso

I La maggior parte degli utenti cerca informazioni su animali domestici Organizzazione che tiene conto degli storyboard

I sequenze di navigazione per svolgere i compiti pi`u comuni

Struttura delle pagine

Per ogni pagina (o per gruppi di pagine) bisogna decidere

I La struttura dei menu

I Le voci dei menu

I Le aree logiche in cui `e suddivisa la pagina (intestazione, corpo, pi`e di pagina, ....)

I La tipologia dei contenuti di ciascuna area

I Gli ingombri di massima di ciascuna area

NOTA: in questa fase l’aspetto delle pagine (colori, font, dimensioni precise delle aree, ecc...) non `e ancora di interesse. Si lavora solo sulla struttura.

Prototipo di navigazione

Il prototipo di navigazione rappresenta tutte le pagine (o le principali) rispettandone la struttura

Deve essere navigabile, ossia devono essere presenti i link tra le varie pagine

Pu`o essere realizzato con strumenti come PowerPoint che consentono di ottenere un oggetto navigabile in tempi brevi

Il prototipo deve essere validato dal committente e, possibilmente, da un numero di utenti

Fase 3: Progetto grafico

Il progetto grafico

Il progetto grafico di un sito web consiste nella definizione dettagliata degli aspetti estetici del sito (colori, font, sfondi, ecc...)

Lo scopo di questa fase `e di realizzare delle immagini che raffigurino l’aspetto definitivo delle pagine del sito (rispettando la struttura definita nella fase precedente)

In questa fase non conviene scrivere le pagine direttamente in HTML Tipicamente si usano strumenti per la grafica come Photoshop, Paintshop Pro o Illustrator per creare una immagine della pagina (mockup)

Anche carta e matita possono essere efficaci

Le fasi del progetto grafico

Progettazione dei layout grafici

I Si realizzano una serie di proposte grafiche alternative che rispettino le strutture delle pagine

I Si verificano le proposte con il committente e, possibilmente, con un numero di utenti

Prototipo di comunicazione

I Una volta che il layout grafico `e stato scelto si realizzano le pagine HTML e i fogli di stile CSS