CORSO: PROGETTAZIONE DI INTERFACCE GRAFICHE PER LA COMUNICAZIONE
Corso di laurea in Scienze della Comunicazione
Università degli Studi di Milano Bicocca
Anno Accademico 2002-2003
Ultimo aggiornamento di questa pagina: 12 gennaio 2004
________________________________________________________________________________
OBIETTIVI DEL CORSO
Questo corso breve (3 crediti, organizzati in 10 lezioni di 2 ore ciascuna), ha l’obbiettivo di:
- Fornire una introduzione al web come strumento di comunicazione
- Fornire agli studenti capacità di analisi critica di siti web esistenti, per valutarne pregi e difetti in funzione degli obbiettivi del sito
- Permettere agli studenti di effettuare una prima esperienza di impostazione di un semplice sito web, sviluppandone un prototipo con semplici strumenti di prototipazione.
Poiché il corso è diretto a studenti di Scienze della Comunicazione, il corso non fornisce nozioni tecniche sullo sviluppo dei siti, ma si concentra sugli aspetti metodologici e concettuali.
________________________________________________________________________________
PROGRAMMA DEL CORSO
- Introduzione al web
- Comunicazione d’impresa e web
- L’interfaccia web
- La usabilità dei siti web
- Valutazioni di usabilità per i siti web
- Web design
- Architettura dell’informazione
- Navigazione
- La grafica del web
- Un modello di qualità per i siti web
________________________________________________________________________________
PREREQUISITI
Il corso è coordinato con il corso di Grafica, che fornisce alcune nozioni di base utili per una migliore comprensione degli argomenti, e fornisce una introduzione all’uso di Dreamweaver, suggerito per la realizzazione del prototipo di esame.
________________________________________________________________________________
MATERIALE DIDATTICO
Si riportano qui di seguito tutte le slides utilizzate a lezione (ultimo aggiornamento: 29/4/2003).
Introduzione al corso
Orario, obbiettivi, piano delle lezioni, esame, piano di lavoro, impegno degli studenti, risorse per lo studio
(ZIP PPT 598 Kb )
Lezione 1: Introduzione al web
Il web: nozioni tecniche di base (protocollo IP, DNS, URL, HTML, http, Browser). Diffusione del web. Tipologia dei siti web. Esempi
(ZIP PPT 1.14 Mb )
Lezione 2: Comunicazione d’impresa e web
La rete di comunicazione d’impresa. Internet, extranet ed intranet portals. Enterprise Portals. Esempi
(ZIP PPT 3.25 Mb )
Lezione 3: L’interfaccia web
Il paradigma “point & click”. Dagli ipertesti al web: storia ed esempi. La navigazione web: caratteristiche e problemi. Il web come interfaccia universale
(ZIP PPT 5.36 Mb )
Lezione 4: La usabilità dei siti web
Il concetto di usabilità. Perché è difficile progettare sistemi usabili. La usabilità dei siti web. Che cosa possiamo fare per costruire sistemi usabili.
(ZIP PPT 9.85 Mb )
Lezione 5: Valutazioni di usabilità per i siti web
Come valutare la usabilità di un sito: usabilità enquiry, usabilità inspection, usabilità test. Come si conduce un test di usabilità. Il test da realizzare per l’esame
(ZIP PPT 5.52 Mb )
Lezione 6: Web design
Progettazione centrata sull’utente. Come si progetta un sito web: sviluppo per prototipipi successivi ed attività relative. LO-FI prototyping: come si fa e perchè. Evoluzione del software e dei siti web: concetto di release; caratteristiche e problemi specifici dei siti web.
(ZIP PPT 3.61 Mb )
Lezione 7: Architettura dell’informazione
Architettura dell’informazione: che cos’è. Strutture informative tipiche: lineari, gerarchiche, a matrice, a rete, ibride; esempi. Come raggruppare l’informazione: per contenuto, per utente, per compito; problemi ed esempi. Scrivere per il web
(ZIP PPT 8.51 Mb )
Lezione 8: Navigazione
Navigazione nelle strutture gerarchiche: navigazione verticale, orizzontale, trasversale; esempi.. Sistemi di navigazione: link, menu, sitemap, timeline; esempi. Sistemi di orientamento: “you are here”, breadcrums, landamarks; esempi. Sistemi di ricerca.
(parte 1: ZIP PPT 7.87 Mb )
(parte 2: ZIP PPT 8.14 Mb )
(parte 3: ZIP PPT 5.12 Mb )
(parte 4: ZIP PPT 9.88 Mb )
Lezione 9: La grafica del web
Creatività vs usabilità. Tipografia (uso dei font). Uso del colore (aspetti percettivi, cognitivi e culturali). Gestalt. Esempi.
(ZIP PPT 12.6 Mb )
Lezione 10: Un modello di qualità per i siti web
Produzione di un sito web: attori e ruoli. Un modello di qualità per i siti web basato su sei macro-attributi: funzionalità, contenuto, gestione, accessibilità, comunicazione, usabilità. Discussione ed esempi.
(ZIP PPT 6 Mb )
________________________________________________________________________________
ALTRE RISORSE PER LO STUDIO
Libri:
Jakob Nielsen, Web Usability, Edizione Apogeo, 2000
Siti web:
www.useit.com (sito di Jakob Nielsen, dedicato alla usabilità dei siti web)
Altre risorse:
Michele Visciola, Usabilità dei siti web, Edizione Apogeo, 2000
Jakob Nielsen, Marie Tahir, Homepage usabilità, 2001
www.usableweb.com
www.webusabile.it
________________________________________________________________________________
MODALITA’ D’ESAME
L’esame consiste nella discussione di due semplici progetti, che dovranno essere sviluppati da gruppi di 3 studenti, come di seguito dettagliato:
Progetto 1: Analisi di un siti web esistente
Il progetto consiste nella valutazione della qualità di un sito web scelto dagli studenti, utilizzando il modello di qualità descritto nella lezione n.10, basato su 6 macro-attributi (funzionalità, contenuto, gestione, accessibilità, comunicazione, usabilità). L’output del progetto consisterà nella stesura di un rapporto di valutazione.
Suggerimenti ed esempi:
- Un esempio di valutazione di un sito effettuata dagli studenti utilizzando questa metodologia è riportato qui (Versione Word-Zip 1.32 Mb). Numerosi esempi di valutazioni effettuate dahli studenti del corso di Interazione Uomo Macchina del corso di laurea in Informatica.
- Si sottolinea l’importanza di effettuare un test di usabilità (vedi lezione n. 5) per valutare l’attributo della usabilità. Il test di usabilità deve essere effettuato con 5 utenti campione.
- L’impegno stimato per il progetto 1 è di circa 15-20 ore di lavoro per ogni studente del gruppo.
Progetto 2: Realizzazione del prototipo di un sito web
Il progetto consiste nel progetto e realizzazione prototipale di un semplice sito web proposto dagli studenti. L’output del progetto consiste nei seguenti due elaborati:
- Una sintetica presentazione del progetto in formato Power Point, con i seguenti contenuti:
- titolo del progetto
- nomi e indirizzi email degli autori
- motivazioni e obbiettivi del sito
- riferimenti ad eventuali siti analoghi; analogie e differenze
- a quali utenti il sito si rivolge
- quali compiti il sito deve supportare
- quale è il contesto d’uso del sito
- struttura del sito (alberatura del sito)
- struttura grafica delle pagine del sito, con esempi
- quali scenari d’uso
NB: La struttura del sito, se di rilevanti dimensioni, potrà essere , in alternativa,
portata su carta - Il prototipo “cliccabile” del sito (la home page e qualcuna delle pagine principali, quanto basta per dare un’idea delle caratteristiche del sito) realizzato con Dreamweaver.
Suggerimenti:
Si suggerisce agli studenti di curare in particolar modo il “concept” generale del sito: quali sono i suoi obbiettivi generali e come la sua struttura derivi da questi obbiettivi. Il prototipo realizzato con Dreamweaver ha lo scopo di mostrare “dal vivo” come il sito si presenterebbe, una volta realizzato. Per questo il prototipo dovrà contenere almeno la home page, e le principali pagine di primo livello.
Chi non fosse in grado di utilizzare Dreamweaver potrà realizzare il prototipo con Power Point, o anche in versione cartacea, purchè sia possibile effettuare una esecuzione simulata altrettanto accurata (si veda la lezione 6, sul paper prototyping). Ovviamente, il voto finale terrà conto di questa limitazione.
Per la metodologia di progettazione, si veda la lezione n.6. Si consiglia di dedicare particolare attenzione alla struttura di navigazione del sito (si veda la lezione n.8). Indicazioni utili per definire la grafica del sito sono state fornite nella lezione n.9.
L’impegno stimato per il progetto 2 è di circa 20-25 ore di lavoro per ogni studente del gruppo.
