Web design e user experience
Docenti
Prof. aggr. Giorgio Brajnik giorgio.brajnik@uniud.it
Prof. Luca Chittaro luca.chittaro@uniud.it
Crediti
12 CFu
Finalità
Lo studente deve sapere progettare e realizzare l'impianto grafico di pagine e applicazioni web e dev'essere in grado di valutare la qualità in uso e la user experience (UX) di una interfaccia utente. Dovrà conoscere e saper applicare vari modelli e teorie proposti in letteratura. Siccome i risultati relativi alla UX sono estremamente contestuali, una buona parte delle lezioni verteranno su metodi che si possono adottare e prospettive di analisi che si possono assumere per svolgere una valutazione dell'UX.
Oltre a normali lezioni frontali, gli studenti sono invitati a studiare e presentare in aula degli articoli tratti dalla letteratura scientifica. Inoltre per sostenere l'esame (solo orale) dovranno svolgere uno o più progetti pratici.
I progetti per la parte di UX includono i seguenti esempi:
- analisi delle strategie di persuasione adottate in siti di social network, e di news;
- applicazione di vari modelli delle emozioni su siti esistenti (ad es. di moda);
- svolgimento di esperimenti informali volti a confermare determinati risultati in letteratura;
- modifica di un sito live (tramite appositi proxy) e valutazione degli effetti su risposte emotive;
- indagini su aspetti legati alla credibilità, su blog, forum e social network.
La parte di web design avrà un carattere prevalentemente pratico.
Contenuti modulo 1
Lo studente deve sapere dell'esistenza di una serie di modelli e teorie, deve aver capito quando e come li si applica, e che tipo di conclusioni si possono trarre.
- Definizioni e connotazioni di user experience.
- Le emozioni; il loro ruolo; il modello di Norman delle emozioni (viscerale, comportamentale, riflessivo).
- Il modello di Hassenzahl (attributi edonici e pragmatici).
- L'effetto aura secondo Tracktinsky e secondo Hartman e De Angeli.
- Il modello di Desmet e Hekkert.
- Misurare le emozioni: metodi dimensionali, metodi discreti; lo strumento LEMTool; variabili psicofisiologiche (pupillometria).
- Caso di studio: la pubblicità online.
- Legge di Fitts (cenni di statistica: regressione lineare).
- Massime di Grice.
- Principio di pertinenza di Wilson e Sperber.
- Teoria dell'apprendimento esplorativo.
- Ciclo dell'interazione (di Norman).
- Emozioni.
- Estetica.
- Inattentional blindness; change blindness; banner blindness.
- Teorie della perceptual bandwith e della limited capacity.
- L'interattività come conversazione.
- Lo stato di Flow.
- Il modello Elaboration Likelihood Model e la persuasione.
- Il computer come attore sociale; credibilità e persuasione; tecnologie persuasive.
- I modelli dei sistemi di notifica; modelli del costo dell'interruzione.
Contenuti modulo 2
Tipografia e web
- La tipografia, il tono del testo, il carattere, le unità di misura, leggibilità, crenatura e legatura, interlinea, misure ideali, giustezza, sillabazione, giustificazione, spaziatura, ruscellamento, anatomia del typeface, alcune classificazioni.
- La personalità del Typeface, typeface autorevoli, romantici, meccanici, morbidi, neutri. Esempi di utilizzo. Esempi di Web Typography.
- Gerarchia visiva, la scala tipografica, stile e peso, contrasto tipografico, smallest effective difference, colori e visualizzazione dei link, leading, ritmo verticale e baseline grid, esercizi con i CSS, esempi.
- Elenchi puntati, apostrofi e virgolette, ampersand e altri segni tipografici. Utilizzo di filetti, elenchi e tabelle. Loghi basati sulla tipografia personalizzata.
- Esercizi.
Sezione aurea e numeri di Fibonacci
Sezione aurea, phi, rapporto fra segmenti, proporzione aurea, rettangolo aureo, spirale aurea, sequenza di Fibonacci, sezione aurea in natura, nell'arte, in architettura: esempi. Sezione aurea nella tipografica, esempi di impaginazione basata su rapporti aurei. Sezione aurea nel Web, griglia di Fibonacci. Utilizzo di sequenze di Fibonacci per stabilire il rapporto tra titolo e testo e per stabilire l'interlinea. Esercizi.
Layout e griglie
Layout, la disposizione degli elementi, le griglie come supporto all'impaginazione, five simple steps to designin grid systems, esempi e strumenti utili. La regola dei terzi in fotografia, esempi di composizione, looking room, composizione a triangoli, esempi online. Esercizi.
Il progetto
Realizzazione di un sito web su uno specifico tema di interesse. Progettazione dei contenuti, design e implementazione. Il processo di apprendimento è basato su una forte interazione tra gli studenti in aula durante l'intero corso.
Bibliografia
- Materiale didattico su
http://users.dimi.uniud.it/~giorgio.brajnik/dida/psw/corso/newwiki/doku.php?id=wdux:wdux2011-2012 - Creare siti web multimediali, G. Brajnik e E. Toppano, Pearson Education - Addison-Wesley, 2007.
- Emotional design. Perché amiamo (o odiamo) gli oggetti di tutti i giorni. D. A. Norman, Apogeo, 2004.
- Tecnologia della persuasione. Un'introduzione alla captologia, la disciplina che studia l'uso dei computer per influenzare idee e comportamenti B. J. Fogg. Apogeo, 2005.
- The Media Equation: How People Treat Computers, Television, and New Media Like Real People and Places. B. Reeves e C. Nass. Center for the Study of Language and Information (CSLI), 2003.
- Materiale didattico del Dr. Paolo Omero, docente del secondo modulo.
Modalità d'esame
L'esame (solo orale) verte soprattutto sulla discussione di una relazione svolta relativamente al materiale discusso durante il modulo 1 e su un compito scritto e un progetto pratico svolto durante il corso per quanto riguarda il modulo 2.
Per entrambi i moduli è necessario concordare coi due docenti il tipo di attività da svolgere.